为文档添加样式有三种方式 ：
- 行内样式
<div style="width: 120px; height: 120px; background-color: red;"></div>
行内样式就是把样式写在 HTML 标签内，这种方式很少见人使用，因为这种方式下的 CSS 代码不仅不能复用，而且把 HTML 结构搞得乱七八糟。
-
嵌入样式
<style> div{ width: 120px; height: 120px; background-color: red; } </style>
嵌入样式就是在 head 标签加上 style 标签，并在里面书写样式。这种方式的缺点是仅可以在当前文件复用样式，不可以在其它文件中使用。
3.链接样式
<link rel="stylesheet" type="text/css" href="style.css">
现在普遍使用链接样式为文档添加样式，因为这样就可以实现职责分离，HTML 负责结构，CSS 负责表现。
浏览器层叠各个样式来源的顺序为 链接 -> 嵌入 -> 行内， 这意味着什么呢？比如说我们在链接样式中将 p 标签的字体大小改为 24px， 而后又在使用行内的方式将 p 标签的字体大小改为 14px， 那么用户看到的将是 14px，因为在行内定义的样式后于链接样式被浏览器读取，所以链接引入的样式会被覆盖。有人要说了，我要让链接引入的样式是用户最终看到的样式，也就是让链接引入的样式权重超过行内引入的，可以借助 !important 实现这一功能。
color: #009966 !important;
除了以上三种，我们还可以在样式表中链接其它样式表，利用 @import 指令，如以下代码：
@import url(foo.css);
不过值得注意的是， @import 指令必须出现在样式表中其他样式之前，否则利用 @import 引入的样式将不起作用。
接下来，将通过下面这段代码对一些选择器进行讲解。
<article>
<p>Simple text</p>
<p>Simple text</p>
<div>
<p>Div text</p>
</div>
<p>Simple text</p>
<p>Simple text</p>
</article>
-
子选择符
article > p {
color: #009966;
}
demo01.png
可见，只有article的直接子类加上了颜色，而article孙子级别的p标签并没有被渲染颜色。 -
紧邻同胞选择符
div + p {
color: #009966;
}
可见，只有与div紧相邻 （而且在 div 的后面） 的p标签才会被应用上样式。这种选择符有一个妙用，如下所示
nav ul li + li{
border-left: 2px solid #00CC66;
}
demo04.png
可以利用这种方式巧妙的为规避掉第一个li标签，也就是为第一个li标签之后的所有li加上一个左边框。 -
一般同胞选择符
div ~ p {
color: #009966;
}
demo03.png
可见，只要是在div后面的同胞p元素都会被选中并渲染样式。
还有一种选择器叫做伪类选择器，这种选择器又可细化为 UI伪类 和 结构化伪类，UI伪类比如 :hover, :focus, :active 等。结构化伪类比如 :first-child, :last-child 等。在选择符中，单冒号用于表示伪类，双冒号表示伪元素。 什么是伪元素呢？伪元素就是在文档中若有实无的元素，比如 ::first-letter, ::first-line, ::before, ::after 等。
对于 CSS2 之前就已经有的伪元素，比如 :before, 单冒号和双冒号的写法实现的功能是一样的。 双冒号是 CSS3 引入的，用于区分伪类和伪元素。 如果你的网页只需要兼容 webkit, firefox, opera 等浏览器，建议采用伪元素使用双冒号的写法。 如果你不得不兼容 IE浏览器，还是用 CSS2 的单冒号写法比较安全。
下面来看看这段代码
<p>Simple text</p>
<p class="special">Simple text</p>
<p class="special" id="error">Simple text</p>
<p>Simple text</p>
为其书写样式
p {
color: black;
}
p.special{
color: green;
}
p#error{
color: red;
}
结果是带有类的覆盖了原有的样式，带有 id 的覆盖了带有类的样式，这种结果的产生涉及到 "特指度" 的计算，其实也就是优先级的意思。 特指度可以利用 ICE 公式来计算，值越大则特指度越高。
I-C-E
p 0-0-1 特指度 = 1
p.special 0-1-1 特指度 = 11
p#error 1-0-1 特指度 = 101
下面讲一个关于垂直外边距的误区，比方说下面这段代码。
<div></div>
<div></div>
div{
width: 100px;
height: 100px;
border: 1px solid #386;
margin-top: 50px;
margin-bottom: 20px;
}
很多人可能认为这两个 div 之间的距离应该是 (50+20)px， 但其实是 50px，也就是说垂直外边距会发生重叠， 从而表现出较大的那一个。不过对于水平外边距则不存在这个问题。
