1.为文档添加样式的三种方法

行内样式
嵌入样式（嵌入的 CSS 样式是放在 HTML 文档的 head 元素中）
链接样式
在创建包含多个页面的网站时，需要把样式集中在一个单独的文件里，这个文件就叫 样式表。样式表其实就是一个扩展名为 .css 的文本文件。可以在任意多个 HTMl 页面中链接同一个样式表文件，每个页面中只需加入类似下面的一行代码即可：
<link href="styles.css" rel="stylesheet" type="text/css" />

除了以上三种为页面添加样式的方法，还有一种在样式表中链接其它样式表的方法，那就是应用 @import 指令。就像这样：@import url(css/styles2.css).
要注意的是， @import 指令必须出现在样式表中其他样式之前，否则 @import 引用的样式表不会被加载。

2.CSS规则命名惯例

CSS 规则由 选择符 和声明两部分组成，其中选择符用于指出规则所要选择的元素，声明则又由两部分组成：属性和值。属性指出要影响元素哪方面的样式，值就是属性的一个新状态。

对于这个基本的结构，有三种方法可以进行扩展：

多个声明包含在一条规则里
多个选择符组合在一起
多条规则应用给一条选择符

所有用于选择特定元素的选择符又分三种：

上下文选择符（基于祖先或同胞元素选择一个元素）
ID和类选择符（基于 id 和 class 属性的值选择的元素）
属性选择符（基于属性的有无和特征选择元素）

3.上下文选择符

格式：
示例：article p {font-weight:bold;}

上下文选择符，严格来讲（也就是 CSS 规范里），叫后代组合式选择符（ descendant combinator selector

提示：请记住，上下文选择符以空格作为分隔符，而分组选择符则以逗号作为分隔符。

4.特殊的上下文选择符

4.1 子选择符 >

格式：
示例：div > h2 {font-style:italic;}
说明

4.2 紧邻同胞选择符 +

格式：
示例：h2 + p {font-variant:small-caps;}
说明

4.3 一般同胞选择符 ~

格式：
示例：h2 ~ a {color:red;}
说明

4.4 通用选择符 *

格式：* {...}
示例：* {color:green;}
说明：上面示例会导致所有元素（的文本和边框）都变成绿色。
不过，一般在使用 * 选择符时，都会同时使用另一个选择符。
例如：p * {color:red;} // 这样只会把p包含的所有元素的文本变成红色。
还有一个非常有意思的用法，即用它构成非子选择符：
例如：div * a {font-size:1.3em;}

的父元素是什么，没有关系。

5.ID 和类选择符

ID 和类为我们选择元素提供了另一套手段，利用它们可以不用考虑文档的层次结构。

注意：可以给 id 和 class 属性设定任何值，但不能以数字或特殊符号开头。

5.1 类属性

5.1.1 类选择符

格式：.类名
示例：.specialtext {font-style:italic;}

格式：
示例：p.specialtext {color:red;}

5.1.3 多类选择符

格式：.类名.类名
示例：.specialtext.featured {font-size:120%;}
说明：CSS选择符的两个类名之间没有空格，因为我们只想选择同时具有这两个类名的的那个元素。如果加了空格，那就变成了“祖先/后代”关系的上下文选择符了。

提示：不要像使用 ID 一样，每个类都指定一个不同的类名，然后再为每个类编写规则。如果你确实有这种随意使用类的习惯，那说明你可能想大多数对 CSS 充满激情的初学者一样，还不了解继承和上下文选择符的作用。

5.2 ID属性

格式：#ID名 或
示例：#specialtext {CSS 样式声明 } 或 p#specialtext {CSS 样式声明 }

提示：ID还可以用于页内导航。 例如：<a href="#bio">Biography</a>，注意 href 属性值开头的 # ，它表示这个链接的目标在当前页面中，因而不会触发浏览器加载页面（如果没有 #，浏览器就会尝试加载 bio 目录下的默认页面了）。如果链接的 href 属性里只有一个 #，那么点击该链接会返回页面顶部。例如：<a href="#">Back to Top</a># 的目标元素。

注意：如果暂时不知道某个 href 应该放什么 URL，也可以用 # 作为占位符，但不能把该属性留空。 因为 href 属性值为空的链接的行为跟正常链接不一样。这样，团队中的其他人将来可以用中间层（比如 PHP）变量替换 #，以便动态接收来自数据库的 URL。

6.属性选择符

6.1 属性名选择符

格式：
示例：img[title] {border:2px solid blue;}

提示：一般来说，人们经常给 alt 和 title 属性设定相同的值。 alt 属性中的文本会在图片因故未能加载时显示，或者由屏幕阅读器朗读出来。而 title 属性会在用户鼠标移动到图片上时，显示一个包含相应文本的提示。

6.2 属性值选择符

格式：[属性名="属性值"]
示例：img[title="red flower"] {border:4px solid green;}
说明：在 HTML5 中，属性值的引号可加可不加，在此为了清楚起见，建议添加。

7.伪类

伪类（Pseudo classes）是选择符的螺栓，用来指定一个或者与其相关的选择符的状态。它们的形式是 selector:pseudo class { property: value; }，简单地用一个半角英文冒号（:）来隔开选择符和伪类。

伪类可以分为两种：

UI（ User Interface，用户界面）伪类会在 HTML 元素处于某个状态时（比如鼠标
指针位于链接上），为该元素应用 CSS 样式。
结构化伪类会在标记中存在某种结构上的关系时（如某个元素是一组元素中的第
一个或最后一个），为相应元素应用 CSS 样式。

7.1 UI伪类

7.1.1 链接伪类

针对链接的伪类一共有4个，因为链接始终会处于如下4种状态之一。

Link
Visited
Hover
Active

提示：由于这4个伪类的特指度相同，如果不按照这里列出的顺序使用它们，浏览器可能不会显示预期效果。方便记忆：LoVe? HA! 大写字母就是每个伪类的头一个字母。

提示：一个冒号（ : ）表示伪类，两个冒号（ :: ）表示 CSS3 新增的伪元素。

7.1.2 :focus伪类

表单中的文本字段在用户单击它时会获得焦点，然后用户才能在其中输入字符。
例如：input:focus {border:1px solid blue;}
上面一行代码会在光标位于 input 字段中时，为该字段添加一个蓝色边框。这样可以让用户明确地知道输入的字符会出现在哪里。

7.1.3 :target伪类

如果用户点击一个指向页面中其他元素的链接，则那个元素就是目标（ target），可以
用:target 伪类选中它。
例如：对于这个链接：<a href="#more_info">More Information</a>
位于页面的其它地方、ID 为 more_info 的那个元素就是目标。
假设该元素为这样：<h2 id="more_info">This is the information you are looking for.</h2>
那么，CSS规则：#more_info:target {background:#eee}
会在用户单击链接转向 ID 为 more_info 的元素时，为该元素添加灰色背景。

维基百科在其引证中大量使用了:target 伪类。维基百科的引证链接就是正文里那些
不起眼的数字链接。引证本身则位于长长的页面的最下方。如果没有:target 应用的
突出显示，很难知道你点击的链接对应着一大堆引证中的哪一个。

7.2 结构化伪类

结构化伪类可以根据标记的结构应用样式，比如根据某元素的父元素或前面的同胞元素是什么。

7.2.1 :first-child和:last-child

格式：
e:first-child
e:last-child
示例：ol.results li:first-child {color:blue;}

7.2.2 :nth-child

格式：e:nth-child(n)
示例：li:nth-child(3)
说明：e 表示元素名，n 表示一个数值（也可以使用 odd 或 even）

8.伪元素

顾名思义，伪元素就是你的文档中若有实无的元素。

8.1 ::first-letter伪元素

格式：e::first-letter
示例：p::first-letter {font-size:300%;}

提示

8.2 ::first-line伪元素

格式：e::first-line
示例：p::first-line {font-variant:small-caps;}
说明：选中文本段落（一般情况下是段落）的第一行。

8.3 ::before和::after伪元素

格式：
e::before
e::after
示例：
对标记：
<p class="age">25</p>
添加如下样式：
p.age::before {content:"Age: ";}
p.age::after {content:" years.";}
会得到如下结果：
Age: 25 years.

提示
因为所有结果都是数字，使用这两个伪元素可以在把数字呈现给用户时，加上说明
性文字。

参考资料

CSS设计指南