4. CSS 2

HTML 元素原本被设计为用于定义文档结构。通过使用 h1、p、table 这样的元素，HTML 的初衷是表达“这是标题”、“这是段落”、“这是表格”之类的信息。但是随着 HTML 的发展，为了满足设计师的要求，HTML 增加了很多用于增强内容表现的功能，这使得文档结构变得复杂且不易维护。

比如，使得一个文档的所有二级标题显示为红色的做法大概是：

<h2><font color="red">第 1 个二级标题</font></h2>
<h2><font color="red">第 2 个二级标题</font></h2>
<h2><font color="red">第 3 个二级标题</font></h2>

在这个例子中，我们想表达的实际上仅仅是一些二级标题，但为了得到红色的文字，不得已额外嵌套了 font 元素。如果有一天，我们希望这些二级标题不仅要显示为红色，还要显示为斜体，我们的做法可能是再在 h2 元素中嵌套一个 em 或 i 元素。

为了解决这些问题，1997 年初，W3C 成立了专门的工作组，在 哈肯·维姆·莱（Håkon Wium Lie）^{[[1]](http://people.opera.com/howcome/)[[2]](http://zh.wikipedia.org/wiki/%E5%93%88%E8%82%AF%C2%B7%E7%BB%B4%E5%A7%86%C2%B7%E8%8E%B1)} 和 [伯特·波斯（Gijsbert Bos）](http://en.wikipedia.org/wiki/Bert_Bos)^{[[3]](http://www.w3.org/People/Bos/)[[4]](http://zh.wikipedia.org/wiki/%E4%BC%AF%E7%89%B9%C2%B7%E6%B3%A2%E6%96%AF)} 等人的一些前期工作的基础上，于 1998 年 5 月发布了 CSS 2 的推荐标准，成为Web标准的表现层。

CSS 是 Cascading Style Sheets（层叠样式表 或 级联样式表^{[[5]](http://baike.baidu.com/view/3033527.htm?fromtitle=%E5%B1%82%E5%8F%A0%E6%A0%B7%E5%BC%8F%E8%A1%A8)}）的缩写，用于描述使用 HTML 等标记语言创建的文档的外观和格式，它的主要目的是将文档表现（如布局、颜色、字型等）和文档结构分离，以得到一个更加灵活、简化、更具可访问性、并且易于定制的文档。

回到前面的示例，我们的文档将变得非常简洁：

<h2>第 1 个二级标题</h2>
<h2>第 2 个二级标题</h2>
<h2>第 3 个二级标题</h2>

这个简洁的 HTML 片段其实更具目的性，因为它正是我们需要的结构——二级标题，至于表现部分，交给下面的 CSS 代码：

h2 { color: red; font-style: italic; }

文档中的所有二级标题中的文字都被格式化为红色斜体这种表现形式。如果需要更改二级标题的样式，需要修改的也仅仅是上述的 CSS 代码。甚至，我们可以把这段 CSS 代码单独保存在一个扩展名为 .css 的文件中，这样，其它 HTML 文档也可以通过引用这个文件使得其中的二级标题也同样显示为红色斜体的样式。

这个示例也许说明了一些问题，这个示例还远远不是 CSS 的全部，我们将在本章通过 CSS 2 主要内容的学习，在结构之外，专注文档的表现。