级联样式单级别2（CSS2）规范由W3C在1998年出版，它优于CSS1，对XML和HTML文档格式化的功能比以前更强大。当然，与CSS1一样，CSS2也对HTML向后兼容。但是，使用XML，CSS2几乎和桌面出版程序（如PageMaker和Quark XPress）一样，可格式化纸张和Web上的内容。
这里讨论的大多数规则，常用的浏览器仍不能执行。Mozilla可实现一些样式，但完全能够实现所有的样式仍有一段路要走。
本章的主要内容如下：
* CSS2中有哪些新特点？
* 选择元素
* 格式化网页
* 可视的格式化
* 框
* 计数器和自动计数
* 音频样式单
13.1 CSS2中有哪些新特点？
CSS2体现了Web开发者和设计者对浏览器开发商长期以来一直要求的许多特点。其规范也比CSS1多两倍，不仅仅是所有改变的综合和具有一些新特点，而且重写了原来的规范。这使此规范成为所有级联样式单句法、语义和规则的唯一来源。
完整的CSS2规范可在Web上的http://www.w3.org/TR/REC-CSS2和本书所附光盘上的specs/CSS2文件夹中。这也许是迄今W3C创作的最易读的规范文档，并且也值得反复读。
要使通用的软件完全支持所有的新规范，还需要花费一些时间，CSS2也不例外。正如读完本章之后所看到的那样，Internet Explorer 5.0和Mozilla也刚刚开始实现这些属性。为了读者的方便，对那些仍没有实现的属性，我将给予指出。
CSS2的许多新特点能使人们更加准确地选择和格式化文档中的元素。新的伪类和伪元素能够选择元素的第一个子元素，当接收到焦点时调整元素，或者在指定元素选定范围内自动地控制其他元素的位置。媒体类型可把不同的样式应用于在不同媒体（如打印的页面、计算机显示和无线电广播）上出现的文档。对分页媒体（如打印输出和幻灯片显示）的支持也获得了极大地改进，从而可对页面的分页符（page break）实现更加强大的控制。现在不仅可以对块和内联框中的元素格式化，也能对表格中的元素格式化。可自动地对顺序和列表加以编号和缩进排印。对非西方语言（如阿拉伯语和中文）提供了更多的支持。并且，第一次应用声觉样式来指定文档不是以何种方式显示，而是如何让人阅读。此外，CSS2改变了CSS1一些功能的实现方式。
13.1.1 新的伪类
伪类选择具有共同部分但不一定是相同类型的元素。例如，:hover伪类指明是光标当前正在其上的那个元素，而不管此元素的类型。CSS2有七个新的伪类，现简要地叙述如下：
* :first-child：:first-child伪类选择元素的第一个子元素。
* :focus：:focus伪类选择有焦点的对象；也就是说，如果用户在键盘上击一个键，那么此键就输入到该对象之中。
* :hover：:hover伪类选择一个指派的、但非激活的对象。
* :1ang：:1ang伪类选择以特定的语言编写、由xml:lang特性标识的元素。
* :first：:first伪类选择要打印文档的首页。
* :left：:left伪类选择文档打印输出的左页（通常是偶数页），就像复印材料装订成书那样。
* :right：:right伪类选择文档打印输出的右页（通常是奇数页），就像复印材料装订成书那样。
13.1.2 新的伪元素
伪元素通过从XML输入中不易获得的其他信息来标识特定的元素。例如，在CSS1和CSS2中，:first-line和:first-letter就是伪元素，它们选择元素的第一行和首字母，甚至它们不必用任何元素来表示。
CSS2添加了两个新的伪元素：:after和:before。:after伪元素可用来在指定的元素后面插入对象。这些对象可以是影像、自动计数器或正文。:before伪元素可用来在指定的元素之前插入对象。这些对象也可以是影像、自动计数器或正文。
13.1.3 媒体类型
CSS2为盲文、计算机显示器、纸张上的墨水和电视所呈现的信息定义了十种媒体类型。CSS2可以为不同的媒体指定不同的样式。例如，对于低分辩率计算机显示器来说，使用大字体比1200dpi打印更重要。
13.1.4 分页媒体
CSS2控制页面的分页符，并提供标识文档中各页面的方法，以便设计者可格式化打印文档，而不影响文档在屏幕上的外观。
13.1.5 国际化
由于Internet扩展到非英语的国家，所以在支持成千上万的目前正在使用的和历史上的口语和书面语方面，正取得更大的进步。CSS2增加了对Unicode和双向正文的支持，所以为中文和希伯来文施加样式就尤如英语和法语一样容易。
13.1.6 可视格式化控制
CSS2增加了更多的格式化属性，以提供对组成文档的对象更精确的控制。现在可指定元素的绝对位置和尺寸。当创建元素时，还有更多的显示样式可供使用。可以将阴影应用于正文。字体和颜色也可以指定为"同等于"用户界面的元素，就像菜单项或图标标签那样。当光标的指针移动到不同的元素上时，可改变光标的显示形式。
13.1.7 表格
display属性的改进使得把XML元素当作类似表格的结构一样处理，并在更好地控制它们的对齐方式方面变得容易。
13.1.8 生成的内容
当文档正在显示时，自动生成的计数器、编号系统和列表标记符等使文档的作者强制应用程序能瞬间创建信息。无论在何时文档发生变化时，编号都会瞬间重新计算，而不是艰难地手工插入。
13.1.9 有声样式单
为了努力地使信息友好地分发给所有的人，CSS2中加入了具有语音合成系统功能的特殊属性。这些属性使文档作者能控制文档内每个元素的声音的强度、语调和其他属性。
13.1.10 新工具
CSS2规范也改变了原先包括在CSS1中的一些功能。它们包括级联机制、伪类和其他的各种属性。
13.1.10.1 伪类和伪元素
:link、:visited和:active伪类不再非得独立地相互指派不可，可一起使用。
13.1.10.2 继承
在CSS1中，只有几个属性能够从其父元素那里继承属性值。而在CSS2中，将属性值设置为关键字inherit，此时，所有的属性都能继承其父元素的值。当一属性被继承时，属性就具有与最邻近的父元素一样的值。
由于每个属性都可有inherit值，所以在下面对各属性的讨论中，我省略对此值的任何解释。
13.1.10.3 级联机制
在CSS1中，!important指定符可强制作者样式单优先于读者样式单。CSS2则相反，所以读者优选项优先于作者的优选项。当作者和读者的样式单一起使用时，缺省结果是，用户样式单覆盖作者样式单。但是，如果作者将一属性声明!important，这就向规范中增加更大的强制力，使它覆盖读者样式单。但是，如果读者也将一条规则声明!important，这也将覆盖作者样式单中的!important声明。换句话说，读者获得最终的发言权。
13.1.10.4 显示属性
display属性的缺省值现在是inline，而不是block。
13.1.10.5 页边距和贴边
在CSS1中，当设置其他属性时，会忽略一些页边距属性，例如，如果同时设置了margin-left和width，那么margin-right将被忽略。此结果不依赖于正文的方向和对象的对齐方式。CSS2根据对象正文的方向来决定如何改变左或右页边距。
13.2 选择元素
支持CSS2的浏览器（如Internet Explorer和Mozilla）可以更明确地选择将样式规则应用于其上的元素或对象。使用CSS2，只需通过指定元素名、标识符或将元素和属性设置组合在一起，就可以根据元素在文档结构中创建的式样来选择元素。
13.2.1 式样匹配
CSS2式样匹配可标识文档树状结构中特定的元素。式样匹配选择符的句法可以是从一个简单的元素名到一复杂的上下文式样的系统（如表13-1所示）。如果元素满足指定式样的所有要求，则此元素就与该式样匹配。在XML中，对大小写是敏感的。
表13-1 用于式样匹配的CSS2选择符句法
句法
意义
*
这是通配符（universal selector），匹配任何元素
X
与名称为X的任何元素匹配
XY
匹配带有Y名（是带有X名的元素派生的）的任何元素。例如，SONNET元素的所有VERSE派生元素
X>Y
匹配任何为X元素的子元素的Y元素。例如，STANZA元素的所有VERSE子元素
X:first-child
匹配所有的X元素（为其父元素的第一个子元素）。例如，在SONNET元素中的第一个STANZA元素
X:link
匹配链接中其目标未被访问的所有的X元素
X:visited
匹配链接中其目标已被访问的所有的X元素
X:active
匹配当前选择的所有X元素
X:hover
匹配当前有鼠标在其上方移动的所有X元素
X:focus
匹配当前通过选择鼠标或准备输入文本数据而获得用户焦点的所有X元素
X:lang(i)
匹配应用xml:lang特性指定使用人类语言i的所有X元素
X+Y
匹配其近系同属为X元素的所有Y元素。例如，REFRAIN元素就紧接在STANZA前面
X[attr]
匹配设置了attr特性的所有X元素，而不管此特性为何值。例如，带有NAME特性的AUTHOR元素
X[attr="string"]
匹配其attr特性的值为"string"的所有X元素。例如，值为19990723的DATA特性的AUTHOR元素
X[attr~="string"]
匹配任何X元素，但此元素的attr特性是以空格分开的、其中之一为"string"的一组单词
X[lang|="langcode"]
匹配其lang特性设置为特定的"langcode"的所有X元素
X#myname
匹配其id特性为"myname"值的任何X元素
13.2.2 通配符
*符号选择文档中的所有元素。用它能为所有的元素设置缺省样式。例如，下面这条规则将缺省字体设置成New York：
*{ font-face: "New York" }
可以将*和特性、伪类和伪元素选择符结合起来，以便把样式应用于带有特定特性、特性值和作用等的元素，从而使这些元素具有指定特性、特性值、角色等。例如：
*:before { content: ". " counter(pgraph) ". ";
counter-increment: pgraph; /*向pgraph加1*/
*[onmouseover] { text-decoration: blink }
如果通配符只与一个属性说明一起使用，那么*就可以忽略。
例如：
before { content: ". " counter(pgraph) ". ";
counter-increment: para }
[onmouseover] { text-decoration: blink }
13.2.3 后代和子代选择符
可以使用子代（child）或后代（descendant）选择符来选择指定类型元素的子代（children）或派生代（descendent）的元素。例如，可以选择包含在SONNET元素中的任何VERSE元素，或成为STANZA元素直系子代的VERSE元素。参见**13-1，显示的是以XML格式写成的Shakespeare（莎士比亚）的第21首的十四行诗。
**13-1： Shakespeare的第21首的十四行诗
<?xml version="1.0"?>
<?xml stylesheet type="text/css" href="shakespeare.css"?>
<SONNET>
<AUTHOR>William Shakespeare</AUTHOR>
<TITLE>Sonnet 21</TITLE>
<STANZA id="st1">
<VERSE>SO is it not with me as with that Muse</VERSE>
<VERSE>Stirr'd by a painted beauty to his verse,</VERSE>
<VERSE>Who heaven itself for ornament doth use</VERSE>
<VERSE>And every fair with his fair doth rehearse:</VERSE>
</STANZA>
<STANZA id="st2">
<VERSE>Making a couplement of proud compare</VERSE>
<VERSE>With sun and moon, with earth and sea's rich
gems,</VERSE>
<VERSE>With April's first born flowers, and all things
rare</VERSE>
<VERSE>That heavens air in this huge rondure hems.</VERSE>
</STANZA>
<STANZA id="st3">
<VERSE>O, let me, true in love, but truly write,</VERSE>
<VERSE>And then believe me, my love is as fair</VERSE>
<VERSE>As any mother's child, though not so bright</VERSE>
<VERSE>As those gold candles fix'd in heaven's air.</VERSE>
</STANZA>
<REFRAIN>
<VERSE>Let them say more that like of hearsay well,</VERSE>
<VERSE>L will not praise that purpose not to sell.</VERSE>
</REFRAIN>
</SONNET>
所有的VERSE都是SONNET元素的后代，但不是直系子代（immediate children）。有些VERSE元素是STANZA的直系子代，有些则是REFRAIN元素的直系子代。后代选择符是由一个空格分开的两个或更多个元素标志符组成的。SONNET VERSE形式的后代选择符匹配VERSE元素，后者是SONNET元素的任意后代。为了指定后代的特定层次，需要使用SONNET*VERSE形式，它强制VERSE元素至少应为孙代，或为SONNET元素更低的后代。
要指定直系子代元素，可使用STANZA>VERSE的形式。这种形式把规则只应用于成为STANZA元素直系子代的VERSE元素，所以不影响REFRAIN元素的任何VERSE子代。
可以把后代和子代选择符结合起来，以查找特定的元素。例如，下列选择符查找属于REFRAIN元素第一个子代的所有VERSE元素，而REFRAIN元素又是SONNET元素的后代。
SONNET REFRAIN>VERSE:first { padding: "2cm" }
将上述规则应用于**13-1，则此规则选择诗句"Let them say more that like of hearsay well,"。
13.2.4 直系同属选择符
直系同属选择符在元素指示符之间使用加号（+）来识别与其后的另一元素处于同一层次的元素。例如，下面的代码选择与STANZA元素共享一个父元素并紧接在STANZA元素之后的所有REFRAIN元素。
STANZA+REFRAIN { color: red }
13.2.5 特性选择符
特性选择符标识特定的元素/特性的组合。把要匹配的特性名用方括号括起来放在元素名之后。例如，下面的规则将带有NUMBER特性的所有STANZA元素都变成红色：
STANZA[NUMBER] { color:red }
此规则将具有NUMBER特性的所有STANZA元素都变成红色，而不管特性值是什么。它包括由DTD提供的具有缺省NUMBER特性的元素，但不包括没有NUMBER特性的STANZA元素。
要测试特性值，可使用设置特性值的相同句法；也就是说，等于号放在名称后面，值放在等于号后面，并放在引号中。例如，仅指定其NUMBER特性值为3的STANZA元素变为红色，则可使用下面这条规则：
STANZA [NUMBER="3"] { color:red }
13.2.6 @规则
@规则用来完成某项任务，而不是选择元素，并把一些样式应用于这一元素。@规则有五种：
1．@page：把样式应用于页面（而不是此页上的元素）
2．@import：在当前样式单中嵌入一外部样式单
3．@media：把只能用于某种媒体的特性组合起来成为样式规则
4．@font-face：描述样式单中用于其他地方的字体
5．@charset：定义样式单使用的字符集
13.2.6.1 @page
@page规则选择页面框。在其内部，设计者可指定各页面的大小、版面布局、取向和页边距。页面框是矩形区域，大约为打印页的大小，它包含页面区域和页边距。页面区域包括要显示的内容，框边缘作为一种容器，页面版面就处于分页符之间。与其他框不同，页面框没有边界线或贴边，只有页边距。
@page规则选择文档中的每一页面。可使用下面的页面伪类属性之一:first、:left或:right来为各页面类指定不同属性。
由于@page规则不知道含有字体的页面内容，所以无法理解以em和ex为单位的尺寸。所有的其他度量单位（包括百分数）都是可以接受的。用于设置页边距的百分数也是总页面框的百分数。页边距可为负值，表示把内容放在通常应用程序或打印机可访问的区域之外。在大多数情况下，只保留可见或可打印区域内的信息。
13.2.6.2 @import
@import规则把指定的外部样式单嵌入到现有的样式单中。这样可以根据多个较小、较容易理解的片断生成大样式单。导入的样式单使用.css扩展名。例如，下面的规则导入poetry.css文件。
@import url(poetry.css);
@import规则可在样式单后面指定媒体类型。如果没有指定媒体类型，@import规则就没有限制，并且可用于所有媒体类型。例如，下列规则导入printmedia.css文件。在这个样式单中的声明只适用于印刷媒体（print media）。
@import url(printmedia.css) print;
下面的这条规则导入continuous.css文件，可用于计算机显示器或电视机显示器。
@import url(continuous.css) tv, screen;
导入到其他样式单中的样式单，在级联中的等级要比导入它的样式单低。例如，假设shakespeare.css为VERSE指定New York字体，而shakeprint.css为VERSE指定Times字体。如果将Shakespeare.css导入到shakeprint.css中，那么，诗句将以Times字体显示。
13.2.6.3 @media
可使用多种媒体把信息传递给读者，每种媒体都有其自己的习惯样式和格式。现在还不能使语音合成器较好地以单音调来阅读Shakespeare的诗句，如今可以吗？斜体字对于等宽终端也没有什么意义。
CSS2可为显示在不同媒体中的相同元素指定不同的样式。例如，如果正文使用的是非衬线字体，则在屏幕上就更容易阅读，而如果正文是以衬线字体编写在纸上时，通常最容易阅读。可以将只准备用于一种媒体的多个样式规则放入一条指明媒体名的@media规则中。在一篇文档中，@media规则的数量与指定的媒体类型一样多。例如，下面的这些规则将根据是在纸上打印还是在显示器上显示把SONNET元素格式化成不同的样式。
@media print {
SONNET { font-size: lopt; font family: Times, serif }
}
@media screen {
SONNET { font-size: 12pt;
font-family: New York, Times New Roman, serif }
}
@media screen, print {
VERSE { line-height: 1.2 }
前两条规则明确定义了为打印机和屏幕媒体类型所使用的样式。由于现在的计算机显示器的分辨率比现在的打印机低得多，所有显示在屏幕上的字体比打印输出要大，并且选择适用于屏幕的字体，这是很重要的。
第三条规则提供适用于这两种媒体类型的样式。要为多个媒体类型同时指定样式指令，可简单地将媒体名列在@media规则指定符之后，并以逗号分开。
支持CSS2的浏览器允许文档的作者提供决定特定类型媒体如何显示文档的规则。例如，当在屏幕上显示一文档时，与把它发送到打印机相比，很可能应用不同的规则。CSS2识别如下十种媒体类型：
1．all：所有的设备
2．aural（连续、有听）：语音合成器
3．braille（连续、可触知）：用于有视觉障碍的盲文触觉反馈设备
4．embossed（分页、可触摸）：分页盲文打印机
5．handheld（可视）：PDA（手持机）和其他手持式设备如Windows CE掌上型电脑、Newton和Palm Pilot
6．print（分页、可视）：所有的打印、不透明材料
7．projection（分页、可视）：展示和幻灯片放映，可将它们直接从计算机上投影或打印在幻灯片上
8．screen（连续、可视）：点位图彩色计算机显示器
9．tty（连续、可视）：使用位置固定的、单色字符栅格的哑终端和旧的PC显示器
10．tv（可听/可视）：电视类设备，如低分辩率、模拟显示器、彩色设备
浏览器软件不一定支持所有的这些类型。实际上，我知道没有任何一个设备支持所有的这些类型。但是，样式单设计者应该假设读者可能使用任何一类或所有类型的设备来浏览自己的内容。
当然，各个媒体的特性也会随着时间的流逝而改变。我的第一个打印机是144dpi，可是，在21世纪，如此低分辨率的打印机就会很少见。另一方面，显示器最终也将达到300dpi或更高；而彩色打印机也迅速地为越来越多的用户所使用。
有些属性只有特定的媒体类型才可用到。例如，pitch属性只用于有声媒体类型。尽管CSS2的确为@media规则提供一组当前值，但它未指定所有可包括的媒体类型。给出的媒体名与大小写无关。
13.2.6.4 @font-face
@font-face规则用来描述样式单中其他地方使用的字样。可提供字体名、URL（下载字体的位置）和有关字体点阵（允许适度的精确复制来达到合成的目的）的详细信息。@font-face规则还控制了软件如何根据作者指定的字体来为文档选择字体。可想到的方法包括同等字体匹配、智能字体匹配、合成所需字体、下载服务器上的字体或形成字体。这些方法将在下面描述。
* 同等字体匹配（Identical Font Matching）：用户软件选择相同字族名的本地系统字体。相同名称的字体在外观上不一定完全一致。客户端使用的字体来源可能与服务器上的字体不同。
* 智能字体匹配（Intelligent Font Matching）：软件选择客户端系统上现有的字体，并且其外观与所要求的字体最接近。不要求精确地匹配，而应接近。这是根据字型、是否使用衬线、粗细、大写字母的高度以及其他字体的特性来匹配的。
* 字体合成（Font Synthesis）：Web浏览器生成与指定字体最相似的字体，并共享其点阵。当合成一字体时，通常它的近似程序比使用匹配找到的字体更接近。为了使所有的字体特性都能够保留，这种合成需要精确的代换和位置信息。
* 字体下载（Font Download）：浏览器软件从指定的URL处下载字体。这个过程与下载同当前文档一起显示的影像或声音是完全一样的。下载字体的用户会经历一段等待，这与下载影像时的情况相似。
* 字体形成（Font Rendering）：最后可供管理字体的选择办法是渐进形成。这是一种下载和匹配的组合，它能使浏览器创建临时的字体，可以一边下载原字体，一边阅读文档内容。在"真正"的字体下载后，用它来代替生成文档中的合成字体。为了避免文档显示两次，字体描述必须包含描述字体的点阵信息。字体的点阵信息越完整，那么一旦下载完成后，文档需要重新形成的可能性就越小。
CSS2能使文档淖髡咧付ㄔ谠亩料低趁挥兄付ǖ淖痔迨笔褂媚闹址椒ǎㄈ绻械幕埃┭≡褡痔濉font-face规则提供字体的描述。这种字体的描述是由一系列字体描述符创建的，并定义了有关页面上使用的字体的详细信息，可包括用于字体的URL、字族名和字号。
字体描述符分为下列三类：
* 提供字体的样式单用法与其描述之间的链接。
* 提供字体的位置或其相关信息的URL。
* 提供字体的字符信息。
@font-face规则只应用于样式单内部指定的字体。在样式单中，对每种字体，都需一个@font-face说明。例如：
@font-face { font-family: "Comic Sans";
src: url(http://metalab.unc.edu/XML/fonts/comicsans))
@font-face { font-family: "Jester"; font-weight: bold;
font-style: italic)
TITLF { font-family: "Comic Sans")
AUTHOR { font-family: "Jester", serif }
当软件读到此样式单时，将试图找到指定各元素应如何显示的一组规则。此样式单将所有的TITLE元素设置为Comic Sans字族，同时它又把所有的AUTHOR元素设置为Jester字体。支持CSS1的Web浏览应用程序搜索Comic Sans和Jester字族。如果找到这些字族，浏览应用程序将其缺省正文字体设为Comic字族，将serif字体指定为Jester字族的后略字体。@font-face规则的字体描述符将被忽略。CSS1软件能安全地跳过这个命令，而不会出现错误。
支持CSS2的应用程序将检查@font-face规则，以试图匹配Comic Sans和Jester字体的描述。在上一例子中，浏览软件找到了URL，从此处可下载Comic Sans字体。如果在客户端系统上找到Comic Sans字体，软件就会使用它来代替下载的字体。对于Jester情况，用户软件将使用匹配规则或合成规则从所提供的描述符来创建一类似的字体。如果Web浏览器没有为指定的字族找到相匹配的@font-face规则的话，那它会试图使用为CSS1指定的规则来匹配字体。
CSS2可以跳过浏览器不能识别或无用的任何字体描述符。这就提供了内建的增加描述符的方法以便改善字体置换、匹配或合成所使用的规则。
13.2.6.5 @charset
指定编写样式单的字符集有三种方式，并且以如下的顺序选择优先级：
1．Content-Type字段中的HTTP"charset"参数
2．@charset规则
3．与文档相关联的特性和属性，如与LINK元素一起使用的HTML的charset特性每个样式单都包含一个@charset规则。@charset规则必须出现在文档的最前，前面不能有任何其他字符。使用@charset的句法为：
@charset "character set name"
本语句中指定的character set name（字符集名称）必须是IANA注册表中描述的名称。在第7章的表7-7中列出了部分字符集。要指定样式单用Latin-1字体来编写，可写为下列形式：
@charset "ISO 8859-1"
在第7章 “外国语言和非罗马文字”中，详细地讨论了字符集。
13.2.7 伪元素
在XML文档中，伪元素在样式单中是作为元素来处理的，但不一定是特定的元素。它们是应用样式单之后显示文档的某一部分（如一段的第一行）。伪元素区分大小写，并直接出现在样式单选择符的主题之后。CSS2引入了两个新的伪元素：:after和:before。
:after和:before伪元素选择在它们之前的元素的紧前面和紧后面的位置。content属性用来把数据放在这个位置。例如，下面的这条规则将字符串����放在STANZA对象之间，以便将节分开。字符串文字中的\A为分行符的编码：
STANZA: after { content: "\A����\A" }
除了文字字符串之外，也可使用下列四个关键字之一作为content属性的值：
1．open-quote
2．close-quote
3．no-open-quote
4．no-close-quote
open-quote和close-quote关键字为当前语言和字体插入适当的引号字符（如" 或 ）。no-open-quote和no-close-quote关键字不插入任何字符，但增加嵌套的层次，就像使用引号一样。根据每个嵌套的层次，引号标记从双引号到单引号之间切换，反之亦然。
还可以使用attr(X)函数作为内容属性的值，将X特性的值插入到标识的元素之前或之后。
最后，也可以使用counter()或counters()函数，插入自动计数器的当前值。有两种截然不同的形式：counter(name)或counter(name,style)。其中缺省的style参数为十进制。
13.2.8 伪类
伪类选择符基于外观而不是元素的名称、特性或内容来选择元素。例如，某一伪类可以基于鼠标的位置、获得焦点的对象或是否是链接对象。当读者与文档产生交互时，元素可不断改变其伪类。某些伪类是互斥的，但大多数能同时应用于同一个元素，并能放在元素选择符内的任何地方。当伪类的确发生冲突时，级联顺序确定激活哪个规则。
13.2.8.1 :first-child
:first-child伪类选择命名元素的第一个子元素，而不管其类型。例如在**13-1中，VERSE元素的内容是"So is it not with me as with that Muse"，此元素是STANZA元素的第一个子元素，可由下列规则指定：
STANZA: first-child { font-style: bold }
13.2.8.2 :link、:visited、:active
在CSS1中，:link、:visited和:active伪类是互斥的。在CSS2中，:link和:visited也是互斥的（在逻辑上不得不如此），但可将两者中一个与:active一起使用。例如，下列的代码段假定AUTHOR元素已指定为链接，并根据此链接的当前状态改变正文的颜色。在下面的代码段中，当鼠标正放在链接的上面时，将未被访问的链接设置为红色，已访问过的链接作为灰色显示，活动链接以橙绿色显示。
AUTHOR: link { color: "red" }
AUTHOR: visited { color: "gray" }
AUTHOR: active { color: "lime" }
13.2.8.3 :hover
:hover伪类选择鼠标或其他指示设备正指着的元素，但不按下鼠标键。例如，下面的这条规则是在鼠标指向AUTHOR元素时，将此元素变成红色。
AUTHOR: hover { color: "red" }
当鼠标不再指向AUTHOR元素时，此元素返回到正常颜色。
13.2.8.4 :focus
:focus伪类引用当前获得焦点的元素。当选择了某一元素，并准备接收某种文本输入时，此元素就获得了焦点。下列的规则使焦点的元素变成黑体。
:focus { text-style: "bold" }
13.2.8.5 :lang()
:lang()伪类选择使用指定语言的元素。为此，在XML中，一般通过XML声明中的xml:lang特性和/或encoding特性来实现的。下列规则改变用希伯来语编写的所有的VERSE元素的方向，以便从右往左阅读，而不是从左往右：
VERSE: lang(he) { direction: "rtl" }
13.2.8.6 :right、:left、:first
:right、:left和:first伪类只适用于@page规则。可用它们来为文档的第一页、文档的左（一般为偶数）页、文档的右（一般为奇数）页指定不同的样式。例如，下面的这些规则指定很大的页边距：
@page: right { margin-top: 5cm;
margin-bottom: 5cm;
margin-left: 7cm;
margin-right: 5cm }
@page: left { margin-top: 5cm;
margin-bottom: 5cm;
margin-left: 5cm;
margin-right: 7cm }
@page: first { margin top: 10cm;
margin-bottom: 10cm;
margin-left: 10cm;
margin-right: 10cm }
在用于伪类的规则中，唯一能设置的属性就是页边距属性。
13.3 格式化页面
@page选择符指的是页面。可用它来设置应用于页面而不是页面上的各个XML元素的属性。文档的每一页都有多种属性可供应用，包括页面的大小、取向、页边距和分页符。这些属性级联于页面上的任何元素。可选的伪类可为第一页、右页和左页指定不同的属性。
CSS2合理地假定页面是矩形的。作出这种假定之后，页面可具有框的属性，这些属性以及包括页边距和大小在内，在CSS1中就已熟悉了。但是页面框没有边界或贴边，因为这些已经跑到物理页面之外了。
13.3.1 大小属性
在@page规则中，size属性指定页面的高度和宽度。可将size设置为1或2个绝对长度，或下列四个关键字之一：auto、portrait、landscape或inherit。如果只给出一个长度，则此页面将是正方形的。当给出两个尺寸时，第一个是此页面的宽度；第二个是高度。例如，
@page { size: 8.5in 11in }
auto设置自动调整为目标屏幕或纸面的大小。landscape强制文档格式化为适应目标页面，但长边是水平的。portrait设置将文档格式化为适应缺省的目标页面的大小，但长边是垂直的。
13.3.2 页边距属性
margin属性控制着此页的页边距，页边距为页面的四个侧边上的所有不能打印的矩形区域。此属性可作为分别设置margin-top、margin-bottom、margin-right和margin-left的简略方式。而这些属性与CSS1中的框的属性是相同的。例如，下面的规则描述这样的一个页面：长11英寸、宽为8.5英寸、所有的侧面上的页边距为1英寸。
@page { size: 8.5in 11in; margin: l.0in }
13.3.3 标记属性
CSS2提供了mark属性，以便将标记（用于描绘在何处切开纸张和如何对齐页面）放在页面上。这些标记（mark）显示在页面框之外。页面框只是文档的可视区域，它受@page规则的影响。如果有一张已打印的区域为8.5英寸×11英寸的打印纸，那么页面框就是此张纸上可打印区域内的内容，我们通常把它认为是打印机页边距内的空间。软件控制标记的显示，它只显示于绝对的页面框上。绝对的页面框不能移动，可为页面的一般页边距所控制。相对页面框可以根据目标页面对齐，在大多数情况下，强制标记离开页面的边缘。当将相对页面框进行对齐时，实际上是用内心的眼睛在看页面，并使用margin和padding属性将此页面的打印区域在实际的纸张上移动。
mark属性有四个值：crop、cross、inherit和none，只能和@page元素一起使用。修剪（crop）标记标识纸张的剪切边缘。交叉（cross）也称为注册标记，它用于在打印的内容之后对齐页面。如果设置为none，文档中没有任何标记。下列的规则指定带有crop和cross标记的页面：
@page { mark: crop cross }
13.3.4 页面属性
除了使用@page选择符来指定页面属性之外，还可使用page属性来将页面属性与各个元素进行连接。为此，可编写指定页面属性的@page规则，给@page规则命名，然后使用这个名称作为正常元素规则的page属性。例如，下面两条规则说明打印SONNET的纸是横向放置的。
@page rotated { size: landscape }
SONNET { page: rotated }
使用page属性时，使用不同的同属元素指定不同的页面属性是可能的。如果是这样，将在元素之间插入一分页符。如果子元素使用了不同于父元素的页面布局，那么此子元素的版式将处于优先地位。例如，在下例中，这两个表横向显示在页面中，如果空间允许，有可能在同一页上。由于文档中的元素层次的关系，赋给SONNET元素的旋转页面不再有效，且不被使用。
@page narrow { size: 9cm 18cm }
@page rotated { size: landscaper }
STANZA { page: narrow }
SONNET { page: rotated }
13.3.5 分页符属性
page-break-after属性强制或阻止在当前对象后插入分页符。page-break-before属性强制或阻止在当前对象前插入分页符。page-break-inside属性允许或阻止在当前对象内部插入分页符。这些属性可用来将相关的正文段落、标题及其主体文本、影像及其说明放在一起，或在同一页中保持表格的完整。
当将这些属性的任一个设置为auto时，在当前框中既不会强制，也不会禁止插入分页符。设置为always时，强制插入分页符。avoid设置将阻止分页符出现。设置为left和right时，根据需要强制插入一或两个分页符，以便强制下一页成为左页或右页。这用于书中一章的结尾是很有用的，因为书中的一章通常始于右页，即使保留下空页也没关系。
下列的规则在文档中的每个SONNET元素前和后插入一个分页符但不在SONNET元素内插入分页符，以便十四行诗都出现在各自的页面上。
SONNET { page-break-before: always;
page-break-after: always;
page break-inside: avoid }
13.4 可视格式化
CSS2添加了许多新的格式化功能，这些功能提供了对XML文档版面的更多控制。display属性有许多新值，这些值扩充了CSS1基本块和内联类型。cursor属性能够标识在对象上方显示何种光标。可控制所有对象框的高度和宽度。CSS2还能修改文档对象的可视性、剪切大小、颜色、字体、正文阴影、对齐方式，并且如果内容超出页面，还能控制如何处理这种情况。
13.4.1 显示属性
CSS2中扩充的display属性提供了更完整的版面选项，其中最显著的就是表格。在CSS2中，有17个显示属性值：
Inline
table-header-group
Block
table-footer-group
list-item
table-row
run-in
table-column-group
Compact
table-column
Marker
table-cell
Table
table-caption
inline-table
none
table-row-group
块（block）元素通过在对象周围添加间距来在其内容的周围放置一个缓冲地带。内联（inline）元素不用放置边缘上的间距。表格（table）元素是各种网格。内联元素就像句子中的单词一样，其位置随着文本的增加或删除而自由移动。块对象更加固定，当在其前和后添加内容时，顶多只能上下移动，但不能左右移动。大多数显示类型只修改主块或内联类型。
13.4.1.1 内联对象
内联对象（inline object）框水平放置在起始于包含它周围页面或块元素的顶端一行。在水平页边距这些框之间，可实现边界和贴边间隔。也可将这些框以各种方式（包括字符基线、框底或框顶）垂直对齐。
在CSS1中，block值是所有对象的缺省显示类型，但在CSS2中发生了变化。现在元素自动地以inline显示，除非指定了其他类型。
13.4.1.2 块对象
块对象（block object）一个挨一个地往下垂直分布。第一个块对象处于包含块的左上角，然后第二个块置于它之下，并齐排列在包含块的左边。各块之间的垂直距离由各块的页边距和贴边属性来定义。例如，下面的这段规则把VERSE、STANZA和REFRAIN元素当作各块来看待。图13-1显示的是**13-1应用了此规则（并只有此规则）之后的结果。注意，AUTHOR和TITLE都处于同一行，因为缺省情况下它们是内联的。但是，当块元素跟在一个内联元素之后时，就需要在块元素后面使用分行符。
VERSE, STANZA, REFRAIN { display: block }
图13-1 当作为块元素显示时，Shakespeare的十四行诗呈现的外观更正常
13.4.1.3 none值
none值强制此元素不产生任何类型的显示框来格式化元素的内容。另一方面，元素对文档的版面没有任何影响。子元素和其他后代元素也不产生框，即使它们设置了display属性也是如此。当display为none时，那么此框不仅仅是不可见，而是它确实不存在。
13.4.1.4 compact和run-in值
display属性的compact和run-in值根据上下文的前后关系，把一元素既可以标识为块，也可以标识为内联框。根据属性的最终显示状态，用于声明为这种类型的项目上的属性，将是很有效的。如果合适，compact框将放在紧随其后的块框的页边距之内。如果跟在compact框之后的框不是块框，或者compact框在页面距内放不下，那么它将只作为另一块框显示。
run-in值能够将正常的块元素格式化为代码中下一块元素的第一个内联块。如果下一个元素不是块元素，那么run-in元素就能作为块元素被格式化。
13.4.1.5 标记值
将display属性设置为marker值时，可标识由样式单中生成的内容所形成的块，而不是从XML文档复制来的内容所形成的块。此值只能与已和块级元素相联系的:before和:after伪元素一起使用。
13.4.1.6 表格显示值
在CSS2中，尤其对于那些经常使用标记（这种标记与HTML的表格标记完全不同）创建表格结构的XML开发人员来说，最重要的新功能之一就是支持元素的表格版面。使用下列10个display属性值，就可以使CSS2增加将元素格式化为表格的支持。
1．table
6．table-row
2．inline-table
7．table-column-group
3．table-row-group
8．table-column
4．table-header-group
9．table-cell
5．table-footer-group
10．table-caption
例如，将display属性设置为table，表示所选择的元素是块级容器，用于将较小的子元素放置在表格的单元格中。inline-table值强制表格具有内联对象的功能，使正文能够沿着其侧边浮动，对于多个表格，并排放置。table-caption值将元素格式化为表的标题。table-row-group、table-header-group和table-footer-group值创建只起一行作用的数据单元组，就像使用table-row值定义的一样。table-column-group创建充当一列的一组数据单元，可使用table-column值来定义。出现在表格单元中的XML元素应该有带有table-cell值的display属性，这已足够。
例如，如果要将十四行诗形成类似于表的结构，可将每个STANZA和REFRAIN设置为一张表，每个VERSE设置为表的一行。创建这种效果的样式单可能包括如下三条规则：
STANZA { display: table }
REFRAIN { display: table }
VERSE { display: table-row }
13.4.2 宽度和高度属性
用于显示每个元素的框的缺省高度可从元素内容的整体高度算出。每个元素框的缺省宽度可从元素内容的整体宽度算出，或从页面或屏幕的可视区域的宽度算出。内联元素和包含正文的表格元素总是具有这类自动地计算出的尺寸。但是，样式单设计者可以改变块级元素的这些缺省值，并通过指定下列的六个属性值来代替内联元素：
1．min-width
2．max-width
3．min-height
4．max-height
5．height
6．width
min-height和min-width属性指定可用来显示对象的最小尺寸。最大属性是框的最大尺寸，而不管其内容的总尺寸。Web浏览器在这些限制内可自由调节框的大小。但是，如果设置了height和width，那么就可精确地确定框的大小。
STANZA { width: 100px;
Height: 100px }
13.4.3 overflow属性
当使用width和height精确地指定一个框的大小时，淠谌菟伎占渫耆锌赡鼙却丝蚴导士占浯蟆verflow属性控制如何处理超过的内容。此属性可设置为下列四个值之一：
1．auto
2．hidden
3．scroll
4．visible
如果overflow设置为auto，必要时将会添加滚动条，以便用户能够看见超过的内容。如果将overflow设置为hidden，超过的内容被裁去。如果将overflow设置为scroll，那么无论内容是否超出显示范围，都会增加滚动条。最后，如果将overflow设置为visible，将显示整个内容，如有必要，则推翻框的大小约束。
图13-2显示的是当使用下列规则，将STANZA的overflow属性设置为scroll时的十四行诗：
STANZA { overflow: scroll }
图13-2 具有滚动条的Shakespeare的十四行诗的节
13.4.4 clip属性
当由用户软件显示对象内容时，clip（剪辑）属性标识可见的对象内容部分。一般地，剪辑区与元素框的外边界一致，但此区是可以改变的。此属性只适用于具有overflow特性（设置为非visible的任一值）的元素。
在CSS2中，只能剪辑成矩形区域。将clip属性设置为rect(top, bottom, left, right)，这里的top、bottom、left和right为各侧面的偏移量。如果剪辑过的对象仍超过浏览器窗口的可视区域，那么内容将会被进一步剪辑以适应于窗口的大小。下列规则将clip属性用于STANZA块元素：
STANZA { clip: rect(5px, 5px, 5px, 5px);
overflow: auto }
13.4.5 visibility属性
visibility属性控制元素的内容是否看得见。此属性的四个值为：
1．visible
2．hidden
3．collapse
4．inherit
如果将visibility设置为visible的话，框的内容（包括所有的边界）都会显示。如果将visibility设置为hidden，那么框的内容和边界都看不见。不可见框仍占据空间，影响文档的布局。将visibility设置为hidden与将display属性设置为none，是不一样的。
如果将visibility设置为collapse，除表格的行或列外，对于任何对象来说，与使用hidden是一样的。但是，对于表格的行和列来说，这种设置完全隐藏（同display:none一样）行或列。
13.4.6 cursor属性
光标是箭头指针/手形/插入条/其他图标，这些图标表示鼠标箭头在屏幕上的位置。光标是显示于计算机显示器可视区上的鼠标逻辑位置的可见图像。当读者将鼠标移到特定的对象之上时，cursor属性指定用户软件应该显示的光标。CSS2有16个光标值：
1．auto：浏览器基于当前上下文关系来选择光标。此为缺省值
2．crosshair：一种简单的十字形光标
3．default：由操作系统平台决定的缺省光标，通常为箭头
4．hand：手形
5．move：交叉的箭头，表示要移动某物
6．e-resize：指向东方（右边）的箭头（上方是北边）
7．ne-resize：指向东北（右上）角的箭头
8．nw-resize：指向西北（左上）角的箭头
9．n-resize：指向北（上）方的箭头
10．se-resize：指向东南（右下）角的箭头
11．sw-resize：指向西南（左下）角的箭头
12．s-resize：指向南（下）方的箭头
13．w-resize：指向西（左）方的箭头
14．text：I-字型
15．wait：秒表、砣螺、沙漏或其他图标，表示要经历一段时间
16．help：问号
下面的规则使用cursor属性说明当光标指针移到VERSE元素上时，应使用手形光标。
VERSE { cursor: hand }
也可以使用自定义的光标，该光标从给定影像的URL影像文件中加载。一般地，可以提供几种格式的光标，格式之间以逗号分开，最后一个应是通用光标名称。例如：
VERSE { cursor: url("poetry.cur"), url("poetry.gif"), text }
13.4.7 相关的颜色属性
CSS2根据Internet普遍使用的标准缺省颜色空间（sRGB）中的RGB的值来标识颜色。表示颜色的方式随浏览器而变，但是这种规范提供了一种明确的、客观上可度量的颜色外观的定义。符合此标准的Web浏览器根据CSS2规范所确定的颜色，来执行Gamma修正（Gamma Correction）。在大多数条件下，sRGB可以标识显示器的Gamma值为2.2。这意味着，对于大多数计算机硬件来讲，CSS2属性给定的颜色不得不调整，以有效地显示Gamma值为2.2。
只在CSS2规则中确定的颜色才受到影响。使用于影像中的颜色可传递它们自己的颜色修正信息。
13.4.7.1 颜色属性
color属性指定元素文本内容的前景色。可以使用文字描述的颜色名（如red）或RGB值（如#CC0000）。颜色名（或值）包括aqua（浅绿）、black（黑色）、blue（蓝色）、fuchsia（紫红）、gray（灰色）、green（绿色）、lime（酸橙）、maroon（栗色）、navy（海蓝）、olive（橄榄）、purple（紫色）、red（红色）、silver（银白）、teal（深青）、white（白色）和yellow（黄色）。
下列的样式规则使用标识颜色的所有三种方法，将颜色应用于三个元素。将AUTHOR元素的RGB指定为十六进制值#FF0000，所有的TITLE元素均显示为红色，所有的VERSE元素以rgb( 255, 0, 0)颜色显示。这些值都是红色：
AUTHOR { color: #FF0000 }
TITLE { color: red }
VERSE { color: rgb(255,0,0) }
Gamma修正
从本质上来讲，Gamma修正控制影像的明亮度，所以影像能精确地显示在计算机屏幕上。还没有经过修正的影像显得褪了色或太暗。为了使Gamma修正易于理解，让我们来看看计算机屏幕上显示的影像。
实际上，每个计算机显示器都具有Gamma值为2.5。这意味着，光强与电压的关系是2.5次幂函数。如果向显示器发送指定像素的信号，获得强度为x，那么，此像素将自动地使强度为x2.5加在显示器上。由于电压的范围是在0到1之间，这意味着，像素强度比所期望的低。为了修正这个像素强度，那么显示的电压就不得不进行"Gamma修正"。
修正这个问题的最简单的方法就是在把电压送到显示器之前提高电压。由于电压和明亮度的关系是已知的，所以可调整信号来去除显示器的Gamma影响。当正确地做好这一切之后，计算机显示器就能精确地反映影像导入。当然，当对影像进行Gamma修正时，计算机室内的光线、显示器的明亮度和对比度，以及个人的偏爱也起一定的作用。
当试图对Web进行Gamma修正时，系统平台的特质也会开始起作用。有些UNIX工作站会自动地修正显示卡上的Gamma变化，正如Macintosh机一样，但大多数PC机则不行。这意味着，在PC机上看得挺好的影像，在Mac机上就会太浅；反过来，某些影像在Mac机上能很好地显示，而在PC机上就显示太暗。如果把彩色影像或文本放在Internet上，那么就不可能使所有的人都感到满意。目前，在Web上使用的任何图像格式都没有Gamma修正的编码信息。
13.4.7.2 系统颜色
CSS2使用户通过从本地的GUI（图形用户界面）复制颜色来指定颜色。这些系统颜色可以和相关的颜色属性一起使用。基于系统颜色的样式规则考虑了用户的偏爱，所以具备如下的一些优点：
1．页面适合于用户喜爱的观感。
2．用户更容易访问的页面，加入了与残疾人有关的设置项。
表13-2列出了CSS2系统颜色的关键字及其含义。任何颜色属性都可取这些值。
例如，下列的样式单设置VERSE的前景色和背景色为浏览器窗口所使用的前景色和背景色。
VERSE { color: WindowText; background-color: Window }
表13-2 与所有颜色有关的属性一起使用的其他系统颜色
系统颜色关键字
含义
ActiveBorder
活动窗口边框
ActiveCaption
活动窗口标题
Appworkspace
多文档界面的背景色
Background
桌面背景色
BottonFace
三维显示元素的外观颜色
13.5 框
当使用CSS来格式化一文档及其内容时，需要用到框。框具有边界和大小，用于存放元素的内容。这些框堆叠在一起并可互相覆盖，以便根据样式单的规则，以有序的方式对齐元素的内容。CSS2给框添加了新的轮廓（outline）属性，使框能够定位在页面、其他框或窗口上的绝对位置处。
13.5.1 轮廓属性
CSS2能够将轮廓加入到对象中。轮廓很像边框，但轮廓是绘在框之上的。其宽度不加到框宽度上。此外，如果CSS元素是非矩形的（不大可能），在此元素周围的轮廓也将是非矩形的。由于轮廓不必一定是矩形的，所以不能分别设置左、右、顶和底轮廓，只能一次改变整个轮廓。
13.5.1.1 轮廓样式属性
outline-style属性设置整个框的轮廓样式，它起的作用如同CSS1中的border-style属性，并且具有同样的11个值，其含义也相同：
1．none：无线条
2．hidden：使线条不可见，但仍占据空间
3．dotted：点线
4．dashed：虚线
5．solid：实线
6．double：双实线
7．grooved：凹槽线，好像埋入页面
8．ridge：凸纹线，好像突出页面
9．inset：嵌入线，整个对象（不仅仅是轮廓线）像是推入到文档里面
10．outset：外置线，整个对象（不仅仅是轮廓线）像是推出文档
11．inherit：使用父类的值
下列三条规则设置TITLE、AUTHOR和REFRAIN元素的轮廓样式：
TITLE { outline-style: solid }
AUTHOR { outline-style: outset }
REFRAIN {outline-style: dashed }
13.5.1.2 轮廓宽度属性
outline-width属性的作用像第12章讨论的margin-width和border-width属性一样，可使用无符号的长度或下列三个关键字之一来设置框的轮廓宽度：
1．thin：大约0.5到0. 75磅
2．medium：大约1磅
3．thick：大约1.5到2磅
例如下面的这条规则给STANZA加上一条粗轮廓线，给VERSE加上一条细轮廓线。
STANZA { outline: thick }
VERSE { outline: thin }
13.5.1.3 轮廓颜色属性
outline-color属性设置元素框的轮廓颜色。一般地说，这种设置既可以使用颜色名（如red），也可以使用RGB颜色（如#FF0000）。但是，还有关键字值invert，此值反转屏幕的像素颜色（黑色变成白色，反之亦然）。
TITLE { outline color: #FFCCCC;
outline-style: inset;
outline width: thick }
AUTHOR { outline color: #FF33CC }
VERSE { outline-color: invert }
13.5.1.4 轮廓简略属性
outline属性是简略属性，它设置容器框的所有四个边的轮廓宽度、颜色和样式。例如：
STANZA { outline: thin dashed red }
VERSE { outline: inset }
13.5.2 定位属性
CSS2对文档中每个对象的位置提供了多种控制方法。可以把特定的对象或对象的特定类型按层放置。每层与其他层无关，可独立移动。position属性确定对象如何排列，可使用下列四个关键字值之一：
1．static：缺省的布局
2．relative：对象偏移其静态位置
3．absolute：相对于包含对象的框，将对象放置在特定的位置
4．fixed：对象放在窗口或页面的特定位置
13.5.2.1 相对定位（relative positioning）
编排文档时，格式化标识符根据对象和文本的正常信息流（flow），选择项目的位置。实际上，这就是对象缺省的静态格式化，大多数文档创作者都使用这种方法来编排文档。编排文档完成之后，对象相对于当前位置可能会发生偏移。这种对象位置的调整就是所谓的相对定位。使用相对定位，改变对象的位置，对其后的对象没有任何影响。由于相对定位的框完全保持其正常的信息流的大小和间隔，因此，框可以交叠。
将position属性设置为relative，可生成一个相对定位的对象。其偏移量可由left、right、top和bottom属性来控制。使用JavaScript来改变这些属性，甚至可以在文档上移动对象和层。可以使影像或文本移动、出现或消失、或中途改变。例如，下面的这条规则将TITLE元素从正常的位置向上移动50像素，向左移动65像素。
TITLE { position: relative; top: 50px; left: 65px }
13.5.2.2 绝对定位（Absolute Positioning）
绝对定位元素参照包含它的块来放置。它可为它包含的框建立一个新的包含块。绝对定位元素的内容不会在其他框周围流动。这样可能会使它们造成显示在文档中的其他框的内容模糊不清。绝对定位元素对其后同属的出现顺序无任何影响，所以跟在绝对定位元素后面的元素所产生的效果，就如同绝对定位元素不在此处一样。
AUTHOR { position: absolute; top: 60px; left: 140px }
13.5.2.3 精确定位（Fixed Positioning）
具有固定位置的元素相对于其显示窗口或页面的坐标放置。如果正在查看由连续媒体组成的文档，那么当此文档滚动时，被固定的框就不会移动。如果被固定的框处于分页媒体上，那它总是会出现在每页的末尾。这样就能够把页脚或页眉放在文档上，或将签名放在一系列只有一页纸的信件的末尾。例如，下面的规则，以将REFRAIN元素的左上角放在距显示窗口（或打印的纸张）左上角往下300像素、往右140像素的地方。
REFRAIN { position: fixed; top: 300px; left: 140px }
13.5.2.4 使用z-index属性来层叠元素
z-index属性控制定位框的层叠顺序。要改变缺省的z-index值，可将z-index设置为整数（如2）。有较大z-index值的对象放在较小z-index值的对象的顶部。底部的对象无论是否完全显示，它们都决定于其顶部对象的背景属性。如果背景是透明的，那么，处于下面的对象至少有一些可能完全透过。
**13-2是使用绝对定位的样式单，这个样式单有一个z-index，用它来创建Shakespeare十四行诗多部分的重叠效果。图13-3显示了此情景。这肯定不如由浏览器来编排此诗的样子好看。使用绝对定位应十分小心。我只推荐用于印刷媒体，以此媒体分发论文，而不是电子文件。
图13-3 使用z-index排序的绝对定位，可以控制文本框的重叠顺序
**13-2：Shakespeare十四行诗的z-index样式单
#stl { position: absolute;
top: 160px;
left:200px;
height: 100px;
width:200px;
overflow: auto,
z-index: 2 }
#st2 { position: absolute;
top: 210px;
left:50px;
height: 100px;
width:200px;
overflow: auto;
z-index: 3 }
#st3 { position: absolute;
top: 210px;
left:250px;
height: 100px;
width:200px;
overflow: auto;
z-index: 4 }
REFRAIN { position: absolute;
top: 300px;
left:200px;
height: 100px;
width:200px;
overflow: auto;
z-index: 5 }
13.6 计数器和自动编号
CSS2能自动地产生某些内容。例如，可使用样式单来创建这样的一个大纲：使用不同的编号系统对大纲的每个层次进行适当的缩进。
counter-increment属性使计数器（counter）加1。content属性使用counter(id)或counter(id, list-style-type)函数作为值，插入指定计数器的当前值。最后，counter-reset属性将计数器设置归0。
例如，假定从1开始要对诗中的每个VERSE进行计数，但在每个新的STANZA和REFRAIN中重新计数。可使用下面的规则达到此目的：
VERSE { counter-increment: verse-num }
STANZA { counter-reset: verse-num }
REFRAIN { counter-reset: verse-num }
VERSE：before { content: counter(verse-num) }
可在counter-reset中的计数器名后，指定重设的整数，就可以重新将计数器设回到非0的数。例如，下面的规则将计数器设回到-10：
VERSE { counter-reset: verse-num -10 }
在counter-increment中的计数器名后，指定非1的整数作为递增量。例如，
VERSE { counter-increment: verse-num -1 }
最后，content属性可有不止一个计数器以及附加内容及其计数器。例如，下面的这些规则以1.1，1.2，1.3，...，2.1，2.2，2.3，...的形式对诗进行编号，第一编号表示节，第二个编号为诗句：
VERSE {counter-increment: verse-num }
STANZA {counter-reset: verse-num }
STANZA {counter-increment: stanza-num }
REFRAIN {counter-reset: verse-num }
REFRAIN {counter-reset: stanza-num 0 }
VERSE:before {content:
counter(stanza-num) "." counter(verse-num)
还可以使用非欧洲数字。counter()函数的第二个参数可用来指定不同的数字格式。现有的格式有disc、circle、square、decimal、decimal-leading-zero、lower-roman、upper-roman、lower-greek、lower-alpha、lower-latin、upper-alpha、upper-latin、hebrew、armenian、georgian、cjk-ideographic、hiragana、katakana、hiragana-iroha和katakana-iroha。例如，使用平假名的日文数字来对诗进行编号，可以这样编写：
VERSE：before {content: counter(stanza-num, hiragana)
"." counter(verse-num, hiragana) }
13.7 有声样式单
视觉缺陷的用户已经使用特殊的软件来阅读Web网页。将来，使用这种方法可能会扩大到视觉完好的人，他们一边浏览Web，同时一边使用电话进行交谈、一边驾驶汽车、一边洗涮盘子以及进行其他活动，而在这些过程中，眼睛和手用于不同的目的。CSS2支持一些新的特性，以便描述如何大声地读出元素，以及如何打印或在屏幕上显示。这些新特性将在下面的章节中讨论。**13-3为一有声样式单，它使用指定方法，来讲出在普通与剧本有关的XML元素中找到的信息。
**13-3：用于剧本或十四行诗的有声样式单
TITLE, AUTHOR, ACT, SCENE {
voice-family: narrator;
stress: 20;
richness: 90;
cue-before: url("ping.au")
}
.narrator { pause: 20ms;
cue-before: url("pop.au");
cue-after: url("pop.au");
azimuth: 30deg;
elevation: above }
ACT { pause: 30ms 40ms } /* pause-before: 30ms;
pause-after: 40ms */
SCENE { pause-after: l0ms } /* pause-after: l0ms */
SCENE { cue-before: url("bell.aiff");
cue-after: url("dong.wav") }
MOOD.sad { play-during: url("violins.aiff") }
MOOD.funereal { play-during: url("harp.wav") mix }
MOOD.quiet { play-during: none }
LINE.narrator { azimuth: behind } /* 180deg */
LINE.part.romeo { voice-family: romeo, male }
LINE.part.juliet { voice-family: juliet, female }
LINE.part.hercules { azimuth: center-left }
LINE.part.richard { azimuth: right }
LINE.part.carmen { volume: x-soft }
LINE.part.musel { elevation: 60deg }
LINE.part.muse2 { elevation: 30deg }
LINE.part.muse3 { elevation: level }
13.7.1 说话属性
speak（说话）属性确定是否用声音说出文本。如果是，应如何说。如果speak为normal值，则使用最佳的语音合成来说出此段文本。如果speak值为spell-out，则一个字母一个字母地拼出文本，这对于不常用或语音合成器可能无法处理的外来语来说，或许是很有用的。缺省值是none（例如，只是视觉上显示内容，而不管语言合成）。
13.7.2 音量属性
volume（音量）属性控制语音合成器讲话声音的平均音量。这是模拟语音声波中的中等值，但只是平均来说。音量为50的高反射的语音峰值可能达到75。音量最小值为0，最大音量为100。音量中，也可以使用百分比值，使用下面的六个关键字也可达到同样的目的：
1．silent：无声音
2．x-soft：0，最小的可听量
3．soft：大约为25%
4．medium：大约为50%
5．loud：大约为75%
6．x-loud：100%，最大舒适度的听力级别
13.7.3 暂停属性
Pause（暂停）属性在听觉上等价于逗号，可用于提供戏剧色彩，或有助于将每位说话人的声音分开。在CSS2中，使用pause、pause-before和pause-after属性来设置暂停。
pause-before属性指定语音合成器在说出一元素的内容之前应暂停的时间长度。pause-after属性指定语音合成器在说出一元素的内容之后应暂停的时间长度。这些都可以用绝对时间或语速属性的百分数来设置。pause属性是设置pause-before和pause-after属性的简略属性。当使用两个值时，第一个值用于pause-before，第二个值用于pause-after。当只给出一个值时，此值可应用于这两个属性。例如：
SCENE { pause-after: 10ms }
/* pause-before: 20ms: pause after: 20ms */
.narrator { pause: 20ms }
/* pause-before: 30ms; pause-after: 40ms */
ACT { pause: 30ms 40ms }
13.7.4 提示属性
cue（提示）属性是听得见的线索，是用来提醒听众将要发生或刚刚发生的特定事件。每个提示属性都指定某个元素说出之前或之后将要播放的一个声音文件的URL。cue-before属性在读出元素之前就播放声音。cue-after属性在读出元素之后才播放声音。
cue属性是设置cue-before和cue-after属性的简略属性。当使用两个值时，第一个值用于cue-before，第二个值用于cue-after。当只给出一个值时，此值可应用于这两个属性。例如：
ACT, SCENE { cue-before: url("ping.au") }
.narrator { cue: url("pop.au") }
SCFNF { cue before: url("bell.aiff");
cue after: url("dong.wav") }
13.7.5 同期播放属性
play-during（同期播放）属性指定一边说出元素内容一边播放背景声音。此属性的值为声音文件的URL。也可以把mix和repeat关键字之一或全部加入到此值中。mix告诉语音合成器将在父元素的play-during声音中形成混合音。repeat值告诉语音合成器连续不断地循环放音，直至整个元素说完为止。缺省值为none。
13.7.6 空间属性
spatial（空间）属性指定声音好像出自于何处。例如，可以是在3英尺外的壕沟里，或在100英尺外的悬崖上读出文档的。当然，这受到语音合成器和音频功能的限制。由于无法预先确定文档读者所使用的喇叭的数量和位置，所以这些属性只确定所期望的最终结果。作为文档的作者，实际上无法强制声音来自某个特定的方向，这与保证读者确有显示器是不一样的。
13.7.6.1 方位角属性
azimuth（方位角）属性控制发自声音的水平角度。当使用好的立体声喇叭收听信号时，好像能听见横向声音。azimuth属性与这类立体系统一起使用，以形成让人听到的声音的角度。当使用双耳式耳机或五喇叭家庭影院设备以形成全环绕的声音系统时，azimuth属性就非常引人注目。
azimuth可被指定为-360° 到360° 之间的任一角度值。0deg值表示声音是从听众的前方直接传来的（-360deg和360deg具有同样的效果）。180deg值表示声音是从听众的后方直接传来的（在CSS术语中，deg代替了更普通的 ° 度符号）。角度是以听众正面的顺时针方向计算的。还可以使用下列九个关键词中的一个，来指定方位角的角度。
1．center：0deg
2．center-right：20deg
3．right：40deg
4．far-right：60deg
5．right-side：90deg
6．left-side：270deg
7．far-left：300deg
8．left：320deg
9．center-left：340deg
可以将关键字behind加到这些值中的任何一个中，以设置180deg减正常值的位置。例如，left behind与l80deg - 320deg = -140deg或220deg的意义是一样的。
leftwards的值将声音相对于当前角度再向左移动20度。可理解为将声音反时针方向旋转。所以即使声音已经处在听众的后面，也将以反时针方向继续移动到"左边"。rightwards值将声音从当前角度向右（顺时针方向）再移动20度。
13.7.6.2 高度属性
elevation（高度）属性控制喇叭距听众位置的表观高度。此高度可指定为-90° 至90° 的任一角度，也可为下列五个关键字之一：
1．below -90deg
2．level 0deg
3．above 90deg
4．higher 处于当前高度上方10deg（这对继承是很有用的）
5．lower 处于当前高度下方10deg（这对继承是很有用的）
13.7.7 音质属性
通过调节语速、所使用的声系、语调（pitch）和声音的激昂程度，合成器声音的各个特性都可控制。
13.7.7.1 语速属性
speech-rate（语速）属性指定语音合成器的说话速率，以每分钟平均大小的单词的近似数值来表示。可提供某个整数或下列五个关键字之一：
1．x-slow：每分钟80个单词
2．slow：每分钟120个单词
3．medium：每分钟180至200个单词
4．fast：每分钟300个单词
5．x-fast：每分钟500个单词
还可以使用faster关键字，以使父元素的速率每分钟增加40个单词，或使用slower关键字，以使父元素的速率每分钟减少40个单词。
13.7.7.2 声系属性
voice-family（声系）属性是以逗号分开的、区分优先顺序的声系名称的一组列表，而声系名称选择用于阅读文档文本的声音。它很像第12章讨论过的字族属性，但它关心的是声音而不是字样。
通常的声音值有male、female和child。与字体名一样，所指定的名称也是多种多样，包括Agnes、Bruce、Good News、Hysterical、Victoria、Whisper等等。如果这些名称不符合标识符的语法规则或是由多个单词组成的话，那么就必须用引号括起来。例如：
LINE.part.romeo { voice-family: Bruce, "Good News", male }
13.7.7.3 语调属性
pitch（语调）属性指定语音合成器用于特殊类型对象的频率。在某种程序上，它控制所发的声音是男声还是女声。但是，更好的方法是使用适当的声系。此值以赫兹（hertz，每秒周期数）为单位。女声约为120Hz，而一般的男声差不多为200Hz。也可使用下面的关键字来调节语调：
1．x-low
2．low
3．medium
4．high
5．x-high
这些关键字的精确频率狄览涤谟没У幕肪澈脱≡竦纳簟？墒牵瑇-low总是比low低，而后者又总是比medium低，依次类推。
13.7.7.4 语调范围属性
pitch-range（语调范围）属性指定以喇叭平均语调表示的可接受的变化范围，其数值为0至100之间。它控制语音合成使用的声音的变形和变调。值为0时，形成一平坦的单音，而值为50时，则为正常音，值在50以上时，异常兴奋的声音。
13.7.7.5 重音属性
stress（重音）属性指定断言或强调的程度，常用于演讲，缺省值为50。这种特性的值和结果对正在说的各种语言具有不同的效果。当使用语言（如英语）来强调句子的作用时，可选择主、次和第三强调点来控制语音的变化，以将这种语音的变化应用于此句中的不同地方。
13.7.7.6 激昂程度属性
richness（激昂程度）属性指定语音合成器使用的声音的"鲜明度"。声音越激昂，其传播能力就越好。语调平缓的声音不会传得很远，这是因为其声波不如激昂的声那样深沉。此值为1和100之间的一个数值，缺省值为50。此值越高，所产生的声音传播得就越好；而此值越低，就会获得更柔软的声音，更容易听到。
13.7.8 话音属性
这些属性控制语音合成器如何解释标点符号和数字。有两个属性：speak-punctuation和speak-numeral。
13.7.8.1 发标点符号音属性
在缺省的情况下，标点符号是逐字说出的。对于诸如“The cat, Charm, ate all of his food."这样的句子，读作"The cat comma Charm comma ate all of his food period"。但是，可设置speak-punctuation属性为none，从而不说出任何标点符号。可是将有暂停现象，就像是真实说话的声音一样。例如，"The cat <pause> Charm <pause> ate all of his food <silence>”。
13.7.8.2 发数字音属性
在缺省的情况下，数字以完整的字符说出来。例如，数字102将读成"one hundred and two"。可是，如果将speak-numeral属性设置为digits，那么，将分别说出每个数字原有格式，如one zero two。将speak-numeral属性设置为continuous，就会恢复到缺省状态。如果speak-numeral设置为none，那么将不会说出数字。
13.8 本章小结
本章涉及到了CSS2的功能以及如何实现。在本章中，学习了以下内容：
* CSS2几乎为CSS1的超集，尽管存在着一些差别（包括缺省的显示类型为inline，而不是block）。
* Internet Explorer 5和Mozilla只是或多或少地执行CSS2，所以不要指望CSS2的大多数功能都能完美实现。
* CSS2已经扩充了各种选择符（其中包括通用选择符、子选择符、后代选择符以及同属选择符），通过这些选择符就能把指定的属性应用于特定的元素中。
* 已开发的新的@rules（包括@charset、@page和@font-face），使文档的作者可对打印文档进行更多的控制。
* CSS2有七个新的伪类（包括:first-child和:hover），可用来选择具有共同部分的元素，但不必具有相同的类型。
* CSS2有两个新的伪元素：:after和:before，可使用它们向文档插入内容。
* CSS2增加了显示属性的应用，将显示元素的值组合在一起，作为所有的表格部分来显示元素，不显示任何内容（none），也可作为compact或run-in对象来显示元素。
* 系统颜色和系统字体能够用来在XML应用程序中创建界面，而这种界面更加匹配各自客户计算机上全部的系统设置。
* CSS2增加了音频属性，用以描述语音、音量、暂停、提示、发音特性以及在其他声音中播放声音、及其应来自于何处的规范。
与CSS1一样，CSS2仍有许多局限性，最明显的就是缺乏Web浏览器的充分支持，但这会随时间的推移而发生变化。XSL到目前为止仍是用于XML文档的最佳的样式单语言。在下一章中，将探讨XSL变换，看看我们还能前进多远。
