第13章级联样式单[二]

2022-07-15 80酷酷网 80kuku.com

XML教程

级联样式单级别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的任何元素匹配

匹配带有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"?>

<AUTHOR>William Shakespeare</AUTHOR>

<TITLE>Sonnet 21</TITLE>

<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>

<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>

<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>

<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指定的规则来匹配字体。