深入浅出HTML-第2章：XHTML和CSS基础

XHTML和CSS基础

1、标记代码的部件：标签、元素和属性

与其他标记语言一样，XHTML的关键，是标签（ tag）。标签是经过编码的符号，用于分隔和区分内容的不同部分, 并告知浏览器它所处理的是什么类型的内容。
XHTML中的标签包围在一对尖括号（<和>）之间，以便将它们与普通文本明确区分开。 第一个尖括号（<）标明了标签的开头，随后是特定的标签名（tag name），最后以一个反向的尖括号（>）结束。例如，下面是表示段落的开头的XHTML标签：

注意, 标签名使用的是小写, 这是XHTML的要求。标签名在HTML中不区分大小写（许多 Web 作者把它们写为大写，以便让标记代码更易读） , 但在XHTML中必须是小写（这是XHTML区别于HTML的那些更严格的规则之一）。

大多数标签都配对使用：1个开标签［opening tag,也叫开始标签（start tag）］,用于标明一 个内容片段的开始，还有一个闭标签［ closing tag,也叫结束标签（ end tag），用于标明其结束。

这对标签和它们之间的一切形成一个完整的元素(element)。元素是 XHTML 文档的基本组成要素。老版本的HTML中有些元素不需要闭标签，因为一个新的开标签的出现暗示了前一元素的结束和新的一个元素的开始。但是在XHTML中，所有元素都必须结束于一个闭标签一 更准确地说，是几乎所有。

某些标签表示空元素(empty element),它们没有内容一实际上也不能有内容。空元素不需要结束标签，但是在XHTML中要通过在代表整个元素的一个单独的标签的尾部使用一个结尾斜线(trailing slash)来“自闭合” 。例如，下面的标签代表一个换行。它是一个空元素，在浏览器呈现文档时，会强迫后面的文本折到一个新行上：


结尾斜线之前的空格不是非有不可，但是它能希助较老的浏览器正确理解标签，因为如果没有这个空格，有些罕见的旧式浏览器不能发现标签的结束尖括号。有些空元素被称为替换元素 (replaced element)，它们实际上并不由图形浏览器自己呈现，而是被替换为一些别的内容。在HTML中，空元素不应当包含结尾斜线。

元素的开标签可以带有一些属性(attribute),以提供有关该元素的更多信息——一些该元素应有的特定属性(property)。属性由属性名 (attribute name)和随后的属性值(attribute value) 组成，如下所示：

Hello, world!<∕p>

这一段落具有一个值为“greeting”的class属性，这个属性将它与其他没有这一属性的段落区别开来。属性的名和值用一个等号(=) 连接起来，并且值要用一对引号括
起来。XHTML中所有属性值都必须用引号括起来，用单引号或双引号均可。在HTML中属性值用不用引号括起来都行，但在XHTML Strict中则必须括起来。有些
属性在HTML中不需要有值[没有值的属性被称为最小化属性(minimized attribute)],但在XHTML中所有属性都必须有值——最小化属性是不允许的。与标签名一样，属性名在XHTML中必须是小写，但在HTML中则不区分大小写。属性值则总是不区分大小写的，特别是因为有些值可能需要使用大写字母。即便如此，为了一
致性起见，只要可以用小写就最好用小写。

元素的开标签可以具有多个属性，它们彼此用空格隔开。属性只允许出现在开标签中(或空元素的单一的、自闭合的标签中) 。某些元素必须指定某些属性，而其他属性则是可有可无的，一切取决于该元素本身。下图说明了XHTML元素的基本组成部分：

2、块级元素和行内元素
元素可分为两大基本类型：块级的和行内的。块级元素(block-levelelement)包含有一大块内容，应该被显示在自己的行上，它们可以用来将长长的文本分割为一些段落、标题和列表等可管理的部分。行内(inline)元素通常包含一串较短的文本，并且被呈现在同一行上其他文本的旁边，如句子中一些着重强调的词就可以被标记为行内元素。

所有非空的块级元素都能包含文本和行内元素，它们中的大多数还可以包含其他块级元素。相比之下，非空的行内元素则只能包含文本或其他行内元素。例如，em 元素是行内元素，用于对其中的文本加以强调；而p元素是块级元素，用于标明文本段落。因为em是行内元素，不能包含块级元素，所以下面的例子是错误、无效的：

Hello, world!<∕p><∕em>

3、嵌套元素
元素可以层层嵌套，每个元素都存在于其包含元素中。它们必须正确嵌套, 每个闭
标签都要以正确次序出现，以便在闭合一个内层元素的包含元素之前先闭合这个内层元素。下面的标记代码是不正确地嵌套在一起的几个元素的例子：

Helloj worldl<∕p><∕em>
确保元素的正确嵌套，应该总是以与它们打开的次序相反的次序闭合它们：

Hello, world I<∕em><∕p>

4、空白符
在作为纯文本创建XHTML文档时，可以随意编排其格式。换行和缩进可以让标记代码在编辑文档的过程中更具可读性。对嵌套的块级元素进行缩进有助于看清特定
元素开始和结束的位置，并避免发生嵌套错误或忘记用正确的闭合标签结束元素的情况。

有时你可能想保留内容中额外的空格、制表符、换行符，如在页面上编排诗歌或计算机代码的格式的时候。元素pre正是用于这种描述多段预先编排过格式的文本的场合。

5、标准属性
讲述一个元素时，会列出它的必需属性和可选属性。但是有些通用属性几乎可以用于任何元素（并且基本上都是可选的）。

①核心属性——这类属性包含关于元素的一般性信息，可以包含在几乎任何元素的开标签内。

• class：表示特定元素所属的一个类或一组类。同属一类的元素可以共享一些呈现性特征，而且对元素进行分类对于客户端脚本编程也会有用。类名几乎可以是任何你喜欢的文字，但只能由字母、数字、连字符（-）和下划线（ _）组成，其他标点符号或特殊符号是不允许的。可以有多个元素属于同一类。此外，一个元素也可以属于不止一个类，此时属性值中的多个类名用空格分隔。

• id：为元素指定一个唯一性的标识符。id 可以是几乎任何简短文字，但它在一个文档中必须是唯一的，不能有多个元素共用一个标识符。id 属性不能含有除连字符（-）和下划线 （ _）之外的任何标点符号或特殊符号。其中第一个字符必须是字母，而不能是数字或任何其他字符。

• style：为元素指定 CSS 属性。这被称为内联样式定义（ inline styling) 。虽然 style属性对大多数元素都有效，但应该避免使用，因为它把内容和表现混在了一起。

• title：为元素提供一个文本标题。许多图形化浏览器将title属性的值显示在“工具提示”（即当用户的鼠标指针逗留在所呈现的元素上方时出现的那个小小的浮动窗口）中。

②国际化属性——包含关于用于书写元素内容的自然语言（如英语、法语、拉丁语等）的信息。它们几乎可以包含在任何元素中，特别是那些所包含文本使用的语言不同于文档其他部分的元素。

• dir：把文本的阅读方向设置为由值ltr（从左到右）或 rtl （从右到左）所指定的方向。 通常用不着使用这个属性，因为语言的方向应该从 lang 和 xml：lang 属性推断。
• lang：指定用于书写所包含的内容的语言。语言用一种缩写的语言代码表示，如en 代表英语，es代表西班牙语（Espanol）, zh代表汉语等。
• xml:lang：也用于指定用于书写所包含的内容的语言。这是lang属性的XML形式，用于XML文档中。XHTML文档既是XML又是HTML（取决于服务器如何交付它），因此元素既可指定lang也可指定xml：lang 属性，它们的值应该是同样的语言代码。

③焦点属性
当某些元素一尤其是链接和表单控件一处于预激活状态时，被称为拥有焦点（ focus）, 因为浏览器的“注意力”集中在该元素身上，准备激活它。可以为一些元素设置下列焦点属性以增强其对于用键盘在网页上导航的人的可用性。

• accesskey：为元素分配一个键盘快捷键，以便在使用键盘导航时能更方便、快捷地访问它。该属性的值是对应于访问键的字符。用于激活访问键的实际按键组合因浏览器和操作系统而异。
• tabindex：指定元素在使用制表键遍历链接和表单控件时所形成的访问顺序中的位置。
  有许多事件属性可用于客户端脚本编程。它们包括：onclick、ondblclick、onkeydown、onkeypress、onkeyup、onmousedown、onmousemove、onmouseout、 onmouseover、onkeyup。每当用户在元素上执行一个事件表示的动作时，就发生这个事件. 但是，使用这种内联的事件处理器是被强烈反对的做法，因此我们不打算谈及这些可选属性。由脚本带来的行为性增强最好与文档的内容和结构分离开，正如表现层也应该与它们分离开一样。

6、添加注释

在文档中嵌入注释往往很有用。它们不会被浏览器显示，但是你（或其他人）在查看源标记代码时可以看到。注释可以包含如对文档为何要以特定方式进行组织的说明、文档的修改指南或改动历史记录这类东西。XHTML中的注释使用一种特别的标签结构：

<!--Use an h2 for subheadings-->
<h2>Adding Comments<∕h2>

一段注释始于。浏览器不会呈现任何出现在这些标记符号之间的内容或元素，即便注释跨越多行。注释也可用于在测试网页时暂时“ 隐藏” 一部分标记代码：

<!-- Hiding this for testing
<h2>Adding Comments<∕h2>
End hiding -->

虽然注释不会被浏览器显示出来，但是它们依然随着其余的标记代码一起被发送，而且访问者查看网页的源代码时也可以看到它们。不要期望注释能完全保密，也不要依赖它们来永久性地删除或禁用任何重要的内容或标记代码。

7、XHTML 文档

先前我们反复使用文档（document）和页面（page）这两个词，你也许会以为它们可以互换使用。但一般说来，当说到文档的时候，我们所谈论的是含有XHTML 源代码的那个纯文本文件, 而页面则是图形浏览器呈现这个文档所得到的可见结果。文档是你创作的东西, 而页面则是你（以及网站的访问者）将看到和使用的东西。

一个有效、合式的XHTML文档必须符合严格的结构，并按确切的格局安排一些必需的组成部分。下面的代码中所有必需的部分都出现在正确的位置。

<!DOCTYPE html PUBLIC "-∕∕W3C∕∕DTD XHTML 1.0 Strict∕∕EN"
"http:∕∕www.w3.org∕TR∕xhtml1∕DTD∕xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml1" lang="en" xml:lang="en">
  <head>
    <title>My first web page<∕title>
  <∕head>
  <body>
    <p>XHTML is easy!<∕p>
  <∕body>
<∕html>

尽管看上去很简单，这确实是个完整、有效、合式的文档。你创建的每个网页都将从与其类似的框架开始。

8、Doctype
XHTML文档开始于一个文档类型声明(Document Type Declaration,简写为 doctype)。这是 一种必需的组成部分，它声明了文档的类型及其所遵守的标准规则集。XHTML的每种“ 风味” 都有自己相应的文档类型声明。

• XHTML 1.0 Strict：

<!DOCTYPE html PUBLIC -∕∕W3C∕∕DTD XHTML 1.0 Strict//EN"
 "http:∕∕www.w3.org∕TR∕xhtml1∕DTD∕xhtml1-strict.dtd">

• XHTML 1.0 Transitional：

<!DOCTYPE html PUBLIC "-∕∕W3C∕∕DTD XHTML 1.0 Transitioπal∕∕EN"
 "http:∕∕www.w3.org∕TR∕xhtml1∕DTD∕xhtml1-transitional.dtd">

• XHTML 1.0 Frameset：

<!DOCTYPE html PUBLIC "-∕∕W3C∕∕DTD XHTML 1.0 Frameset∕∕EN"
 "http:∕∕www.w3.org∕TR∕xhtml1∕DTD∕xhtml1-frameset.dtd">

文档类型声明是一种标签，但是尽管也使用尖括号，它并不是XHTML元素，因此并不需要一个闭标签或结尾斜线。实际上，它根本不是文档的标记代码的一部分。它只是向用户代理传达关于文档的信息，助其判断所处理的文档的类型并按照恰当的规则呈现页面。

你的XHTML文档中的文档类型声明必须严格按我们刚才所展示的那样书写，包括其大小写形式和引号，但不必折为两行。

文档类型切换：遵从模式与怪异模式
当浏览器下载了HTML或XHTML文档后，它必须做出一系列程序化的假定，以便解析文档的标记代码并应用作者的CSS代码中建议的表现样式。一个页面也许在一个图形化浏览器中呈现得很完美，但在另一个浏览器中却乱成一锅粥。

这种窘境导致了文梢类型声明切换(doctype switch)的出现。如果一个文档包含有完整、正确的文档类型声明，那么现代的浏览器可以认为整个文档是合式的并且遵守Web标准。于是浏览器可以在一种遵从标记语言和CSS的既定标准的模式下呈现页面。这种模式称为遵从模式 (compliance mode)或严格模式(strict mode)。如果文档中没有文档类型声明，或者声明不完整或不正确，则浏览器将假定所处理的是一个旧式文档，并转而采用其宽松和宽容的旧式呈现模式。这种模式称为怪异模式(quirks mode),有时也叫兼容模式(compatibility mode),因为它旨在适应非标准的、未正确构建的标记代码的种种怪癖。较老的浏览器缺乏内置的文档类型声明切 换功能，因此只能使用其过时的怪异模式。

在现代的Web浏览器中，为了正确地启用遵从模式，必须在文档的第一行加入一条完整的文档类型声明，在它之前只允许有空白符。出现在文档类型声明之前的任何标记代码、文本甚至注释都将导致大多数现代浏览器进入怪异模式并产生常常不可预见的结果。当文档使用遵从模式呈现的时候，用CSS设计网站要容易得多，其结果也更为一致。因此，一条完整、正确的文档类型声明是非常必要的。并且，因为文档类型声明也是有效Web文档的必需部分，所以只要文档是正确的，新式浏览器总会用遵从模式来呈现它们。

9、元素
实际的标记代码从文档类型声明后面的html元素开始。它是整个文档的容器，被踪为根元素(rootelement)。html元素没有自己特有的属性，纯粹是一个用于定义文档的开始和结尾的容器。出现在这个元素之外的任何元素或内容(除了并非元素的文档类型声明) 都将导致整个文档无效。

• 必需属性：xmlns——用于指定XML命名空间的URL。对于 XHTML 文档，应该是 http://www.w3.org/1999/xhtml。
• 可选属性：html 元素没有可选属性。
• 标准属性
  □ dir
  □ id
  □ lang
  □ xml： lang

命名空间（namespace）是XML语言中规定元素和属性名称的地方。XML是一种可扩展标记语言，允许作者定义自己的自定义元素和属性。例如，对于一个关于动物的文档来说，一个具有species属性的animal元素会很有用，这些自定义名称可以定义在一个特别的命名空间中。另一方面，XHTML1.0具有一套预定义的元素和属性名称集，其命名空间的正确URL为http://www.w3.org/1999/xhtml。XHTML文档中的命名空间通过html元素的xmlns属性声明。

标准的lang和xml：lang属性对于html元素是可选的（正如对于大多数其他元素一样）。因为它是根元素，所有其他元素都是其后裔，这里的语言声明将会传递到文档中的所有其他元素，所以建议指定这两个属性。

10、其他部分
文档的其他部分由head和body元素组成。head元素包含关于文档自身的信息（包括必需的title元素），而body元素则包含所有最终由浏览器呈现并供访问者浏览和使用的内容。
总而言之，XHTML文档的基本结构非常简单，只需要一条文档类型声明、一个根元素、一个具有title元素的head元素，还有一个body元素。

11、文档树
可以把XHTML文档的结构想象为一棵倒置的树，其枝干代表文档的元素。这棵树发端于顶部的根元素，并向下延伸出所有其他元素。它更像是一个家谱图，而不是一棵枝繁叶茂的木质的树。出于这个原因，家谱学中的术语常被用于描述元素之间的关系。

12、CSS基础
CSS能够为页面添加样式，增强和改进内容的外观。提供结构的是XHTML,每个元素都标明了内容中的一个不同部分，而属性则传达了关于元素的更多信息。CSS是影响这些XHTML元素的呈现外观的另外一层要素。颜色、字体、文本大小、背景以及元素在页面上的布局都属于内容的表现方面的因素，都能通过巧妙运用CSS来加以控制。

13、CSS 规则剖析
如果说元素是标记代码的构建块料的话，那么CSS的构建块料则是规则（ rule）。它是一个指令集，浏览器可以按照其指示基于所提供的描述性的值改变XHTML元素的外观。一条CSS规则由几个部分组成，如下图所示：

• 选择符（ selector）是规则中用于确定样式所应用到的目标元素的部分。它的作用范围大到可以影响某种元素的每一个实例，小到仅仅影响几个甚至一个元素。
• 样式声明又包含两个部分：属性和值。属性是元素的表现形式中将被修改的方面，如颜色、宽度或在页面上的位置。CSS 语言中有大量属性可供使用。

属性的值说明了应被应用到选定的元素上的特定样式。可接受的值取决于属性本身，有些属性可以有用空格分隔的多个值。

样式声明位于一对大括号"{” 和“ }"之间。可以为一个选择符指定多个样式声明，以便用一条规则改变元素表现样式的多个方面。属性与其值之间用冒号（ : ）分隔,样式声明以一个分号（ ; ）结尾。分号可以把多个样式声明分隔开，但是如果规则中只有一个样式声明，那么分号是可选的。一系列样式声明中的最后一个也是如此。为谨慎起见，养成在每一个样式声明的后 面都加上一个分号（即使只有一个样式声明）的习惯不是件坏事。

如果CSS代码没有遵守这些基本结构和语法，例如，漏掉了闭合括号或分隔属性和值的冒号, 那么整条规则甚至整个样式表都可能会失灵。就像XHTML一样，样式表应该是合式的和正确构造的。W3C 提供了1个验证服务（http://jigsaw.w3.org/css-validator/） ,它可以帮助你发现样式表中的错误。

14、CSS 选择符
选择符，用于从XHTML文档中选择元素。选择符有许多种，各有其不同的具体性
(specificity),可以确定一大批元素或仅仅几个元素。具体性是度量选择符的作用范围的手段。所谓作用范围，换句话说，指的是选择符选择了多少元素在CSS的设计原则中，比较具体的选择符将凌驾于较不具体的选择符之上并取而代之。具体性是 CSS中较为含糊和难以掌握的概念之一，但也是这种语言中最强大的特性之一。

• 全体选择符：全体(universal)选择符是一个星号(*)。它充当一个“通配符(wild card)”，选择文档中的每一个元素。例如，下一规则将把蓝色前景色应用到所有元素上：
  * { color: blue; }
  标题、段落、列表、表格单元格甚至链接都将呈现为蓝色，因为这一全体选择符选择了所有元素。这是最不具体的选择符，因为它完全缺乏具体性。
• 元素选择符：元素选择符选择一种元素的所有实例，其具体性来自于标签名。这种选择符比全体选择符更具体，但还不是很具体，因为其目标是一种元素的每一个实例，无论它们倒底有多少个。例如，下一规则将每一个em元素的前景色指定为红色，哪怕文将中有数以千计的这种元素：
  em ( color: red; }
  元素选择符也叫类型(type)选择符。
• 类选择符：类选择符以class属性中有指定类名的任何元素为目标。因为class几乎可用于XHTML中的任何元素，而且可以有任意数目的元素属于同一个类，所以这种选择符不是特别具体，但还是比元素选择符更具体。在CSS中，类选择符以一个圆点(.) 开头。例如下面规则将影响所有属于"info"类的元素的样式，不管它们是什么元素：
  .info { color: purple; }
• ID 选择符：ID 选择符将仅仅选择具有指定标识符的那个元素。实际上，id属性可用于几乎所有元素，但一个id属性值在一个文档中只能使用一次。ID选择符在一个页面中只以一个元素为目标，这使它比可能以许多元素为目标的类选择符具体得多。ID 选择符以一个"#"符号开头。下面的规则会将 id 值为introduction的元素的前景色指定为绿色：#introduction { color: green; }
• 伪类选择符：伪类选择符类似于类选择符（其具体性也与类选择符相同），但它选择的是处于特定状态的元素。这种选择符以冒号（：）开头。可用的伪类只有有限几个：

:link { color: blue; }
:visited （ color: purple; }
:active （ color: red; }
:hover （ color: green; ）
:focus （ color: orange; }

：link伪类选择所有超链接元素。：visited伪类选择那些所指向的目标已经被访问过的链接（已访问过的链接被记录于响浏览器内在的访问历史记录中）。：active 伪类选择处于活动状态的链接。所谓处于活动状态，指的是在被激活期间（当用 鼠标点击链接时，或当焦点位于链接上并按下回车键时）。： hover伪类选择用户的定点设备“悬浮”于其上方的元素。虽然任何元素都能处于有定点设备悬浮其上的状态，但是这一伪类最常用于链接（不过，某些老式浏览器只支持把这一伪类用于链接而不是其他元素）。:focus 伪类选择拥有焦点的元素。某些浏览器不支持:focus,特别是Windows下的IE 6。但是，IE实际上（不正确地）将: active伪类当做: focus伪类对待，不过这仅针对链接，不适用于其他元素。
:active “激活”： 鼠标点击标签，但是不松手时。
:focus 是某个标签获得焦点时的样式（比如某个输入框获得焦点）。

• 后代选择符：后代选择符是CSS的武器库中最有用和最强大的选择符之一。它可以组装自两个或多个用空格分隔的基本类型的选择符（全体、元素、类、伪类和ID选择符），用于选择文档树中匹配该位置的元素。这种选择符也被称为上下文选择符（contextual selector）,因为它们是基于元素在文档中的上下文来选择它们。例如：#introduction em { color: yellow; }
  这一规则将把id值为"introduction"的元素中包含的任何em元素的颜色设置为黄色。基于XHTML文档的结构，后代选择符可以很精确地只选择到你想要选择的元素。看着这个更复杂的例子：#introduction.info p*{color: pink; }
  它将选择一个p元素的所有后代元素，而这个p元素是一个 id值为introduction的元素的属于info类的后代元素的后代元素。从这个例子可以看出，后代选择符的作用范围可能会非常窄，仅仅针对满足选择符的选择标准的几个元素。
  -组合选择符：可以把两种或多种类型的选择符组合使用，如一个元素选择符加一个ID选择符，或者一个ID选择符加一个类选择符。这些组合能够进一步增强选择符的具体性，仅仅挑出那些你想应用样式的元素，而将所有其他元素排除在外。p.info { color: blue; }
  它只选择属于info类的段落(p元素) 。属于该类的别种元素和不属于info类的其他段落都将被忽略。
  后代选择符中的组合选择符对元素的选择能达到外科手术般的精确：
  p#introduction a.info:hover { color: silver; }
  上一规则只应用于id值为introduction的段落的后代元素中那些属于info类且处于有定点设备悬浮其上的状态的链接(a 元素) 。
• 分组选择符：可以把几个选择符聚集起来作为一条规则的组成部分，以便同一套样式声明集能够应用到许多元素上，这可以避免对这些选择符重复同一套样式声明。规则中的各个选择符之间用逗号分隔:p, h1, h2 { color: blue; }将同样的颜色值应用到 p、h1和h2元素的每一个实例。p#intreduction em, a.info:hover, h2.info ( color: gold; }选择的是id值为introduction的段落的后代中的所有em元素、属于info类且处于有定点设备悬浮其上的状态的所有链接，以及属于info类的所有h2元素(二级标题)(记住，一个类中可以包含不同类型的元素) 。
  分组选择符和组合选择符是保证样式表的简洁性和可管理性的有力手段。
• 高级选择符：在CSS1之后，新的版本陆续出现，包括CSS2.1和CSS3。对CSS规范的这些修订引入了一些令人兴奋的新型选择符。
  ①属性选择符(attribute selector)以具有特定属性甚至是具有其值为指定值的特定属性的元素为目标。
  ②伪元素选择符(pseudo element selector)的目标并不明确存在于标记代码中，而是隐含于其结构之中。如段落的首行，或者紧随一个元素之后的另一个元素。
  ③子选择符(child selector)选择一个元素的子元素，但不选择其他后代元素。
  ④毗邻同胞选择符(adjacent sibling selector)的目标是一个元素的同胞元素中紧随其后的那个。

15、具体性与层叠
各种选择符都分配有一个确定的具体性级别，用于度量它将会影响到的XHTML元素的可能数目。看看下面两条CSS规则，其中一条有一个元素选择符，而另一条有一个类选择符：

h2 ( color: red; }
.title ( color: blue; }

再看看下面的XHTML代码片段，它有一个属于title类的h2元素:

Specificity and the Cascade<∕h2>
第1条规则选择所有h2元素，第2条规则选择所有属于title类的元素。因为所示元素同时满足这两条选择标准，所以导致了两条CSS规则之间的冲突。图形化浏览器必须在两条规则中选择听从其中一条，以确定标题最终的颜色。在CSS中，比较具体的选择符会胜过较不具体的选择符。 因为类选择符比元素选择符更具体，第2条规则有更高的具体性，所以标题将被呈现为蓝色。

现代的Web浏览器按照一套复杂的方案来计算选择符的具体性，只要记住下列几条规则，你很少需要去计算选择符的具体性数值：
□ 全体选择符完全不具备具体性。
□ 元素选择符比全体选择符更具体。
□ 类或伪类选择符比元素选择符更具体。
□ ID选择符比类和伪类选择符更具体。
□ 内联的style属性中声明的CSS属性具有最高的具体性。

组合选择符和后代选择符中的具体性可以被累加。每一种基本选择符类型都有一个与众不同的具体性方面的权重。一个具有两个类的选择符比具有一个类的选择符更具体，一个具有一个ID的选择符比一个具有两个类的选择符更具体，如此等等。计算具体性的算法的设计保证了不可能发生一大批较不具体的选择符压过一个较具体的选择符这样的事。无论多少元素选择符都不可能比一个类选择符更具体，无论多少类选择符都不可能比一个 ID选择符更具体。即使你用上百个元素选择符拼凑出一个复杂的选择符来，另一条只有一个ID选择符的规则都将盖过它。

理解了具体性，你就能构造精确地选择目标元素的CSS规则。

如果有两个选择符以同一个元素为目标，并且它们具有相同的具体性， 那会有
什么结果。例如：

.info h2 ( color: purple; }
h2.title { color: orange; }

如果有一个h2元素属于title类，并且它还是另一个属于info类的元素的后代，那么这两条规则都可以用于这个h2元素。

假定多个选择符具有相同的具体性，在此情况下，由于浏览器会按遇到样式声明的次序应用它们，所以后面的声明会盖过前面的声明。无论后一个声明出现在同一个规则中、出现在同一个样式表中另一个位置靠后的规则中，还是出现于在前一个声明所在的样式表的后面下载的另一个样式表中，结果都一样。
CSS的名字就来自它的这种特性，多个样式表彼此层叠(cascade),叠加出浏览器中最终的表现结果。前面的例子中的那个h2元素将呈现为橙色，因为第2条规则将盖过第1条。

下面是另一个例子：p { color: black; color: green; }这条规则包含两个样式声明；但是段落将会被呈现为绿色，因为绿色的前景色声明在层叠顺序中后出现。

具体性和层叠的这种有时会很复杂的相互作用一开始可能会让人觉得CSS难以驾驭，但是一旦你理解了基本规则，它就变成了一种习性。

16、将样式表附加到文档
为了用CSS控制网页的样式，需要把样式表连接到文档。当图形化浏览器下载XHTML文档并进行解析时，会自动寻找指示它如何呈现各种元素的CSS规则。在文档中加入样式表有几种方法，它们各有其优缺点。

• 内联样式：可以在标记代码中每个元素可选的style属性中加入CSS样式声明。内联的样式并不作为规则构造，而且因为属性和值被直接附加到相应元素，所以也不存在选择符，内联样式具有最高的具体性 ，因为它只应用于一个元素 。

<h2 style="color:red;">Good eats for hungry geeks<∕h2>
<p style="color: gray;">Our fresh pizzas, hearty pasta dishes,and
succulent desserts are sure to please. And don't forget about our
daily chalkboard specials!<∕p>

然而你应该避免使用内联样式。它们把表现性因素与标记代码混在一起，因而失去了使用CSS的主要
优点之一。它们还有高度的冗余性，因为你不得不反复声明同样的样式属性以实现一 致的表现结果。要是将来你想修改网站，例如，把所有标题从红色改为蓝色，你得在每一个文档中找到每一个标题并加以修改。对于一个复杂的大型网站来说，这是一项令人望而却步的任务。

不过，内联样式在极少数情况下也许是一种有效的手段，但这些情况非常罕见，应该首先考虑其他解
决方案，把内联样式视为在其他方案都不可行的情况下才使用的最后一招。

• 嵌入式样式表：可以把样式规则嵌入到文档的head元素内部，这种样式规则只在包含它们的文档中起作用。 嵌入式样式表(有时也叫内部样式表(internal style sheet))包含在style元素中。

<!DOCTYPE html PUBLIC "-∕∕W3C∕∕DTD XHTML 1.0 Strict∕∕EN" "http:∕∕www.w3.org∕TR∕xhtmll∕DTD∕×htmll-strict.dtd">
<html ×mlns≡"http:∕∕www.w3.org/1999/xhtml" lang="en", ×ml:lang="en">
  <head>
    <title>Spaghetti and Cruft:Our Menu<∕title>
    <style type="text∕css">
      h2{color: red;}
      p{color: gray;}
    <∕style>
  <∕head>
  <body>
    <h2>Good eats for hungry geeks<∕h2>
    <p>0ur fresh pizzasi hearty pasta dishes, and succulent  desserts are sure to please. And  don't forget about our daily chalkboard specials!<∕p>
  <∕body>
<∕html>

在文档的head部分嵌入样式表在一定程度上实现了表现性因素与结构化内容的分离，而且这些规则将应用于整个文档。但是，如果打算一次把样式应用到多个页面，这就不是一种有效的方法了。 网站中其他
文档也得有自己的嵌入式样式表，因此以后再修改网站的表现形式时，将需要修改其中的每一个文档。

• 外部样式表
  最好的选择是：把所有CSS规则都放到独立的外部样式表中，然后把外部样式表连接到文档。外部样式表是纯文本文件，你可以使用创建XHJML文档时所用的文本编辑器来编辑它，保存时指定其文件扩展名为".css∖这种方法把表现性因素与内容和结构完全分开——它们甚至不存放在同一个文件中。一个外部样式表可以被链接和关联到任意数目的XHTML文档, 这使整个网站的视觉性设计可以用一个核心文件来加以控制。对这个文件的修改将传播到与它连接的每一个网页。这种设计网站的方法最具灵活性和可维
  护性，它充分发挥了 CSS 的真实能力。

XHTML文档通过head中的link元素来链接外部样式表。

<!DOCTYPE html PUBLIC "-∕∕W3C∕∕DTD XHTML 1.O Strict∕∕EN",http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
" lang="en" xml:lang="en">