码迷,mamicode.com
首页 > Web开发 > 详细

0428-css样式

时间:2018-05-01 20:35:43      阅读:197      评论:0      收藏:0      [点我收藏+]

标签:内嵌   联系   color   图片路径   href   文字   图片   size   ext   

一、CSS样式表
      引入的三种方式
1、内联样式:标签内部     style
2、内嵌样式:<head></head>标签内部(<style></style>)
3、外联样式:<link rel="stylesheet(样式表)" type="text/css" href="css文件路径"/>

<!--外联样式(link:联系)-->
<link rel="stylesheet" type="text/css" href=""/>
<!--内嵌(style:风格、样式)-->
<style type="text/css">
<!--内联-->
<div style=""></div>

二、选择器(在容器中查找相关)
1、id 唯一、通过 # 查找
2、lass 可以重名、通过    . (点)  查找
3、<标签名> 通过 <标签名> 查找(<div>/<span>:控制所有div/span标签)
4、并列选择  通过 , 查找(可并列控制不同类型:id,class,<div>,<span>)
5、后代选择  通过 空格 查找(只控制后代的样式)

/*井号#代表id*/
#weiyi{}/*选择id="weiyi"的元素*/
/*.代表class*/
.kechongming{}/*选择所有class="kechongming"的元素*/
/*通过标签名直接控制*/
div{}/*选择所有div*/
span{}/*选择所有span*/
/*并列选择,元素之间加 , */
#weiyi,.kechongming,div,class,span{}
/*空格 选择后代*/
#houdai div{}/*选择id="houdai"的元素中的所有div*/
.houdai_ span{}/*选择所有class="houdai_"的元素中的所有span*/
<!--选择器-->
<div id="weiyi"></div>
<div class="kechongming"></div>
<div class="kechongming"></div>
<div class="kechongming"></div>
<div id="houdai">
  <div></div>
  <div></div>
  <span></span>
  <span></span>
</div>

三、样式
1、大小 : width:宽度 height 高度
2:、背景: background-color 颜色

3、背景图片:①、background-image:url("") 图片路径

                       ②、background-size: 图片尺寸

                       ③、background-repeat:no-repeat 删除默认平铺

/*样式 大小与背景*/
#beijingtupian{
  margin-top:10px ;
  width: 200px;
  height: 200px;
  border: 1px solid red;
  background-image: url(../../xiaomi/disanhanggundong.png);
  background-size: 150px,100px;/*背景尺寸*/
  background-repeat:no-repeat ;/*背景平铺方式*/
}
<!--样式-->
<!--大小与背景-->
<div style="width: 200px; height: 200px; background-color: green;"></div>
<div id="beijingtupian"></div>

四、字体(font 文字)
1、字体的样式: font-family(微软雅黑、宋体、楷体等)
2、字体的大小: font-size
3、字体的格式: font-style
4、字体的粗细: font-weight
5、字体的颜色: color
6、给字体加线:text-decration:

/*字体样式*/
span{
  font-family: "微软雅黑";
  font-size:16px;
  font-style: italic;/*字体倾斜*/
  font-weight: bolder;/*字体加粗*/
  text-decoration: line-through;/*删除线(through:穿过)*/
  color: orange;
}
<!--字体的样式-->
<span>字体的样式</span>

 

 

0428-css样式

标签:内嵌   联系   color   图片路径   href   文字   图片   size   ext   

原文地址:https://www.cnblogs.com/zhengleilei/p/8976536.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!