由于CSS属性或规则尚未成为W3C标准的一部分，是浏览器的私有属性，因此不同的浏览器可能需要不同的前缀
| 前缀 | 浏览器 |
| -webkit | chrome和safari |
| -moz | firefox |
| -ms | IE |
| -o | opera |
1.如何引入CSS
将CSS应用到网页中有：3种方式 （行内样式表、内部样式表、外部样式表）
a.行内样式表（位于html元素内部）
行内样式是指将CSS样式编码直接写在HTML标签中的style属性里
b.内部样式表（位于<head>标签内部）
内部样式作为页面中的一个单独部分，由<style>标签定位在<head>标签之中
b.内部样式表（位于<head>标签内部）
内部样式作为页面中的一个单独部分，由<style>标签定位在<head>标签之中
2.样式优先级
a.写法优先权（就近原则）
行内样式表 > 内部样式表 > 外部样式表
b.选择符优先权
选择符的比较（从低到高）:
通配符"*"
类型选择符"标签名为选择符名称的"
子选择符">"
包含选择符
class选择符
属性选择符
id选择符
行内样式
!important[慎用]
3.样式继承
HTML中的标签会继承部分父标签的样式。
4.*!important的用法
p{font-size:15px; font-size:20px;}
这种情况下，执行"font-size:20px;"
但是可以通过!important语法,提升某一句样式表的重要性,使及优先执先 !important标注的语句
p{font-size:15px!important; font-size:20px;}
这时，执行"font-size:15px"
5.CSS代码注释（快捷键：Ctrl+/）
例如：
/* 头部样式开始 */ #header{ background:#ccc; } /* 头部样式结束 */
6.CSS的选择符
1. ) 通配选择符
2. ) 元素选择符
3. ) 群组选择符
4. ) 关系选择符
5. ) id及class选择符
6. ) 伪类选择符
7. ) 属性选择符
8. ) 伪对象选择符
①通配选择符（*）
②元素选择符
p{ color:gray; } span{ color:brown; }
<p>这是灰色字体的p标签</p> <span>这是棕色字体的span标签</span>
③群组选择符
对一组标签进行相同的样式定义；使用逗号对选择符进行分隔，对页面中需要使用相同样式的地方，只需写一次样式
p,span{ color:brown; }
7.关系选择符
a.包含选择符（E F）:选择所有被E元素包含的F元素。
/* CSS代码 */ ul li a{ color:red; }
<!-- HTML代码 --> <body> <ul> <li> <a href="">菜单项</a> <ul> <li><a href="">列表项1</a></li> <li><a href="">列表项2</a></li> <li><a href="">列表项3</a></li> </ul> </li> </ul> </body>
此例，使用ul li a，那么所有a标签都会变红色。
效果：
b.子选择符（E > F）:选择所有作为E元素的直接子元素F
/* CSS代码 */ .nav > li > a{ color:red; }
<!-- HTML代码 --> <body> <ul class="nav"> <li> <a href="">菜单项</a> <ul> <li><a href="">列表项1</a></li> <li><a href="">列表项2</a></li> <li><a href="">列表项3</a></li> </ul> </li> </ul> </body>
此例，使用.nav>li>a，那么只有.nav的li下面的a标签才会变红色。
效果：
c.相邻选择符（E + F）
p+p{ color:red; }
<h3>这是一个标题</h3> <p>这是第1个p标签</p> <p>这是第2个p标签</p> <h3>这是一个标题</h3> <p>这是第3个p标签</p> <p>这是第4个p标签</p>
此例，使用p+p{color:red;}，选择紧贴在p标签后的p标签，那么第2个p标签和第4个p标签将会变成红色。
效果：
d.兄弟选择符（E ~ F）：选择E元素的所有兄弟元素F，包括自己
p~p{color:red;}
<h3>这是一个标题</h3> <p>这是第1个p标签</p> <p>这是第2个p标签</p> <h3>这是一个标题</h3> <p>这是第3个p标签</p> <p>这是第4个p标签</p>
效果：
8.id及class选择符
a.id选择符（E#id）
id选择符可以为标有特定id的HTML元素指定特定的样式。
id选择器以“#”来定义。
*在网页中，一个id名称只能使用一次，不得重复
b.class选择符（E.class）
不同于id选择符的唯一性，class选择符可以同时定义多个
/* CSS代码 */ .a{ color:gray; } .b{ font-weight:bold; }
<!-- HTML代码 --> <body> <p class="a b">正文内容</p> </body>
9.伪类选择符
/* CSS代码 */ /*乘法因子 奇数*/ .ul2 li:nth-child(odd){ color:red; } .ul2 li:nth-child(2n+1){ border-left:3px solid red; } /*乘法因子 偶数*/ .ul2 li:nth-child(even){ color:blue; } .ul2 li:nth-child(2n){ border-left:3px solid blue; } /*乘法因子 3的倍数*/ .ul2 li:nth-child(3n){ font-weight:bold; }
<ul class="ul2"> <li>这是列表的第1行</li> <li>这是列表的第2行</li> <li>这是列表的第3行</li> <li>这是列表的第4行</li> <li>这是列表的第5行</li> <li>这是列表的第6行</li> </ul>
效果
例子：
.firstLetter{ color:black; } .firstLetter::first-letter{ font-size:30px; font-weight:bold; color:black; }
<p class="firstLetter">早起的鸟儿有虫吃</p>
效果：
例子：
p:before{ content:"广州是个好地方，"; color:red; }
<p>高楼大厦，四通八达</p>
效果：
例子：
input::-webkit-input-placeholder{ color:green; } input:-ms-input-placeholder{ color:green; } input:-moz-placeholder{ color:green; } input::-moz-placeholder{ color:green; }
<input type="text" placeholder="请输入..." />
效果：
例子：
E::selection
设置对象被选择时的颜色。
*需要注意的是，::selection只能定义被选择时的background-color，color及text-shadow (IE11尚不支持定义该属性)
p::-moz-selection{ background-color:#000; color:#f00; } p::selection{ background:#000; color:#f00; }
<h3>选中下面的文字，看看它的颜色</h3> <p>你选中这段文字后，看看它们的文本颜色和背景色，就能明白::selection的作用。</p>