层叠样式表（Cascading Style Sheets，CSS）的功能非常强大，可以影响一个或一组文档的表现。显然，如果不存在某种文档，CSS基本上毫无用处，因为这样一来它将没有要表现的内容。当然，“文档”的定义相当宽泛。例如，Mozilla和相关的浏览器就使用CSS来影响浏览器Chrome本身的表现。不过，如果没有Chrome的内容——按钮、地址栏输入、对话框、窗口等等——也就没有使用CSS（或其他任何表现信息）的必要。

Web的衰落

也许你还能大致记得，在网站制作早期（1990-1993）, HTML是一个很有限的语言。它几乎完全由用于描述段落、超链接、列表和标题的结构化元素组成。我们可能认为表、框架或复杂标记等等内容是创建Web页面必不可少的，可是那时在HTML中连与之稍有些相似的东西都没有。HTML原本是要作为一种结构化标记语言，用于描述文档的各个部分，而对于这些部分应当如何显示则很少谈及。这种语言并不关心外观，它只是一种简洁的小型标记机制。

接下来Mosaic出现了。

仿佛突然之间，在网上浏览时间超过10分钟的人几乎都认识到了万维网的强大。从一个文档跳到另一个文档很容易，无非是把光标指向有特殊颜色的部分文本，甚至指向一个图像，再点击鼠标。更妙的是，文本和图像可以同时显示，只需要一个纯文本编辑器就能创建页面。这是免费而且开放的，确实很酷。

网站开始到处涌现。期刊网站、大学网站、公司网站等等应运而生。随着网站数目的增加，人们越来越需要新的HTML元素，希望这些元素各自完成一个特定的功能。创作人员开始要求能够将文本变为粗体或斜体。

而此时HTML却不足以处理这样一些需求。利用HTML可以声明强调部分文本，但不一定是将其置为斜体，这取决于用户的浏览器和首选项，可能只是改为粗体，或者仍然是正常文本，只不过有不同的颜色而巳。这就无法保证读者看到的正是创作人员所创建的文档。

迫于这些压力，开始出现诸如<FONT>和<BIG>之类的标记元素。突然之间，原来描述结构的语言开始描述外在表现了。

一片混乱

几年之后，这种随便的做法所存在的问题开始暴露出来。例如，HTML 3.2和HTML 4.0的很大一部分都是关于表现问题。此时能够通过font元素对文本设置颜色和大小，对文档和表格应用背景色和图像，使用table属性（如cellspacing），并且还能让文本闪烁，这些都是原先要求“有更多控制”的后果。

下面举例说明这种混乱的具体情况，简单地看一下几乎所有的公司网站制作都用到的标记。这些网站中往往标记相当多，而真正有用的信息并不多，二者的差距大得惊人。更槽糕的是，在大多数网站中，标记几乎完全由表和font元素组成，它们对于所要表现的内容不能传达任何实际含义。从结构化的角度看，这些网页比随机的字母串强不了多少。

例如，来看页面标题，如果创作人员使用了font元素而不是h1之类的标题元素：

<font size="+3" face="Helvetica" color="red">Page Title</font>

从结构上来讲，font标记没有任何含义。这会使文档的可用性降低。例如，对于一个语音合成浏览器，font标记有什么意义呢？不过，如果网页设计师使用标题元素而不是font元素，语音浏览器就可以使用某种语音样式来读相关文本。倘若使用font标记，这种语音浏览器就无法知道这个文本与其他文本有什么区别。

为什么网页设计师这么不看重结构和含义呢？因为他们希望读者看到的页面正如他们设计的那样。使用结构化HTML标记意味着要放弃对页面外观的很多控制，而结构化HTML 标记显然不支持多年来已经深入人心的那些流行的页面设计。不过还需要考虑上述方法存在的如下一些问题：

非结构化页面使得建立内容索引极为困难。真正强大的搜索引擎允许用户只搜索页面标题，或者捜索页面内的小节标题，或者只搜索段落文本，也可能只搜索那些标记为重要的段落。不过，要完成这样一个任务，页面内容必须包含在某种结构化标记中，而这正是大多数页面所缺少的。例如，Google在索引页面时就会注意标记结构，所以如果你的页面是一个结构化页面，被百度等搜索引擎捜中的机会就会增加。

必须承认，完全结构化的文档有些太古板、太平常了。“一白遮百丑”，就因为这么一个原因，尽管有几百个理由要求使用结构化标记，但仍然不能阻挡HTML的使用，直到20世纪末它还如此流行，甚至到今天它还依然盛行。我们需要一种合适的方法，将结构化标记与丰富多彩的页面表现结合起来。

CSS作救星

当然，HTML中充斥着的表现标记的问题并没有被W3C（World Wide Web Consortiam，万维网联盟）忽视，他们开始寻找一种速效的解决方法。1995年，W3C开始发布一种正在进行的计划（work-in-progress），称为CSS。到了1996年，这已经成为一个成熟的推荐草案（Recommendation），其地位与HTML同样举足轻重。下面来说明这是为什么。

丰富的样式

首先，与HTML相比，CSS支持更丰富的文档外观，其表现程度也远非HTML力所能及。CSS可以为任何元素的文本和背景设置颜色，允许在任何元素外围创建边框，同时能增大或减少元素外的空间，允许改变文本的大小写、装饰方式（如下划线）、间隔，甚至可以确定是否显示文本，还允许完成许多其他的效果。以页面上的第一个标题（即主标题）为例，这通常就是页面本身的标题。以下是一个正确的标记：

<h1>Leaping Above The Water</h1>

现在，假设你希望这个标题是暗红色，使用某种字体，采用斜体，而且有下划线，还有一个黄色的背景。如果用HTML来达到上述目的，就必须把h1放在表中，而且还要有数十个其他的元素，如font和U。如果使用CSS，所需的则只是简单的一条规则：

h1 {color: maroon; font: italic 2em Times, serif; text-decoration: underline; background: yellow;}

如此而已。可以看到，用HTML能够做到的，用CSS也能做到。不过，还不仅限于此：

h1 {color: maroon; font: italic 2em Times, serif; text-decoration: underline; background: yellow url(titlebg.png) repeat-x; border: 1px solid red; margin-bottom: 0; padding: 5px;}

现在h1的背景上有一个只能水平重复的图像，而且它有一个边框，与文本之间至少间隔5个像素。还去除了元素底端的外边距（空白）。这些工作是HTML做不到的，甚至连类似的事情都办不到，而这还只是CSS的冰山一角。

易于使用

如果以上所述还不能说服你，下面的理由可能会让你改变想法：样式表能大大减少网站制作人员的工作量。

缺乏结构性会降低可访问性。假设你是一个盲人，要依赖一个语音合成浏览器上网捜索。下面的两种页面你会选择哪一个呢？是一个结构化页面，使得你的浏览器可以只读出小节标题，让你选择想听哪一小节，还是一个无结构性的页面，浏览器必须读出所有内容，因为没有提示来指出哪些是标题、哪些是段落、哪些是重要的内容。再来看百度，实际上这个搜索引擎就是世界上最活跃的盲人用户，有数百万的朋友在接受它的建议，了解在哪里网上冲浪和购物。

高级页面表现只能应用于某种文档结构。假设有这样一个页面，其中只显示了小节标题，各标题旁分别有一个箭头。用户可以决定哪些小节标题对他来说需要深入了解，点击相应的箭头就能显示出这一节的文本。

结构化标记更易于维护。你可能曾经花很长时间在别人（甚至你自己）的HTML中查找一个小错误，由于这个错误，让你的页面在某个浏览器中显示得一片混乱，这种情况是不是屡屡出现？你是不是曾经花很长时间来编写嵌套表和font元素，而这只是为了得到一个包含白色超链接的边栏？为了正确地分隔一个标题和它后面的文本，你插入过多少换行元素？通过使用结构化标记，就能清理你的代码，更容易地找到所要寻找的东西。

首先，样式表将实现某些视觉效果的命令集中在一个方便的位置，而不是在文档中分散得到处都是。举例来说，假设你希望一个文档中的所有h2标题都是紫色。若使用HTML，则要在每个标题中也加一个font标记，如下所示：

<h2><font color="purple">This is purple!</font></h2>

所有二级标题都要增加这个标记。如果文档中有40个这样的标題，就必须总共插入40个font元素，每个标题插入一个font！为了达到这样小的一个效果，就要做这么多的工作。

假设你早有打算，已经插入了所有这些font元素。大功告成，你很满意——不过，可能接下来你认为这些h2标题实际上应该是暗绿色而不是紫色（或者你的老板决定让你这么做）。这样一来，就必须再回过头来逐个地调整这些font元素。当然，只要你的文档中只是标题有紫色文本，就可以利用“查找-替换”来完成调整。但是如果文档中还有其他元素也有紫色font，就不能使用“查找-替换”，因为这将影响那些元素（将把那些元素也改成暗绿色）。

更好的办法是使用一条规则：

h2 {color: purple;}

这样做不仅输入起来更快，修改起来也更容易。如果确实要从紫色改为暗绿色。所要做的只是修改这一条规则。

再来看上一节谈到的有丰富样式的h1元素：

h1 {color: maroon; font: italic 2em Times, serif; text-decoration: underline; background: yellow;}

这看上去比写HTML还要糟糕，不过请考虑这样的情况：一个页面上有12个看上去和h1一样的h2元素。这12个h2元素需要多少标记呢？如果使用HTML，就需要非常多的标记。另一方面，如果用CSS，所要做的只是：

h1, h2 {color: maroon; font: italic 2em Times, serif; text-decoration: underline; background: yellow;}

现在这些样式会同时应用到h1和h2元素，这里只多敲了3次键而已。

如果你想改变h1和h2元素的外观，CSS的优势则更为突出。考虑一下，与对前面的样式作如下修改相比，需要花多少时间才能修改h1和12个h2元素的HTML标记：

h1, h2 {color: navy; font: bold 2em Helvetica, sans-serif;

text-decoration: underline overline; background: silver;}

如果用秒表来记录上述两种方法所花的时间，我打赌使用CSS的网页设计师肯定会让使用HTML的人输得哑口无言。

此外，大多数CSS规则都集中在文档中的某一个位置。也可以将其分组为相关的样式或单个元素分散到文档中，但是把所有样式都放在一个样式表中的做法往往高效得多。这样，在一个位置上就能创建（或修改）整个网页文档的外观。

在多个页面上使用样式

不过请等等，还不只如此！不仅能把一个页面的所有样式信息集中到一个位置，还可以创建一个样式表，然后把这个样式表应用到多个页面。这是通过以下过程实现的：将样式表单独保存为一个文档，然后由要使用该文档的页面导入。通过使用这个功能，可以很快地为整个网站创建一致的外观。为此只需将这个样式表链接到网站上的所有文档。在此之后，如果你想改变网站页面的外观，只编辑一个文件就够了，所做的修改便会自动地传播到整个服务器！考虑这样一个网站，它的所有标题都是灰色，背景为白色。这种颜色设置是由一个样式表得到的，其中指出：

h1, h2, h3, h4, h5, h6 {color: gray; background: white;}

现在假设这个网站有700个页面，每个页面都使用了这个要求标题为灰色的样式表。在某个时刻，网站管理员决定标题应当是白色，而背景才是灰色。所以将样式表编辑如下：

h1, h2, h3, h4, h5, h6 {color: white; background: gray;}

然后将样式表保存到磁盘，修改就完成了。如果使用HTML，则要编辑700个页面，每个标题都要包含在一个表中，还要有一个font标记，这与使用CSS的方法绝对无法相比，不是吗？

层叠

还有呢！CSS还规定了冲突规则，这些规则统称为层叠（cascade）。例如，还是考虑前面的情况，将一个样式表导入到多个Web页面。现在增加一组页面，其中有些样式是相同的，不过还包含一些专用于这些页面的特定规则。可以另外创建一个样式表，将这个样式表与先前的样式表一起导入到这些页面中，或者可以在需要特殊样式的页面中直接放入那些样式。

例如，在700个原有页面之外的某个页面上，可能希望标题是黄色，背景是深蓝色，而不是灰色背景上的白色标题。在该文档中，可以插入以下规则：

h1, h2, h3, h4, h5, h6 {color: yellow; background: blue;}

由于层叠，这个规则会覆盖先前导入的灰底白字标題规则。如果理解了层叠规则，并充分利用了这些规则，就能创建相当复杂的样式表，这样不仅很容易地修改，还会使你的页面看上去很专业。

层叠并不仅限于网页设计师使用。在网上冲浪的人（或读者）还可以利用某些浏览器创建自己的样式表（这称为读者样式表，原因显而易见），这些样式表可以与创作人员创建的样式表以及浏览器使用的样式层叠。因此，如果读者是一个色盲，就可以创建这样一个样式，使超链接突出显示：

a:link, a:visited {color: white; background: black;}

读者样式表可以包含几乎所有内容：可以是一个指令，如果用户视力不好，这个指令可以让文字足够大以便用户阅读，也可以是一些规则，能够删除图像以便更快地阅读和浏览，甚至可以是一些样式，将用户最喜欢的图片放在每个文档的背景上（当然，不推荐这种做法，不过这种做法确实是可能的）。这样就能让读者自己定制网上体验，而且不必去掉网页设计师的所有样式。

由于提供了导入、层叠和丰富的效果，CSS对所有创作人员或读者来说都是一个绝佳的工具。

缩减文件大小

除了视觉上的功能以及对创作人员和读者都很有用之外，CSS还有一些很让读者喜欢的特性。它有助于尽可能地缩减文档大小，以便加快下载。这是怎么做到的呢？前面已经提到，很多页面都使用了表和font元素来得到漂亮的视觉效果。遗憾的是，这些方法都会创建额外的HTML标记，以至于增加文件大小。通过将视觉样式信息分组放到集中的区域中，并使用一种相当简洁的语法表示这些规则，就可以去除font元素和其他一些常用的标记。因此，CSS一方面可以大大减少下载时间，另一方面又能大大提升读者的满意度。

为将来做准备

前面提到过，HTML是一种结构化语言，而CSS是它的补充：这是一种样式语言。认识到这一点，W3C（也就是讨论并批准Web标准的组织）开始从HTML去除样式元素。之所以这么做，是因为可以用样式表提供某些HTML元素目前提供的效果，既然如此，还有谁需要使用这些HTML元素呢？

因此，XHTML规范中有很多已经不鼓励使用的元素，也就是说，这些元素正逐步从语言中消失。最终，这些元素会被标志为废弃，这说明不要求也不鼓励浏览器支持这些元素。不鼓励使用的元素包括<font>、<basefont>、<u>、<strike>、<s>和<center>。样式表的出现使得已经不再需要这些元素。随着时间的推移，还会有更多元素步入这个不鼓励使用的行列。

不仅如此，HTML还有可能逐步被可扩展标记语言（Extensible Markup Language, XML）所取代。XML是一种比HTML更复杂的语言，不过它也更强大、更灵活。尽管如此，XML没有任何提供声明样式元素（如<i>或<center>）的方法。相反，XML 文档很可能要依赖于样式表来确定其外观。尽管XML使用的样式表可以不是CSS，不过它很可能遵循CSS而且与之非常相似。因此，现在学习CSS对创作人员是很有好处的，等到HTML被XML取代时这种好处就会更显著。

所以，重要的是首先要理解CSS和文档结构之间有何关联。使用CSS可能对文档表现有深远的影响，但是到底能做些什么，对此还是有一些限制。先来学习一些基本术语。

元素

元素（element）是文档结构的基础。在HTML中，最常用的元素很容易识别，如p、table、span、a和div。文档中的每个元素都对文档的表现起一定作用。在CSS中，至少在CSS2.1 中，这意味着每个元素生成一个框（box，也称为盒），其中包含元素的内容。

替换和非替换元素

尽管CSS依赖于元素，但并非所有元素都以同样的方式创建。例如，图像和段落就不是同类元素，span和div也不相同，在CSS中，元素通常有两种形式：替换和非替换。这两种类型将在第7章详细讨论，其中将介绍框模型（也称盒模型）的具体内容，但是这里还是先做一个简要介绍。

替换元素

替换元素（replaced element）是指用来替换元素内容的部分并非由文档内容直接表示。在XHTML中，我们最熟悉的替换元素例子就是img元素，它由文档本身之外的一个图像文件来替换。实际上，img没有具体的内容，通过以下的简单例子可以了解这一点：

<img src="howdy.gif"/>

这个标记片段不包含任何具体内容，只有一个元素名和一个属性。除非将其指向一个外部内容（在这里，就是由src属性指定的一个图像），否则这个元素没有任何意义。input元素与之类似，取决于input元素的类型，要由一个单选钮、复选框或文本输入框替换。替换元素显示时也生成框。

非替换元素

大多数HTML和XHTML元素都是非替换元素（nonreplaced element）。这意味着，其内容由用户代理（通常是一个浏览器）在元素本身生成的框中显示。例如，<span>hi there</span>就是一个非替换元素，文本“hi there”将由用户代理显示，段落、标题、表单元格、列表和XHTML中的几乎所有元素都是非替换元素。

元素显示角色

除了替换和非替换元素，CSS2.1还使用另外两种基本元素类型：块级（block-level）元素和行内（inline-level）元素。如果创作人员以前用过HTML或XHTML标记，并了解它们在网页浏览器中的显示。