CSS 指层叠样式表 (Cascading Style Sheets)
样式定义如何显示控制 HTML 元素,从⽽实现美化HTML⽹⻚。
样式通常存储在样式表中，⽬的也是为了解决内容与表现分离的问题。
⼀般⽽⾔，所有的样式会根据下⾯的规则层叠于⼀个新的虚拟样式表中，其中数字 4 拥有最⾼的 优先权。
1. 浏览器缺省设置 （默认的）
2. 外部样式表 （使用link引入）
3. 内部样式表（style内部）
4. 内联样式（在 HTML 元素内部）
1、css语法
格式： 选择器{属性:值;属性:值;属性:值;....}
p{ color:red; text-align:center; }2、注释
格式： /* ... */
3、如何插⼊样式表
内联⽅式 (直接在html标签后面定义)
<p style="color:blue;font-family:⾪书">在HTML中如何使⽤css样式</p>
特点：仅作⽤于本标签
内部⽅式（在当前页面在head标签中使⽤ 标签来设置css样式）
<style type = "text/css" > ... .css 样式代码 </style>特点：作⽤于当前整个⻚⾯
外部导⼊⽅式（在head标签中使⽤标签导⼊⼀个css⽂件，在作⽤于本⻚⾯，实现css样式设置）
<link href = " ⽂件名 .css" type = "text/css" rel = "stylesheet" /> 特点：作⽤于当前整个 ⽹站1、html选择器
就是把html标签作为选择符使⽤
p{....} ⽹⻚中所有p标签采⽤此样式
h2{....} ⽹⻚中所有h2标签采⽤此样式
2、class类选择器
使⽤ . 将⾃定义名（类名）来定义的选择符
<html 标签 class=" 类名 ">...</html 标签> (class="类名1 类名2" 同时代表两个类名) .mc{color:blue;} /* 凡是 class 属性值为 mc 的都采⽤此样式 */ p.ps{color:green;} /* 只有 p 标签中 class 属性值为 ps 的才采⽤此样式 */ 注意：类选择符可以在⽹⻚中重复使⽤(多个class可以使用同一个类名)3、id选择器。
和class选择器类似
<html 标签 id="id 名 ">...</html 标签 > #id 名 { 样式 .....} 注意：id选择符只在⽹⻚中使⽤⼀次. 选择符的优先级从⼤到⼩ ：[ID 选择符 ] > [class 选择符 ] > [html 选择符 ] > [html 属性 ] 4、关联选择器指定关系下的选择器
table a{....} /*table标签⾥的a标签才采⽤此样式*/
h1 p{color:red} /*只有h1标签中的p标签才采⽤此样式*/
div>p{...} 选择所有作为div元素得到直接子标签p
div+p 选择紧贴在div元素之后的一个p元素
div~p 选择div元素后⾯的所有兄弟元素p
5、选择器组
几个选择器都能用
h3,h4,h5{color:green;} /*h3、h4和h5都采⽤此样式*/
6、伪类选(伪元素)择器
a:link {color: #FF0000; text-decoration: none} /* 未访问的链接 */
a:visited {color: #00FF00; text-decoration: none} /* 已访问的链接 */
a:hover {color: #FF00FF; text-decoration: underline} /* ⿏标在链接上 */
a:active {color: #0000FF; text-decoration: underline} /* 激活链接 */、
h1:hover{...} 设置元素在其⿏标悬停时的样式
h1:focus{...} 设置元素在其获取焦点时的样式
1、颜色
可以使用颜色名或者rgb(x,x,x)或者#rrggbb 来定义颜色
RGB 颜⾊ : 红 (R) 、绿 (G) 、蓝 (B)三个颜⾊通道的变化 rba(255,0,0) 或者改成16进制：#ffff0000 设置图片的透明度： img.opacity{ opacity:0.25;} 2、 字体font-size： 字体⼤⼩：20px，60%基于⽗对象的百分⽐取值
font-family ：字体：宋体，Arial
font-weight：字体加粗 ：bold
3、文本属性
text-align: ⽂本的位置：left center right
text-decoration： 字体画线：none⽆、underline下画线，line-through贯穿线
text-shadow: ⽂本的⽂字是否有阴影及模糊效果
letter-spacing: ⽂字或字⺟的间距
line-height：⾏⾼
4、背景
background-color: 背景颜⾊
background-image: 背景图⽚ -> url("图片地址")
background-repeat：重复(平铺):repeat 不重复：no-repeat
background-position：定位 （比如想把一个图片放在div的右下角，就可以写成：bottom right）
这里定位也有点像数学上的坐标系，只是它的y轴正方向是向下的，原点在div左上角
可以设置具体移动的像素：x px y px
background-attachment：是否固定背景， scroll: 默认值。背景图像是随对象内容滚动 fixed: 背景图像固定抠图：
还可以使用这种方式来达到，鼠标移到一个图标上显示另一个图标的效果，就是鼠标当移到小狗上面的时候，再把定位移到右边那个彩色的小狗上，就可以实现
5、边框属性
border:宽度 样式 颜⾊;。
border-color;
border-style; 边框样式：solid实现，dotted点状线，dashed虚线
border-width:
border-left-color;
border-left-style;
border-left-width:
border-radius：圆⻆处理 （50%就可以变成一个圆）
box-shadow: 设置或检索对象阴影
6、补白
内补白：
padding： 检索或设置对象四边的内部边距,如padding:10px;
padding-top ： 检索或设置对象顶边的内部边距 padding-right ： 检索或设置对象右边的内部边距 padding-bottom ：检索或设置对象下边的内部边距 padding-left ： 检索或设置对象左边的内部边距外补白：
margin： 检索或设置对象四边的外延边距,如 margin:10px;
margin:5px auto; 上下5px，左右居中
margin-top ： 检索或设置对象顶边的外延边距 margin-right ： 检索或设置对象右边的外延边距。 margin-bottom ： 检索或设置对象下边的外延边距 margin-left ： 检索或设置对象左边的外延边距外补白的时候，两个div之间的补白距离不会叠加，会选择最大的那个。但是如果设置了浮动，就会叠加。
注意：div的设置的宽度是内容宽度，不包括内外补白。如果设置了box-sizing:border-box，就可以包含补白了。
案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> /*公共样式的设置*/ h4,body,ul,li,a{padding:0px;margin:0px;} ul{list-style: none;} /*废除无序列表符号*/ a{color:#222;text-decoration:none;} a:hover{color:#f00;text-decoration:underline;} /*盒子模型的样式*/ .box{ width:260px; margin:50px; border: 1px solid #ddfab8; } .box .header{ width:100%; height:26px; background-image: url(./images/spph_bg.gif); } .box .header h4{ font-size:14px; height:26px; line-height:26px; color:green; padding-left:8px; } .box .content{ padding:5px; } .box .content ul li.tag{ height:23px; line-height:23px; padding-left:30px; background:url(./images/spph_ico.gif) no-repeat; } .box .content ul li.t1{background-position: 8px 6px;} .box .content ul li.t2{background-position: 8px -19px;} .box .content ul li.t3{background-position: 8px -43px;} .box .content ul li.t4{background-position: 8px -67px;} .box .content ul li.t5{background-position: 8px -90px;} .box .content ul li.t6{background-position: 8px -113px;} .box .content ul li.t7{background-position: 8px -137px;} .box .content ul li.t8{background-position: 8px -162px;} .box .content ul li.t9{background-position: 8px -185px;} .box .content ul li.t10{background-position: 8px -209px;} .box .content ul li a{font-size:13px;} </style> </head> <body> <div class="box"> <div class="header"> <h4>商品排行</h4> </div> <div class="content"> <ul> <li class="tag t1"><a href="#">6月周年庆促销活动正式开始啦！</a></li> <li class="tag t2"><a href="#">享不尽的百货盛宴！快来体验吧！</a></li> <li class="tag t3"><a href="#">红六月手机家电会员回馈专场</a></li> <li class="tag t4"><a href="#">收纳用品春季热销 方便实用</a></li> <li class="tag t5"><a href="#">时尚挂表低折扣 精细准确</a></li> <li class="tag t6"><a href="#">24小限时达，超时即免单</a></li> <li class="tag t7"><a href="#">注意啦，24小时限时达活动细</a></li> <li class="tag t8"><a href="#">2010年度家电风云榜评选结果揭晓</a></li> <li class="tag t9"><a href="#">享不尽的百货盛宴！快来体验吧！</a></li> <li class="tag t10"><a href="#">上海市企业客户参加以旧换新调整</a></li> </ul> </div> </div> </body> </html>案例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{margin:0px;padding: 0px;} ul{list-style: none;} #nav{ height:50px; background:url(./images/repeat.png); } #nav ul li{ width:140px; float:left; } #nav ul li a{ display:block; width:140px; height:50px; line-height: 50px; text-decoration:none; font-size:18px; font-weight: bold; color:white; text-align:center; } #nav ul li a:hover{ background-color: white; color: blue; } </style> </head> <body> <h1>CSS案例：导航栏的实现</h1> <div id="nav"> <ul> <li><a href="#">首页</a></li> <li><a href="#">商品展示</a></li> <li><a href="#">新闻列表</a></li> <li><a href="#">联系我们</a></li> <li><a href="#">在线帮助</a></li> </ul> </div> </body> </html>