第三部分 样式语言

本部分包括以下各章：

第12章——级联样式单级别1

第13章——级联样式单级别2

第14章——XSL变换

第15章——XSL格式化对象

第12章 级联样式单级别1

对于将诸如粗体和Helvetica样式应用于特定的XML元素来说，CSS是一种非常简单、易懂的语言。任何常用的字处理软件都具有CSS支持的大多数样式。例如，可选择字体、字体的粗细、字号、背景颜色、各种元素的间距、元素周围的边框等等。但是，所有的样式信息并不在文档之内存储，而是放置在一种称之为样式单(style sheet)的独立文档中。仅仅改变样式单就可以以多种不同方式格式化一个XML文档。不同的样式单可用于不同的目的——打印、Web、展示和其他用途——所需要的只是适用于指定媒体的样式，并且无需改变文档中的任何内容。

本章的主要内容如下：

• 什么是CSS？
• 如何将样式单与文档关联
• 怎样选择元素
• 继承父字体的大小
• 级联过程
• 在 CSS 样式单中使用注释
• CSS单位
• 块、内联和列表项元素
• 字体属性
• 颜色属性
• 背景属性
• 文本属性
• 框属性

12.1 什么是CSS？

级联样式单(Cascading Style Sheets，以下简称CSS)是1996年作为把有关样式属性信息如字体和边框加到HTML文档中的标准方法而提出来的。但是，CSS与XML结合的确比与HTML结合得更好，因为HTML承担着CSS标志和HTML标志之间向后兼容的任务。例如，要正确地支持CSS的nowrap属性就要求废除HTML中非标准的但又是经常使用的NOWRAP元素。由于XML元素没有任何预定义的格式规定，所以不会限制何种CSS样式只能用于何种元素。

一个CSS样式单就是一组规则(rule)。每个规则给出此规则所适用的元素的名称，以及此规则要应用于那些元素的样式。例如，考察清单12-1，它是一首诗的CSS样式单。此样式单有五个规则。每个规则有一个选择符——规则所应用的元素的名称——和一组适用于此元素实例的属性。第一个规则说明POEM元素应以块的形式(Display：block)显示其内容。第二个规则说明TITLE元素应以16磅(font-size：16pt)、粗体(font-weight：bold)将其内容显示在块中(Display：block)。第三个规则说明POET元素应通过自身显示在块中(Display：block)，并且与紧随其后的下一块相距10个像素(margin-bottom：10px)。第四个规则与第三个相同，所不同的只是前者应用于STANZA元素。最后，第五个规则只简单地说明VERSE元素也是显示在自己的块中。

清单12-1：用于诗作的CSS样式单

POEM { display: block }

TITLE { display: block; font-size: 16pt; font-weight: bold }

POET { display: block; margin-bottom: 10px }

STANZA { display: block; margin-bottom: 10px }

VERSE { display: block }

在1998年，W3C公布了一个修订的、详述的CSS规范，称之为CSS2(CSS2)。同时，他们又把原来的CSS改名为CSS1(CSS1)。CSS2几乎是CSS1的超集，只有少部分不同，当遇到这些不同处时，我将给出注解。换句话说，CSS2是在CSS1的基础上增添了音频样式单、媒体类型、特性选择符和其他新的功能。因此，本章涉及到的几乎每个例子既适用于CSS1，也适用于CSS2。在下一章中，将把CSS2看作CSS1的扩充来加以介绍。

Netscape Navigator 4.0和Internet Explorer 4.0及5.0支持CSS1的各部分。遗憾的是，对同一部分往往并非同时支持。Mozilla 5.0被认为对CSS1和大多数CSS2提供非完全的支持。Internet Explorer 5.0比Internet Explorer 4.0做得更好，可是它仍失去一些主要部分，特别是有关框模型和伪元素的部分。我将试图指出某种浏览器有特别严重问题的地方。

12.2 样式单与文档的链接

要真正地使清单12-1中的样式单有意义，就得编写一个使用该样式单的XML文档。清单12-2是用XML标记的来自于Walt Whitman的诗集名著Leaves of Grass中的一首诗。第二行是<?xml-stylesheet?>处理指令，此指令通知Web浏览器加载本文档，以便将在文件poem.css中找到的样式单应用于本文档。图12-1显示了加载到Mozilla早期a 版本中的本文档。

清单12-2：用XML作出标记的Darest Thou Now O Soul(Walt Whitman的诗)

<?xml version=1.0?>

<?xml-stylesheet type=² text/css² href=² poem.css² ?>

<POEM>

<TITLE>Darest Thou Now O Soul</TITLE>

<POET>Walt Whitman</POET>

<STANZA>

<VERSE>Darest thou now O soul,</VERSE>

<VERSE>Walk out with me toward the unknown region,</VERSE>

<VERSE>Where neither ground is for the feet nor

any path to follow?</VERSE>

</STANZA>

<STANZA>

<VERSE>No map there, nor guide,</VERSE>

<VERSE>Nor voice sounding, nor touch of

human hand,</VERSE>

<VERSE>Nor face with blooming flesh, nor lips,

are in that land.</VERSE>

</STANZA>

<STANZA>

<VERSE>I know it not O soul,</VERSE>

<VERSE>Nor dost thou, all is blank before us,</VERSE>

<VERSE>All waits undream’d of in that region,

that inaccessible land.</VERSE>

</STANZA>

<STANZA>

<VERSE>Till when the ties loosen,</VERSE>

<VERSE>All but the ties eternal, Time and Space,</VERSE>

<VERSE>Nor darkness, gravitation, sense,

nor any bounds bounding us.</VERSE>

</STANZA>

<STANZA>

<VERSE>Then we burst forth, we float,</VERSE>

<VERSE>In Time and Space O soul,

prepared for them,</VERSE>

<VERSE>Equal, equipt at last, (O joy! O fruit of all!)

them to fulfil O soul.</VERSE>

</STANZA>

</POEM>

在<?xml-stylesheet?>处理指令中的type属性是正在使用的MIME类型的样式单。对CSS来说，其值是text/css，对XSL来说，则是text/xsl。

CSS2将在第13章中讨论。而XSL将在第14和15章中讲述。

图12-1 Mozilla显示的Darest Thou Now O Soul

<?xml-stylesheet?>处理指令中的href属性值是一个URL，通常是相对值，指明在何处可找到样式单。如果样式单没有找到，Web浏览器很可能使用其缺省的样式单，不过有些浏览器可能会报告一条错误信息。

也可以将同一个样式单用于许多文档，人们通常的确就是这么做的。于是，把样式单放在Web服务器上的某个主要位置成了人们的通用方法，所有的文档都会在此位置引用这些样式单；一个便利的位置就是Web服务器根目录上的样式目录。

<?xml-stylesheet type="text/css" href="/styles/poem.css"?>

甚至还可以使用指向另一个Web站点上的样式单的绝对URL值，虽然这样做不可避免地会使站点依赖于外部Web站点的状态。

<?xml-stylesheet type="text/css"

href="http://metalab.unc.edu/xml/styles/poem.css"?>

甚至也可以使用多个<?xml-stylesheet?>处理指令，以便应用不同样式单中的规则。例如：

<?xml version="1.0"?>

<?xml-stylesheet type="text/css" href="/styles/poem.css"?>

<?xml-stylesheet type="text/css"

href="http://metalab.unc.edu/xml/styles/poem.css"?>

<POEM>

¼

样式单与DTD或多或少地成正交关系。带样式单的文档可能有也可能没有DTD，而带DTD的文档也可能有或没有样式单。但是，DTD常常充当便于使用的必须为其提供样式规则的元素列表。

在本章以及下面几章中，大多数例子都要使用结构完整、但不合法的文档。不使用DTD会使所举的例子更短、相关的部分更加明显。但是实际上，大多数与样式单相链接的文档很可能是合法的带DTD的文档。

12.3 选择元素

在CSS规则中，有个部分是用来指定CSS规则适用于哪个元素的，此部分称为选择符(selector)。最普通的选择符就是元素的名称；例如，下面规则中的TITLE：

TITLE ( display: block; font-size: 16pt; font-weight: bold )

可是，选择符还可指定多个元素、带有特定的CLASS或ID特性的元素以及与其他元素相关的出现在特定上下文中的元素。

在CSS1中，无法做到的一件事就是选择带有特定特性名的元素或除预定义的CLASS和ID特性之外的值，为此，就得使用CSS2或XSL。

12.3.1 成组选择符

如果想把一组属性应用于多个元素，可以用逗号将选择符中的所有元素分开。例如，在清单12-1中，POET和STANZA都是被设定为10个像素页边距的块显示。于是，可把这两个规则如下列方式组合起来：

POET, STANZA { display: block; margin-bottom: 10px }

此外，多个规则也可将样式作用于一个特定的元素。所以可以将一些标准的属性组合成带有许多选择符的一个规则中，然后使用更多的指定规则来把定制格式作用于所选元素。例如，在清单12-1中，所有的元素都是以块显示的方式列出来的。这样就可以组合成一个规则，而用于POET、STANZA和TITLE元素的其他格式化放在各自的规则中，于是：

POEM, VERSE, TITLE, POET, STANZA { display: block }

POET, STANZA { margin-bottom: 10px }

TITLE { font-size: 16pt; font-weight: bold }

12.3.2 伪元素

CSS1支持两种伪元素(pseudo-element)，它们指出文档中通常不能作为独立的元素来看待的部分，但常常需要独立样式。通常伪元素是元素的第一行和首字母。

Internet Explorer 5.0的早期测试版和Internet Explorer更早版本都不支持这些伪元素。Mozilla 5.0早期的测试版的确支持，但仅用于HTML。

12.3.2.1 强调首字母

要将一个元素的首字母与此元素中其他字母分别格式化的最通用手段就是插入一个下沉的大写字母，如图12-2所示。为此，需要编写一条以元素名标识的规则，紧接此元素名后写入:first-letter。例如：

CHAPTER:first-letter { font-size: 300%;

float: left; vertical-align: text-top }

正像在图12-2中看到的那样，尽管词首的大写字母的大小可以调整，但下沉大写字母(float:left; vertical-align:text-top)的“下沉”部分在Mozilla 5.0的早期测试版和Internet Explorer 5.0中似乎仍行不通。

图12-2 在首字母伪元素上的下沉大写字母以及在首行伪元素上使用的小型大写字母

12.3.2.2 强调首行

一个元素的第一行也常常被格式化为与此元素文本的其他部分不同。例如，可用小型的大写字母进行打印，而不是以通常的主体文本，如图12-2所示。可以将:first-line选择符加到元素的名称上，以创建只适用于此元素第一行的规则。例如：

CHAPTER:first-line { font-variant: small-caps }

伪元素到底选择了什么内容依赖于当前窗口的布局。如果窗口较大，因而在第一行中单词也较多，那么，以小型大写字母显示的单词也就越多。如果窗口变小，或字体变大，以致造成文本不同程度的折行，从而使第一行的单词变得较少，那么折行到下一行中的单词就不再以小型大写字母的形式显示了。因此，在文档实际显示出来之后，才能确定first-line伪元素包含哪些字母。

12.3.3 伪类(pseudo-classe)

有时候，可能想对同一个类型的两个元素设计成不同的样式。例如，有一个段落可能是粗体的，而另一个段落则为正常粗细的字体。要达到此目的，可以把CLASS特性加到两个元素之一上，然后为给定的CLASS中的元素编写一个规则。

例如，以含有许多CITATION元素的一个书目为例。在清单12-3中显示了一个示例。现假定要将Alan Turing文章中的所有引用着成蓝色，同时又不改变其他的引用。为此，必须将带有指定值(TURING也行)的CLASS属性加到要着色的元素中。

清单12-3：有三个CITATION元素的XML书目

<?xml version="1.0" standalone="yes"?>

<?xml-stylesheet type="text/css" href="biblio.css"?>

<BIBLIOGRAPHY>

<CITATION CLASS="HOFSTADTER" ID="Cl">

<AUTHOR>Hofstadter, Douglas</AUTHOR>.

"<TITLE>How Might Analogy, the Core of Human Thinking,

Be Understood By Computers?</TITLE>"

<JOURNAL>Scientific American</JOURNAL>,

<MONTH>September</MONTH>

<YEAR>1981</YEAR>

<PAGES>18-30</PAGES>

</CITATION>

<CITATION CLASS="TURING" ID="C2">

<AUTHOR>Turing, Alan M.</AUTHOR>

"<TITLE>On Computable Numbers,

With an Application to the Entscheidungs-problem</TITLE>"

<JOURNAL>

Proceedings of the London Mathematical Society</JOURNAL>,

<SERIES>Series 2</SERIES>,

<VOLUME>42</VOLUME>

(<YEAR>1936</YEAR>):

<PAGES>230-65</PAGES>.

</CITATION>

<CITATION CLASS="TURING" ID="C3">

<AUTHOR>Turing, Alan M.</AUTHOR>

"<TITLE>Computing Machinery &amp; Intelligence</TITLE>"

<JOURNAL>Mind</JOURNAL>

<VOLUME>59</VOLUME>

(<MONTH>October</MONTH>

<YEAR>1950</YEAR>):

<PAGES>433-60</PAGES>

</CITATION>

</BIBLIOGRAPHY>

CSS1中令人讨厌的地方之一是使得混合内容更为必要。清单12-3中有很多标点符号，但它们并非真正是内容中的一部分；例如，在YEAR元素两边的圆括号，以及TITLE元素两边的引号。这些都是表达元素，本应为样式单的一部分。CSS2允许使用其他文本，如插入到元素之前或之后的标点符号。

清单12-4中的样式单使用一个CLASS选择符来将TURING类中的元素着成蓝色。

IE 5支持CLASS属性，但Mozilla的里程碑式的第三版之前的版本不支持此属性。直到Mozilla正式发行后，有可能支持CLASS属性。

清单12-4：将TURING类中的元素着成蓝色的样式单

BIBLIOGRAPHY { display: block }

CITATION.TURING { color: blue }

CITATION { display: block }

JOURNAL { font-style: italic }

在一个有效的文档中，CLASS属性必须声明为已格式化的元素的可能特性。例如，下面是用于清单12-3书目的DTD：

<!ELEMENT BIBLIOGRAPHY (CITATION*)>

<!ATTLIST CITATION CLASS CDATA #IMPLIED>

<!ATTLIST CITATION ID ID #REOUIRED>

<!ELEMENT CITATION ANY>

<!ELEMENT AUTHOR (#PCDATA)>

<!ELEMENT TITLE (#PCDATA)>

<!ELEMENT JOURNAL (#PCDATA)>

<!ELEMENT MONTH (#PCDATA)>

<!ELEMENT YEAR (#PCDATA)>

<!ELEMENT SERIES (#PCDATA)>

<!ELEMENT VOLUME (#PCDATA)>

<!ELEMENT PAGES (#PCDATA)>

一般地说，我不推荐这种方法。如果可能，你应尝试把附加的元素标记(markup)加到文档中，而不依靠CLASS特性。但是，当所选择的信息不太方便地映射到特定的元素中时，CLASS属性可能是必要的。

12.3.4 由ID来选择

有时候，特殊的元素需要特殊的样式。这时，就需要将规则准确地作用于该元素。例如，假定要将一张列表中的一个元素变成粗体，以与此同类进行对照，从而达到强调它的目的。在这种情况下，可编写作用于此元素ID特性的规则。以元素名为选择符，紧接在元素名后写上 # 和ID特性值。

例如，清单12-5是从清单12-3的书目中选择了ID C3的CITATION元素的样式单，此样式单使ID C3的元素(并且只有此元素)成为粗体。其他的CITATION元素取缺省粗细的字体。所有的CITATION元素都是以块的方式显示的，并且所有的JOURNAL元素都是斜体的。

清单12-5：形成ID C3粗体的CITATION元素的样式单

BIBLIOGRAPHY { display: block }

CITATION#C3 { font weight: bold }

CITATION { display: block }

JOURNAL { font style: italic }

IE 5支持ID选择符，Mozilla则支持用于HTML元素的ID选择符，但Mozilla第三版则不支持XML元素的ID选择符。等到正式发行时，Mozilla可能会完全支持ID选择符。

12.3.5 上下文的选择符

通常，元素的格式化依赖其父元素。可编写仅作用于在一个命名的父元素内找到的元素的规则。为此，可将父元素名称作为样式化的元素名的前缀。

例如，可以把PRE元素内的CODE元素显示成12磅的Courier字体。可是，如果文档的主体文本是以10磅Times字体写成的，那么与其他主体文本进行内联的CODE元素就可能需要以10磅Courier字体显示。下面的这段规则就可以正确地完成这项任务：

BODY { font family: Times, serif; font-size: 10pt }

CODE { font-family: Courier, monospaced; font-size: 10pt }

PRE { font size: 12pt }

PRE CODE { font-size: 12pt }

此段规则说明在BODY元素内，字体是10磅Times。但是，在CODE元素内，字体变成Courier，但仍然是10磅。而如果CODE元素是在PRE元素的内部，则字体就变成了12磅。

可将此推广到父元素的父元素、父元素的祖元素等等。例如，下列的规则说明在DATE元素内的YEAR元素里的NUMBER元素应该以等宽字体的形式显示。

DATE YEAR NUMBER { font-family: Courier, monospaced }

实际上，这种特性级是很少需要的。在看来确实需要这样做的情况下，通常可以重写样式单，以便更多地依赖于继承、级联和相对单位，而很少依赖于对格式化的精确规格。

12.3.6 STYLE特性

当手工编创文档时，人们常常想把特定的样式一次性地应用于一个特定的元素而无需为此文档编辑样式单。的确，对无法改变的文档，很可能想忽略某个标准的缺省的样式单。将STYLE特性加到元素中就可做到这一点。此特性值是用于此元素的一组以分号隔开的样式属性。例如，下面的CITATION使用STYLE特性来使自身变为粗体：

<CITATION CLASS="TURING" ID="C3" STYLE="font-weight: bold">

<AUTHOR>Turing, Alan M.</AUTHOR>

"<TITLE>Computing Machinery &amp; Intelligence</TITLE>"

<JOURNAL>Mind</JOURNAL>

<VOLUME>59</VOLUME>

(<MONTH>October</MONTH>

<YEAR>1950</YEAR>):

<PAGES>433-60</PAGES>

</CITATION>

如果在STYLE特性中定义的属性与样式单中定义的属性相冲突，那么特性中定义的属性将优先执行。

应尽可能地避免使用STYLE特性。如果把样式信息放在独立的样式单中，那么文档将会整洁得多，并且更易于维护。但是，有时STYLE特性是如此简单与方便，以致难以将其忽略。

其次，如果在有效的文档中使用这种方法，将需要在ATTLIST声明语句中为设计样式的元素声明STYLE特性。例如：

<!ELEMENT CITATION ANY>

<!ATTLIST CITATION CLASS CDATA #IMPLIED>

<!ATTLIST CITATION ID ID #REQUIRED>

<!ATTLIST CITATION STYLE CDATA #IMPLIED>

IE 5支持STYLE特性，Mozilla支持用于HTML元素的STYLE特性，但Mozilla第三版不支持XML元素的STYLE特性。等到Mozilla正式发行时，它很可能会完全支持STYLE特性。

12.4 继承性

CSS不要求为文档中各元素的每个可能的属性明确地定义规则。例如，如果没有指定元素的字号的规则，那么此元素就会继承其父元素的字号。如果没有指定元素颜色的规则，那么此元素也将继承其父元素的颜色。同样对大多数CSS属性也是如此。事实上，唯一不被继承的属性就是背景和边框属性。

例如，考虑下列这些规则：

p { font-weight: bold;

font size: 24pt;

font-family: sans-serif }

BOOK { font-style: italic; font-family: serif}

现在来考察下面这个XML文档片段：

<P>

Michael Willhoite s <BOOK>Daddy s Roommate</BOOK> is

the #10 most frequently banned book in the U.S. in the 1990s.

</P>

尽管BOOK元素没有被明确地赋以font-weight或font-size属性，但它仍以24磅粗体显示，因为它是P元素的子元素。它还是斜体的，因为在它自己的规则中被指定过了。BOOK继承了其父元素P的font-weight和font-size。如果此后在文档中BOOK元素出现在某个其他元素的上下文中，那么它将继承此元素的font-weight和font-size。

font–family就有点难以把握，因为P和BOOK为此属性声明了相互矛盾的值。在BOOK元素内部，由BOOK声明的font–family处于优先位置。在BOOK元素外面，使用了P的font–family。所以，Daddy s Roommate是以serif(衬线)字体显示的，而most frequently banned book则是以sans serif(非衬线)字体显示的。

通常都想使子元素继承其父元素的格式化。所以，不事先指定任何元素的格式化是很重要的。比如，假设我像下列的那样已声明BOOK以12磅的字体输出：

BOOK { font-style: italic; font-family: serif; font size: 12pt }

那么，此例就会获得如图12-3所示的显示结果：

图12-3 写成12磅字号的BOOK元素

可以使用专门的规则改正图中的情况，这个专门规则使用上下文选择符在P元素内挑选出BOOK元素，但仅仅继承父元素的font-size则更容易。

有一种方法可以避免此类问题，而同时又保持对各自元素大小的某种控制，这就是使用相对单位如em和ex，而不使用如磅、十二点活字、英寸、厘米和毫米这样的绝对单位。em是指在当前字体中字母m的宽度。ex是指在当前字体中字母x的高度。如果字体变大，则以em和ex测定的所有的尺寸都会随之发生变化。

使用百分比单位对有些属性也会达到相似的结果。例如，下列的规则设置FOOTNOTE_NUMBER元素的字号为其父元素字号的80%。如果父元素的字体增加或减小，那么FOOTNOTE_NUMBER的字号也会相似地成比例变化。

FOOTNOTE_NUMBER { font-size: 80% }

将百分比精确地定位于多大，这要根据属性而定。在vertical-align属性中，此百分比就是元素本身的行高。但页边距属性中，百分比就是此元素的宽度百分比

12.5 级联过程

将一个以上的样式单与一个文档相连接是可能的。例如，一个浏览器可能有一个缺省的样式单，把此缺省的样式单加入到设计者为此页提供的样式单中。在此情况下，有可能有多个规则作用于一个元素，这些规则很可能会发生冲突。于是，确定以何种顺序应用这些规则就显示得尤其重要。此过程称为级联(cascade)，级联样式单在这个过程中获得自己的名称。

CSS样式单与XML文档相连接有几种方法：

1．把<?xml-stylesheet?>处理指令包括在XML文档中。

2．使用@import，样式单本身可以导入其他样式单。

3．用户可以使用浏览器的内部运行机制为文档指定一个样式单。

4．浏览器为大多数属性提供缺省的样式。

12.5.1 @import指令

样式单中包括@import指令来加载保存在其他文件中的样式单。可使用绝对或相对的URL来标识导入的样式单。例如，

@import url(http://www.w3.org/basicstyles.css);

@import url(/styles/baseball.css);

@import指令必须出现在样式单的开头并在任何规则之前。导入样式单的样式单中的规则总要覆盖被导入的样式单中的规则。被导入的样式单以它们导入的顺序级联排列。禁止循环导入(如，poem.css导入stanza.css，而stanza.css又要导入poem.css)。

12.5.2 !important声明

在CSS1中，作者规则覆盖读者规则，除非读者规则把!important声明与属性相连接。例如，下列的规则说明TITLE元素应该着成蓝色，即使文档的作者要求是其他颜色。另一方面，只要作者规则不冲突，font-family应该为serif。

TITLE { color: blue !important font-family: serif }

但是，作者规则也可以声明为重要的。在此情况下，作者规则覆盖读者规则。

这是一种很坏的观念。读者总该有权选择自己的浏览方式。不过，要使写出的样式单同时适合于下列几种人，则是不可能做到的：使用彩色显示器和黑白显示器的人们；使用21英寸显示器或电视机与使用手持机(PDA)的人们；视觉健康与视觉有缺陷的人们。许多Web设计者都指定了太多的样式，只能生成出系统完全无法读取的、与原来不完全一致的网页。幸运的是，CSS2将这种优先权过程颠倒，以致读者规则决定最终的样式。

12.5.3 级联顺序

样式是从适用于一个元素的现有的样式规则中选择出来的。一般地，越专门的规则，优先权越高。例如，考察下面的这个片段：

<OUEVRE>

<PLAY ID=”x02” CLASS=”WILDE”>

The Importance of Being Earnest

</PLAY>

</OUEVRE>

最专门的规则就会优先。于是，通过其ID选择PLAY元素将优于使用其CLASS选择PLAY元素。使用其CLASS来选择PLAY元素的规则将先于包含在OUEVER元素中选择PLAY元素的规则。当然，如果不使用任何规则，将选择通用的PLAY规则。如果选择符不匹配，将使用从父元素那里继承来的值。如果从父元素那里没有继承任何值，就使用缺省值。

如果在给定的特征级中有多个规则，那么级联顺序按下列优先级决定：

1．作者标记为重要的声明。

2．读者标记为重要的声明。

3．作者未标记为重要的声明。

4．读者未标记为重要的声明。

5．样式单中的最近的规则。

应尽量避免依赖于级联顺序。指定尽可以少的样式，并且让读者浏览器的优选项处于主控地位，就会很少出现错误。

12.6 在CSS样式单中添加注释

可以在CSS样式单中包含注释。CSS注解类似于C语言的/* */注释，而不像XML和HTML的<! - ->注释。清单12-6显示了这种注解的使用方法。不过，本样式单不能把样式规则应用于元素。它以英语来描述样式规则可能出现的结果。

清单12-6：含有注释的诗的样式单

/* Work around a Mozilla bug */

POEM { display: block }

/* Make the title look like an Hl header */

TITLE { display: block; font size: 16pt; font-weight: bold }

POET { display: block; margin-bottom: 10 }

/* Put a blank line in-between stanzas,

only a line break between verses */

STANZA { display: block; margin-bottom: 10 }

VERSE { display: block }

CSS比XML DTD、Java、C或Perl更容易理解，所以不像其他语言那样需要使用注释。可是，包含注释也并非不好。使用注释可有助于那些想要弄明白所写的样式单的意义，而无法直接提出问题的人。

12.7 CSS中的单位

CSS属性具有名称和值。表12-1列举了一些属性名及其值。

CSS的所有名称都是关键字。但是，值则千变万化。有些值是关键字，如display:none中的none或border-style:solid中的solid；有些值是带有单位的数字，如margin-top:0.5in中的0.5in或font-size:12pt中的12pt；而另外还有一些值则为URL，如background-image: url(http://www.idgbooks.com/images /paper.gif)中的http://www.idgbooks.com /images/paper.gif)，或者为RGB颜色，如color:#CC0033中的#CC0033。不同的属性可以为不同的值，但是，一个属性只能为下列四种类型的值：

1．长度

2．URL

3．颜色

4．关键字

关键字随属性而变，但其他类型的值则与属性无关，保持定值。也就是说，长度值就是一个长度的长短，而不管其是哪个属性的值。如果知道如何指定一个边界的长度，也就知道如何指定页边距(margin)、贴边(padding)和图像的长度。语法的这种重用性使处理不同的属性变得容易一些。

表12-1 属性名和属性值的示例

12.7.1 长度值

在CSS中，长度是一种度量尺寸，用于宽度、高度、字号、字和字母间距、文本的缩排、行高、页边距、贴边、边框线宽以及许许多多的其他属性。可以用下列三种方法指定长度：

1．绝对单位

2．相对单位

3．百分比

12.7.1.1 长度的绝对单位

长度的绝对单位，似乎有点用词不当的感觉，因为在计算机屏幕上确实没有绝对的长度单位。将屏幕的分辩率从640´ 480改为1600´ 1200，就会改变计算机中的所有长度，包括以英寸和厘米为单位的长度。但是，CSS支持五种“绝对”长度单位(至少其字体不会发生变化)。表12-2列出了这五种长度的绝对单位。

表12-2 长度的绝对单位

长度是以数值来表示的，其后紧跟着表示长度单位的缩写字母：

长度单位的数值可能有小数点(如，margin-top:0.3in)。有些属性允许为负值，如-0.5in，但并非都如此；甚至有些属性往往限制其负长度值的大小。要使交叉浏览器具有最大的兼容性，最好避免使用负值。

12.7.1.2 长度的相对单位

CSS还支持下列三种长度的相对单位：

1．em：当前字体中字母m的宽度

2．ex：当前字体中字母x的高度

3．px：一个像素的大小(假设为方形像素；如今的普通显示器都使用方形像素，尽管几乎现在就要被丢进垃圾箱的有些旧PC显示器并非如此)

例如，下列规则设置PULLQUOTE元素的左右边为当前字体中字母m宽度的两倍，顶和底边为当前字体中字母x高度的1.5倍：

PULLQUOTE { border-right-width: 2em; border-left-width: 2em;

border-top-width: 1.5ex; border-bottom-width: 1.5ex }

使用em和ex的目的就是为所给的字体设置合适的宽度，而没有必要知道字体有多大。例如，在上面的规则中，不知道字体的大小，所以边界的准确宽度也不知道。在显示时，可通过比较当前字体中的m和x来确定。字体越大，所对应的em和ex也就越大。

以像素为单位的长度是相对于显示器上的像素(或许为方形)的高度和宽度。影像的宽度和高度经常是以像素给出的。

像素测量法通常不是个好方法。首先，像素的大小依分辩率变化较大。大多数资深用户都会将显示器设置成尽可能高的分辩率，从而导致像素太小，而无法阅读。

第二，在未来的十年中，200甚至300dpi分辩率的显示器将会普及起来，最终代替粗糙的每英寸72像素(给出或获得28像素)的德国事实标准，这个标准是1984年第一台Macintosh计算机以来盛行的。以非基于屏幕的单位(如em、ex、磅、十二点字和英寸)来指定度量的文档，可以进行转换。但是，使用像素级规格的文档，在高分辨率下浏览时，就会变得太小，无法阅读。

12.7.1.3 长度的百分比单位

最后，长度也可以用某一百分比来指定。一般地，它是某一属性当前值的百分比。例如，如果STANZA元素的字号为12磅，并且STANZA包括的VERSE的字号设置为150%，那么VERSE的字号将为18磅。

12.7.2 URL值

有三个CSS属性可以包括URL值：background-image、list-style-image和简略语属性list-style。此外，正如已看到的那样，@import规则也使用URL值。按字面理解，URL放置在url()内。允许使用所有的相对和绝对URL值。例如：

DOC { background-image: url(http://www.mysite.com/bg.gif) }

LETTER { background-image: url(/images/paper.gif) }

SOFTWARE { background-image: url(../images/screenshot.gif) }

GAME { background-image: url(currentposition.gif) }

可用单或双引号把URL括起来，当然这样做并非必要。例如：

DOC { background-image: url("http://www.mysite.com/bg.gif") }

LETTER { background-image: url("/images/paper.gif") }

SOFTWARE { background-image: url( ../images/screenshot.gif ) }

GAME { background-image: url( currentposition.gif ) }

出现在URL中的圆括号、逗号、空格字符、单引号(‘)和双引号(“)必须用反斜杠加以转义：‘\(’、‘\)’、‘\,’。在URL内出现的任何圆括号、省略语符号、空格或引号(可能常用于空字符)应由URL标准的%转义码来代替。于是：

space %20

, %2C

‘ %27

“ %22

( %2B

) %2C

CSS为这些字符(\(、\)、\,、\’和\”)定义自己的反斜杠转义码，但这些只会造成额外的混乱。

12.7.3 颜色值

CSS胜过HTML而被广泛采用的原因之一就是它能够将前景色和背景色应用于页面上的任何元素。使用颜色值的属性有color、background-color和border-color。

CSS提供了四种方式来指定颜色：名称、十六进制分量、十进制分量以及百分比。由名称定义颜色是最简单的。CSS理解从Windows VGA调色板中采用的16种颜色的名称：

当然，普通的彩色显示器可以显示几百万种以上的颜色。可以给颜色的红(red)、绿(green)和蓝(blue)(RGB)分量提供值，来指定这些颜色。由于CSS是假设为24位的颜色模式，所以每种黄色都赋为8位。一个8位无符号整数是0~255之间的数值。这个值可以是十进制也可以是十六进制RGB值。另外，它也可以用0%(0)到100%(255)之间的RGB百分数来指定。表12-3列出了一些可能的颜色以及十进制、十六进制和RGB百分数。

表12-3 CSS实例的颜色

许多人仍然使用256色的显示器。而且，有些颜色Mac和PC机上有着明显的不同。最可靠的颜色就是16个命名的颜色。

次可靠的颜色是只使用十六进制分量00、33、66、99、CC和FF(十进制分别为0、51、102、153、204和255；以百分数单位表示的0%、20%、40%、60%、80%和100%)组成的那些颜色。例如，33FFCC是“浏览器安全”色，因为红色成分是由两个3、绿色由两个F和蓝色由两个C组成的。

如果只使用三位数字来指定十六进制RGB颜色，那么，CSS就将数字加以重复；例如，#FC0实际上就是#FFCC00，#963实际上是#996633。

12.7.4 关键字值

关键字是CSS属性可能具有的四类值中变化最大的。通常，它们随属性而变，但相类似的属性一般支持类似关键字。例如，border-left-styee值可能是none、dotted、dashed、solid、double、groove、ridge、inset或outset任何一个关键字。border-right-style、border-top-style、border-bottom-style和border-style属性也可认为是下列值之一：none、dotted、dashed、solid、double、groove、ridge、inset或outset。各关键字将在有关各自属性的章节中讨论。

12.8 块、内联或列表项元素

从CCS1来看，所有的元素要么是块级元素、要么是内联元素、列表项元素或不可见。(CSS2添加了更多的可能性。)某个给定元素的类型是由其display属性设置的。此属性根据所给的关键字有四个可能的值：

block

inline

list-item

none

在CSS1中，display属性的缺省值是block，这意味着此项出现在它自己的方框中，并且以某种方式与其他元素分开。但在CSS2中，缺省值已变为inline，这意味着文本中元素的内容只是依次放在前一元素之后。大多数Web浏览器使用CSS2缺省值(inline)，而不是CSS1的缺省值(block)。

在HTML中，EM、STRONG、B、I和A都是内联元素。例如，可以把本段中的EM、STRONG、B、I和A认为是内联码元素。它们没有与其他文本分开。

块级元素通常使用换行与其他块级元素分隔开。在HTML中，P、BLOCKQUOTE、H1直至H6和HR，都是块级元素。在本页中看到的各段都是块级元素。块级元素可以包含内联元素或其他块级元素，但内联元素只能包含其他内联元素，而不能包含块级元素。

列表项元素是在其前有列表项标记的块级元素。在HTML中，L1是列表项元素。列表项元素在将下面章节中进一步讨论。

最后，当把元素的display属性设置为none时，就会使该元素不可见，即不在屏幕上加以显示。网页上的其他可见元素则不受影响。在HTML中，TITLE、META和HEAD可能有none值的display属性。在XML中，display:none对于元素中的元信息通常是有用的。

考察清单12-7，它是莎世比亚的《第十二夜》(Twelfth Night)剧本的大纲。它包括下列元素：

SYNOPSIS ACT_NUMBER

TITLE SCENE_NUMBER

ACT LOCATION

SCENE CHARACTER

只使用显示属性就可以使数据格式化。SYNOPSIS、TITLE、ACT和SCENE都是块级元素。ACT_NUMBER、SCENE_NUMBER、LOCATION和CHARACTER作为内联元素。清单12-8是一个非常简单的样式单，此样式单即可完成这一任务。

清单12-7：在XML中莎世比亚的《第十二夜》的一个大纲

<?xml version="1.0"?>

<?xml-stylesheet type="text/css" href="12-8.css"?>

<SYNOPSIS>

<TITLE>Twelfth Night</TITLE>

<ACT>

<ACT_NUMBER>Act 1</ACT_NUMBER>

<SCENE>

<SCENE_NUMBER>Scene 1</SCENE_NUMBER>

<LOCATION><CHARACTER>Duke Orsino</CHARACTER> s palace

</LOCATION>

</SCENE>

<SCENE>

<SCENE_NUMBER>Scene 2</SCENE_NUMBER>

<LOCATION>The sea coast</LOCATION>

</SCENE>

<SCENE>

<SCENE_NUMBER>Scene 3</SCENE_NUMBER>

<LOCATION><CHARACTER>Olivia</CHARACTER> s house

</LOCATION>

</SCENE>

<SCENE>

<SCENE_NUMBER>Scene 4</SCENE_NUMBER>

<LOCATION><CHARACTER>Duke Orsino</CHARACTER> s palace.

</LOCATION>

</SCENE>

<SCENE>

<SCENE_NUMBER>Scene 5</SCENE_NUMBER>

<LOCATION><CHARACTER>Olivia</CHARACTER> s house

</LOCATION>

</SCENE>

</ACT>

<ACT>

<ACT_NUMBER>Act 2</ACT_NUMBER>

<SCENE>

<SCENE_NUMBER>Scene 1</SCENE_NUMBER>

<LOCATION>The sea-coast</LOCATION>

</SCENE>

<SCENE>

<SCENE_NUMBER>Scene 2</SCENF_NUMBER>

<LOCATION>A street</LOCATION>

</SCENE>

<SCENE>

<SCENE NUMBER>Scene 3</SCENE-NUMBER>

<LOCATION><CHARACTER>Olivia</CHARACTER> s house

</LOCATION>

</SCENE>

<SCENE>

<SCENE_NUMBER>Scene 4</SCENE_NUMBER>

<LOCATION><CHARACTER>Duke Orsino</CHARACTER> s palace.

</LOCATION>

</SCENE>

<SCENE>

<SCENE_NUMBER>Scene 5</SCENE_NUMBER>

<LOCATION><CHARACTER>Olivia</CHARACTER> s garden

</LOCATION>

</SCENE>

</ACT>

<ACT>

<ACT_NUMBER>Act 3</ACT_NUMBER>

<SCENE>

<SCENE_NUMBER>Scene 1</SCENE_NUMBER>

<LOCATION><CHARACTER>Oljvia</CHARACTER> s garden

</LOCATION>

</SCENE>

<SCENE>

<SCENE_NUMBER>Scene 2</SCENE_NUMBER>

<LOCATION><CHARACTER>Olivia</CHARACTER> s house

</LOCATION>

</SCENE>

<SCENE>

<SCENE_NUMBER>Scene 3</SCENE_NUMBER>

<LOCATION>A street</LOCATION>

</SCENE>

<SCENE>

<SCENE_NUMBER>Scene 4</SCENE_NUMBER>

<LOCATION><CHARACTER>Olivia</CHARACTER> s garden

</LOCATION>

</SCENE>

</ACT>

<ACT>

<ACT_NUMBER>Act 4</ACT_NUMBER>

<SCENE>

<SCENE_NUMBER>Scene 1</SCENE_NUMBER>

<LOCATION><CHARACTER>Olivia</CHARACTER> s front yard

</LOCATION>

</SCENE>

<SCENE>

<SCENE_NUMBER>Scene 2</SCENE_NUMBER>

<LOCATION><CHARACTER>Olivia</CHARACTER> s house

</LOCATION>

</SCENE>

<SCENE>

<SCENE_NUMBER>Scene 3</SCENE_NUMBER>

<LOCATION><CHARACTER>Olivia</CHARACTER> s garden

</LOCATION>

</SCENE>

</ACT>

<ACT>

<ACT_NUMBER>Act 5</ACT_NUMBER>

<SCENE>

<SCENE_NUMBER>Scene 1</SCENE_NUMBER>

<LOCATION><CHARACTER>Olivia</CHARACTER> s front yard

</LOCATION>

</SCENE>

</ACT>

</SYNOPSIS>

清单12-8：用于剧本大纲的简单的样式单

SYNOPSIS, TITLE, ACT, SCENE { display: block }

图12-4显示的是使用清单12-8的样式单加载到Mozilla中的《第十二夜》大纲。注意，在清单12-8中，没有必要明确地指定ACT_NUMBER、SCENE_NUMBER、LOCATION和CHARACTER为内联元素。因为这是缺省值，除非有其他指定。display属性不能被子属性所继承。因而，仅因为SCENE是块级元素并不意味着其子元素SCENE_NUMBER和LOCATION也是块级元素。

12.8.1 列表项

如果为display属性选择了list-item值，就有三种其他属性可供设置。这些属性影响列表项如何显示。下面列出了这三个附加属性：

1．list_style_type

2．list_style_image

3．list_style_position

还有一个简略的list-style属性，使用它就可以在一个规则中设置所有的三个属性。

Internet Explorer 5.0和Mozilla 5.0第三版仍不支持display:list-item属性。Mozilla把列表项作为简单的块级元素来处理，而Internet Explorer则更差，它把列表项作为内联元素来处理。

图12-4 在Mozilla 5.0中显示的《第十二夜》大纲

list-style-type属性确定每个列表项前面的项目符号字符的性质，其可能值为：

disc

circle

square

decimal

lower-roman

upper-roman

lower-alpha

upper-alpha

none

缺省值为disc。例如，把清单12-9中的样式单应用到清单12-7的大纲中，就定义了ACT和SCENE为列表项。可是，ACT没有项目符号，而SCENE赋以方形的项目符号。

清单12-9：使用列表项的剧本大纲的样式单

SYNOPSIS, TITLE { display: block }

ACT { display: list-item; list-style-type: none }

SCENE { display: list-item; list-style-type: square }

12.8.1.2 list-style-image属性

同样，也可使用从文件中加载的点位图影像作为项目符号。为此，应设置list-style-image属性为影像的URL。如果list-style-image和list-style-type都被设置，那么，列表项前面就既放置影像也放置项目符号。但这情况很少见。清单12-10在各个场景前使用保存在heart.gif文件中的© 作为项目符号(《第十二夜》毕竟是一部浪漫喜剧)。

清单12-10：使用list-style-image属性的用于剧本大纲的样式单

SYNOPSIS, TITLE { display: block }

ACT { display: list-item; list-style-type: none }

SCENE { display: list-item;

list-style-image: url(heart.gif); list-style-type: none }

12.8.1.3 list-style-position属性

list-style-position属性指定项目符号是在列表项文本之内还是之外绘制。合法的值是inside和outside。缺省值为outside。当文本折成多行时，才会看出明显的差别。下列是list-style-position属性为inside时的显示结果：

· If music be the food of love, play on/Give me excess of it, that, surfeiting,/The appetite may sicken, and so die./That strain again! it had a dying fall: ^[注]

下列是list-style-position属性为outside时的显示结果：

· If music be the food of love, play on/Give me excess of it, that, surfeiting,/The appetite may sicken, and so die./That strain again! it had a dying fall:

12.8.1.4 list-style简略语属性

最后介绍一下list-style属性，此属性是一种简写，它允许一次性设置上面描述的所有三个属性。例如下面的规则说明SCENE显示在内部，带有红桃影像而没有任何项目符号。

SCENE { display: list-item;

list-style: none inside url(heart.gif) }

12.8.2 whitespace属性

white-space属性确定元素内部空白(空格符、制表符和换行符)的重要性。允许值为：

normal

pre

nowrap

缺省值为normal，仅表示把一连串的空白压缩成一个空格，并且单词折行以与屏幕或页面相适应。这在HTML和XML中是处理空白的通用办法。

pre值的作用就像HTML中的PRE(预格式化)元素。在输入的文档中，所有的空白都认为是有意义的，并在输出设备上按照原样再现出来，或许有一些稍稍地变化成等宽字体。这对许多计算机源码或一些诗来说，是很有用的。清单12-11就是一首诗，名叫The Altar，它是由George Herbert创作的，在这首诗中，间距是很重要的。在这首诗中，各行形成了本诗主题的轮廓。

清单12-11： XML中的The Altar

<?xml version="1.0"?>

<?xml-stylesheet type="text/css" href="12-12.css"?>

<POEM>

<TITLE>The Altar</TITLE>

<POET>George Herbert</POET>

<VERSE> A broken ALTAR, Lord, thy servant rears,</VERSE>

<VERSE> Made of a heart, and cemented with tears:</VERSE>

<VERSE> Whose parts are as thy hand did frame;</VERSE>

<VERSE> No workman s tool hath touched the same.</VERSE>

<VERSE> No workman s tool hath touched the same.</VERSE>

<VERSE> A HEART alone</VERSE>

<VERSE> Is such a stone,</VERSE>

<VERSE> As nothing but</VERSE>

<VERSE> Thy power doth cut.</VERSE>

<VERSE> Wherefore each part</VERSE>

<VERSE> Of my hard heart</VERSE>

<VERSE> Meets in this frame,</VERSE>

<VERSE> To praise thy name:</VERSE>

<VERSE> That if I chance to hold my peace,</VERSE>

<VERSE> These stones to praise thee may not cease.</VERSE>

<VERSE> 0 let thy blessed SACRIFICE be mine,</VERSE>

<VERSE> And sanctify this ALTAR to be thine.</VERSE>

</POEM>

清单12-12是一个样式单，它使用white-space: pre来保留这一形式。图12-5为在Mozilla中显示的结果。

图12-5 使用white-space:pre的George Herbert诗The Altar

Internet Explorer 5.0不支持white-space:pre。

清单12-12：对空白敏感的诗的样式单

POEM { display: block }

TITLE { display: block; font-size: 16pt; font-weight: bold }

POET { display: block; margin-bottom: 10px }

STANZA { display: block; margin-bottom: 10px }

VERSE { display: block;

white-space: pre; font-family: monospace }

最后介绍一下nowrap值，它采取一种折衷方案：在源文本中，有明确换行符的位置，准确地折行，但把其他一连串空白压缩成一个单空白。在名著的手稿或其他一些诗中，换行符是非常重要的，而单词之间的间隔则不显得那么重要，此时如实地再现换行符可能是很有用的。

Internet Explorer 5.0及其早期版本不能正确地支持nowrap。

12.9 字体属性

CSS1支持下列五种基本的字体属性：

1．font-family

2．font-style

3．font-variant

4．font-weight

5．font-size

此外，还有font这个简略属性，它可以一次设置所有的五个属性。

12.9.1 font-family属性

font-family属性值是一组以逗号分隔开来的字体名，如Helvetica、Times、Palatino等。包含空格的字体名(如“Times New Roman”)应放在双引号内。

这些名称也可能是这五种一般名称之一：serif、sans-serif、cursive、fantasy和monospace。浏览器使用本地系统上安装的所需类型的字体来代替这些名称。表12-4示例了这些字体。

表12-4 一般字体

由于在特定的客户系统上无法担保所给的任何字体都可以找到或是合适的(10磅的Times在Macintosh机上就不如Palm Pilot，实际上前者难以辨认)，所以一般提供以一组逗号分开的列表，以便以优先顺序选择字体。在列表中最后选项总是一个通用名。可是，即使不指定一个通用名，以及指定的字体不可用，那么浏览器也会挑选出某个字体名。这也许不会是人们所希望的那个。

例如，下面的两条规则的第一条使TITLE元素为Helvetica字体，而以任何非衬线体为后备体；第二条规则使其余元素为Times字体，而用Times New Roman和其他衬线体为后备字体。

TITLE { font-family: Helvetica, sans serif }

SYNOPSIS { font-family: Times, "Times New Roman", serif }

图12-6显示的是把这两条规则加到清单12-8的样式单之后加载到Mozilla 5.0中的剧本大纲。由于在图12-4中Times通常是缺省字体，所以没有发生太大的变化。

font-family属性可由子元素继承。于是，将SYNOPSIS元素的font-famiey设置为Times字体，所有的子元素也被设置为Times，只是TITLE例外，其自身的font-family属性取代了它继承的属性。

图12-6 标题以Helvetica字体显示的《第十二夜》的大纲

12.9.2 font-style属性

font-style属性有三个值：normae、italic和oblique。读者正在阅读的普通文本就是正常体。一般以HTML的EM元素显示的则为斜体的。倾斜字体(oblique)的文本十分类似于斜体文本。但是，绝大多数情况下，倾斜字体的文本是由计算机根据简单的算术运算，使正常的文本倾斜一定的角度实现的。用斜体字印刷的文本，使用的字体手法，通常是为了好看。

下面的规则使SCENE_NUMBER元素成斜体：

SCENE_NUMBER { font-style: italic }

图12-7显示的是把上述规则加到大纲样式单之后再加载到Internet Explorer 5.0中的剧本大纲。

图12-7 带斜体场景号的《第十二夜》剧本大纲

12.9.3 font-variant属性

在CSS1中，font-variant属性有两个可能值：normal和small-caps，缺省值为normal。将font-variant属性值设置为small-caps将会用比主体文本字号小一些的大写字母代替小写字母。

把font-variant属性与first-letter伪元素结合起来使用，可获得极好的效果。例如，定义ACT_NUMBER元素，使属性为font-variant:small-caps。接下来，定义ACT_NUMBER的首字母，为font-variant:normal。这样就产生了如下的剧本的幕序号：

ACT 1

下面是其规则：

ACT_NUMBER { font-variant: small-caps }

ACT NUMBER: first-letter { font-variant: normal }

第二个规则覆盖第一个，但仅对幕序号的首字母才如此。

12.9.4 font-weight属性

font-weight属性决定文本以多黑(粗)或多浅(细)显示。此属性有13个值：

normal

bold

bolder

lighter

100

200

300

400

500

600

700

800

900

粗细的范围是从100(最浅)到900(最暗)。处于各值之间、非整百的值如850是不允许的。正常粗细为400，粗体为700。bolder值会使一个元素变得比其父元素更粗。lighter值会使一个元素变得比其父元素更细。但是，不能保证某个特定的字体具有多达九个独立的粗体级。

下面举一个简单的规则实例，此规则使TITLE和ACT_NUMBER元素成为粗体。

TITLE, ACT_NUMBER { font weight: bold }

图12-8显示的是把上述规则加到清单12-7的样式单之后在Mozilla浏览器中的结果。

12.9.5 font-size属性

font-size属性决定字体中典型字符的高和宽度。字号越大，在屏幕中所占的空间也就越大。可以通过这样的几种方式来指定字号：关键字、相对于其父元素的字号、其父元素字号的百分比或绝对数。

图12-8 使用粗体剧名和幕序号的《第十二夜》大纲

12.9.5.1 关键字

绝对大小关键字：

xx-small

x-small

small

medium

1arge

x-large

xx-large

这些关键字是设置字号的首选方式，因为它们仍是相对于页的基本字号的。例如，如果用户由于近视度很高而将缺省字号调整为20磅，那么所有其他值也会相应地按比例改变。

在CSS1中，每种字号是下一个最小字号的1.5倍。缺省值为medium，因此，如果浏览器的缺省值是12磅，那么large类型就是18磅，x-large类型就是27磅，而xx-large类型就是40.5磅。同样，small类型就是8磅；x-small类型就是5.33磅；xx-small类型就是3.56磅，此时字迹几乎模糊不清。

下面的简单规则使TITLE成为特大字：

TITLE { font-size: x-large }

12.9.5.2 相对于父元素的字号值

也可以将相对于父元素的字号指定为larger或smaller。例如，在下列语句中，SCENE_NUMBER将获得比其父元素SCENE字体更小的字体。

SCENE_NUMBER { font-size: smaller }

更小的字体准确地小到多少或更大的字体准确地大到多少，没有任何确切的规则可循。一般地，浏览器会从中等(medium)移到小字体(small)、从小字体移到x-small，依次类推。对于较大的字体也同样适用(向另一方向移动)。这样，使一字体变得更大，应将它的字号增加到约50%，而使一字体变得更小，则应将其字号减小约33%，可是，为了匹配现有的字号，浏览器无法自己产生这些值。

12.9.5.3 父元素字号的百分比

如果这些项不够精确，可使用父元素字号的百分比进行更精细的调整。例如，下列规则说明用于SCENE_NUMBER的字体是SCENE字号的50%。

SCENE_NUMBER { font-size: 50% }

12.9.5.4 绝对长度值

最后，可能会把字号以绝对长度给出。尽管可以使用像素、厘米或英寸，但测定字体的最通用的单位是磅。例如，下面规则为SYNOPSIS元素设置缺省font-size属性，并且将其子元素字体的大小设置为14磅。

SYNOPSIS { font-size: 14pt }

我极力劝说读者不要使用绝对单位来描述字号。要选择一种字号，使它在所有用来浏览网页的不同的平台(从手持机到朝代广场的Sony大屏幕)上都可以很清晰、便于阅读是极其困难的(我认为是不可能的)。即使当把它们局限在标准的个人计算机上，大多数设计者选择的字体也会太小。要想让任何文本都能在屏幕上阅读，这些字体应至少为12磅，甚至更大。

图12-9显示的是将这些规则加到清单12-7的样式单中之后，在Mozilla中输出的结果。场景的文本并不真正的是粗体，它只是变得稍大。在任何情况下，更容易阅读。

图12-9 带有各式各样字号的《第十二夜》剧本大纲

12.9.6 font简略属性

font属性是一种简略属性，它允许使用一条规则来设置字体样式、变体、粗细、字号或字族。例如，下列用于TITLE和SCENE_NUMBER元素的两条规则，就把前面各节中提到的六个不同的规则组合在一起了：

TITLE { font: bold x-large Helvetica, sans-serif }

SCENE_NUMBER { font: italic smaller serif }

font属性值必须按下列顺序给出：

1．以任何顺序给出样式、变体和粗细之一，它们中的任何一个都可以忽略

2．字号，不可以忽略

3．可选择的斜杠(/)和行高

4．字族，不可忽略

如果这听起来很复杂并且难以记住，那是因为本该如此。如不查阅，我肯定记不住这些属性顺序的准确的细节。我宁愿一次只使用一个属性。这样就产生了一个疑问，像这样的简略属性是否真能节省时间。

清单12-13使用font简略属性，是带有迄今介绍过的所有规则的大纲的样式单。但是，由于font属性准确地等同于其代表的各属性之和，所以显示的文档没有任何变化。

清单12-13：使用font简略属性的剧本大纲样式单

SYNOPSIS, TITLE, ACT, SCENE { display: block }

SCENENUMBER { font: italic smaller serif }

TITLE { font: bold x-large Helvetica, sans serif }

SYNOPSIS { font: 14pt Times, "Times New Roman", serif }

ACTNUMBER { font-variant: small-caps }

ACTNUMBER:first-letter { font-variant: normal }

ACTNUMBER { font-weight: bold }

12.10 颜色属性

CSS允许使用color属性可将颜色赋给几乎网页上的任何元素。颜色属性的值可以是16个命名颜色关键字之一，或以十进制、十六进制或百分数表示的RGB三基色。例如，下列规则指定网页上的所有元素都以黑色显示，只是SCENE_NUMBER除外，它是以蓝色显示的。

SYNOPSIS { color: black }

SCENE_NUMBER { color: blue }

color属性可被子属性所继承。所以，除SCENE_NUMBER之外的大纲中的所有元素都将是黑色的。

下列规则与上面的两个是等价的。在有可能时，我推荐尽可能使用命名颜色，当做不到时，可使用浏览器安全色。

SYNOPSIS { color: #000000 }

SCENE_NUMBER { color: #0000FF }

SYNOPSIS { color: rgb(0, 0, 0) }

SCENE_NUMBER { color: rgb(0, 0, 255) }

SYNOPSIS { color: rgb(0%, 0%, 0%) }

SCENE_NUMBER { color: rgb(0%, 0%, 100%) }

12.11 背景属性

元素的背景可设置成一种颜色或一幅影像。如果设置为一幅影像，那么此影像可相对于元素内容加以定位。可使用下列五个基本属性来达此目的：

1．background-color

2．background-image

3．background-repeat

4．background-attachment

5．background-position

最后，还有一个background简略属性，它允许在一条规则中设置某些或所有的五个属性。

如今在Web上，人们过度地使用奇特的背景。除了非常明亮的背景以外的其他东西，只会使网页难以阅读，并令用户生厌。出于完整之目的，我在此列出了这些属性，但是，我强烈推荐节制一点使用这些属性(如果不能完全不用的话)。

任何一个背景属性都不会被继承。每个子元素必须指定所需的背景色。但是，由于背景的缺省值为透明的，所以看起来就好像这些背景属性被继承了一样。无论哪个元素的背景绘制于某元素下，它都会透过来。在大多数情况下，这就是父元素的背景。

12.11.1 background-color属性

background-color属性可设置为与color属性一样的值，但是，它并不改变元素内容的颜色，而是改变元素内容绘制其上的背景的颜色。例如，要在蓝色背景上绘制黄色文本的SIGN元素，可使用如下的规则：

SIGN { color: yellow; background-color: blue }

也可以将background-color设置为关键字transparent(缺省值)，这表明背景使用位于其下的元素(通常为父元素)的颜色或影像。

12.11.2 background-image属性

background-image属性既可以是none(缺省值)，也可以是指明位图图像文件集团的URL(通常是相对值)。如果为URL，则浏览器将加载影像，并把它作为背景使用，这一点极像HTML中BODY元素的BACKGROUND特性。例如，下面显示的是如何将文件party.gif(如图12-10所示)作为INVITATION元素的背景。

INVITATION { background-image: url(party.gif) }

图12-10 清单12-14中舞会请谏背景使用的未平铺且未加裁剪的原始背景影像

由background-image属性引用的影像在指定的元素下方绘出，而不是像HTML的BODY元素的BACKGROUND特性那样在浏览器窗格下方绘出。

如果背景影像与基本元素关联，早期的Mozilla 5.0测试版把背景影像加到整个文档窗格而不仅仅是元素本身上。但是，对于所有的非基本元素，背景影像只施加于使用它的元素。CSS1规范并没有明确地表示这一点是否可以接受。

背景影像通常并不是和网页内容的大小精确一致。如果影像比元素框大，影像将会被剪切。如果影像比元素框小，那它就会垂直和水平平铺。图12-11显示的背景影像，平铺到足够大以超过下面的内容。注意，这种平铺是在元素窗口中横向穿过，而不是在整个浏览器窗口上进行。

图12-11 平铺的背景影像

清单12-14：以XML格式表示的舞会请谏

<?xml version=”1.0”?>

<?xml stylesheet type=”text/css” href=”party.css”?>

<INVITATION>

You’re invited to a party on December 31, 1999 to celebrate the

new millennium! You’re invited to a party on December 31, 1999

to celebrate the new millennium! You’re invited to a party on

December 31, 1999 to celebrate the new millennium! You’re

invited to a party on December 31, 1999 to celebrate the new

millennium! You’re invited to a party on December 31, 1999 to

celebrate the new millennium! You’re invited to a party on

December 31, 1999 to celebrate the new millennium! You’re

invited to a party on December 31, 1999 to celebrate the new

millennium! You’re invited to a party on December 31, 1999 to

celebrate the new millennium! You’re invited to a party on

December 31, 1999 to celebrate the new millennium! You’re

invited to a party on December 31, 1999 to celebrate the new

millennium! You’re invited to a party on December 31, 1999 to

celebrate the new millennium!

</INVITATION>

12.11.3 background-repeat属性

background-repeat属性调整背景影像如何在屏幕上平铺。可指定背景影像为不平铺或只以水平或垂直方向平铺。此属性可取的值如下：

repeat

repeat-x

repeat-y

no-repeat

例如，要在请谏上仅显示一顶舞会帽，可设置INVITATION元素的background-repeat为no-repeat。图12-12显示的就是这种情景。例如：

INVITATION { background-image: url(party.gif);

background-repeat: no-repeat }

要在页面上横向平铺而不是向下平铺，可设置background-repeat为repeat-x，如下所示。图12-13显示的背景影像是横向平铺而不是向下平铺。

INVITATION { background-image: url(party.gif);

background-repeat: repeat-x }

图12-12 未平铺的背景影像

图12-13 横向而不是向下平铺的背景影像

如要在页面上向下平铺而不是横向平铺，可按下面的语句将background-repeat设置为repeat-y。图12-14显示的就是这种情景。

图12-14 向下而不是横向平铺的背景影像

INVITATION { background-image: url(party.gif);

background-repeat: repeat-y }

12.11.4 background-attachment属性

在HTML中，背景影像是附加到文档上的。当滚动文档时，背景影像也随之滚动。使用background-attachment属性，就可以指定背景只附加于窗口或是窗格上。可取的值是scroll和fixed。缺省值是scroll，这就是说，背景附加于文档而不是窗口之上。

但是，将background-attachment设置为fixed，文档就会滚动，但背景影像不滚动。当不想使此影像平铺，而对于一般类型的浏览器来说图像已大到充满窗口，但大文档的背景要小时，将此属性设置为fixed可能是有用的。这时可编码如下：

DOCUMENT { background-attachment: fixed;

background-repeat: no-repeat }

无论是IE 5，还是Mozilla都不支持固定的背景影像。在以后的发行版中有可能增加此功能(CSS1规范不需要浏览器支持固定背景)。

12.11.5 background-position属性

在缺省条件下，背景影像的左上角与它所连接的元素的左上角对齐(见图12-12)。在多数情况下，这样就能满足人们的需要。但是，在少数情况下，可能还需要其他可能，background-position就允许人们相对于元素来移动背景。

可使用父元素的宽和高度的百分数、绝对长度或下列六个关键字中的两个来指定偏移量：

top

center

bottom

left

center

right

12.11.5.1 父元素的宽和高度的百分数

百分数能够把各部分的背景与元素的相应部分紧紧地联系在一起。x坐标的百分数范围从0%(左侧)到100%(右侧)变化。y坐标的百分数变化范围是从0%(顶端)到100%(底部)。例如，下面这条规则把影像的右上角置于INVITATION的右上角。图12-15为该情况的显示结果。

INVITATION { background-image: url(party.gif);

background-repeat: no-repeat;

background-position: 100% 0% }

图12-15 与内容右上角对齐的背景影像

12.11.5.2 绝对长度

绝对长度决定背景的左上角在元素上的绝对位置。下面这条规则把背景影像party.gif的左上角放置在距元素右边1厘米、左上角下方2厘米的位置。图12-16显示的就是这种情景。

INVITATION { background-image: url(party.gif);

background-repeat: no-repeat;

background position: lcm 2cm }

图12-16 距元素右边1厘米、左上角下方2厘米的背景影像

12.11.5.3 关键字

top left和left top关键字与0% 0%相同。top、top center和center top与50% 0%相同。right top和top right关键字与100% 0%相同。left、left center和center left关键字与50% 50%相同。right、right center和center right关键字与100% 50%相同。bottom left和left bottom关键字与0% 100%相同。bottom、bottom center和center bottom与50% 100%相同。bottom right和right bottom关键字与100% 100%相同。图12-17将这些关键字与元素框上的各位置联系在一起了。

图12-17 背景影像的相对位置

例如，以请谏为例，最好的效果是把影像牢牢地固定于窗口的中间(如图12-18所示)。下列是需要的规则：

INVITATION { background-image: url(party.gif);

background-repeat: no-repeat;

background-position: center center }

图12-18 固定于INVITATION元素中间的无平铺背景影像

如果background-attachment属性值为fixed，那么影像放置的位置就是窗口边的相对位置，而不是元素的相对位置。

12.11.6 背景简略属性

background属性是在一条规则中设置background-color、background-image、background-repeat、background-attachment和background-position属性的简略方法。例如，要在INVITATION元素中将background-color设置为white，background-image设置为party.gif，background-repeat设置为no-repeat以及background-attachment设置为fixed，可使用下面的规则：

INVITATION { background: url(party.gif) white no-repeat fixed }

下面的规则与上面的意思是完全一样的，只是句子更长，但更容易理解：

INVITATION { background-image: url(party.gif);

background-color: white;

background-repeat: no-repeat;

background-attachment: fixed }

当使用background简略属性时，对于这五个属性的任何一个或所有的值都可按任何顺序给出。但是，可以省略不只一个值。例如，用于图12-16的右上角对齐规则还可以表示如下：

INVITATION { background: url(party.gif) no-repeat 100% 0% }

12.12 文本属性

如不考虑字体，影响文本外观的属性有8个：

1．word-spacing

2．letter-spacing

3．text decoration

4．vertical-align

5．text transform

6．text-align

7．text-indent

8．line-height

12.12.1 word-spacing属性

word-spacing属性通过在单词之间附加空格而使文本扩大。负值会删除单词之间的空白。要改变Web网页上的词间距，我认为唯一的理由就是，如果你是位学生，工作时受到页面数目的限制，而又想使纸张看起来比实际的大或小一些。

桌面出版商热衷于调节这类属性。问题是他们已了解到的有关如何、什么时候调整间隔的所有准则是基于纸上印刷的，但在转换到以磷光体(一般为CRT显示器)表现的电子媒介时就失效。让浏览器来决定字和字母的间距，几乎永远是最好的方法。

另一方面，如果目标媒体是纸上的墨水，那么通过调整这些属性就可以获得更多的空间。主要区别是，在纸上使用墨水就能控制输出媒体。准确地知道字体多大、显示器有多宽和多高、每英寸有多少点可供使用等等。实际是，在Web上，没有有关可供输出媒体的足够信息，以便详细地控制所有的情况。

如要改变word-spacing的缺省值(norma1)，可给属性设置长度。例如：

INVITATION { word-spacing: 1em }

如浏览器不关注此属性，尤其是如果它与其他属性(如align: justified)发生冲突时更是如此。Internet Explorer 5.0不支持word-spacing，但Mozilla则支持(如图12-19所示)。

图12-19 字间距为1em的INVITATION元素

12.12.2 letter-spacing属性

letter-spacing属性能在字母之间添加额外的空隙从而扩展文本。设置为负值，就会删除字母之间的空隙。同样，我认为在Web网页上这样做的唯一的理由是让纸张看起来比实际的更大或更小，以满足纸张长度要求。

要从normal缺省值变为其他值，可为此属性设置一长度。例如：

INVITATION { letter-spacing: 0.3em }

由于通过调整字母之间空隙大小就可以获得两端对齐，所以手工改变字母间距就可以防止浏览器使文本两端对齐。

浏览器不关注此属性，尤其是如果它与其他属性(如align:justified)发生冲突时更是如此。但是，Internet Explorer和Mozilla都能体现此属性(如图12-20所示)。

图12-20 字母间距为0.3em的INVITATION元素

12.12.3 text-decoration属性

text-decoration属性可以是下列五个值之一：

none

underline

overline

line-through

blink

除了none(缺省值)之外，这些值都不互斥。例如，可以为一个段落指定下划线(underline)、上线(overline)、删除线(struck through)和闪烁(blink)。(可我不推荐这样做。)

浏览器不支持闪烁文本。这是一件好事情。

例如，下面的这条规则指定CHARACTER元素加上下划线。图12-21显示了将此规则应用于清单12-7中的《第十二夜》大纲的情景。

CHARACTER { text-decoration: underline }

图12-21 带下划线字符的Twelfth Nigh大纲

12.12.4 vertical-align属性

vertical-align属性指定内联元素如何根据文本的基线定位。有效值是：

baseline

sub

super

top

text-top

middle

bottom

text-bottom

还可以使用元素的行高的百分数来表示。缺省值是baseline，表示把元素的基线与其父元素的基线对齐。

sub值使元素成为下标。super值使元素成为上标。text-top值使元素的顶端与父元素字体的顶端对齐。middle值使元素的垂直中心与父元素的基线加上x-height一半对齐。text-bottom值使元素的底部与父元素字体的底部对齐。

top值使元素的顶端与此行上最高字母或元素的顶部对齐。bottom值使元素的底部与此行上最低字母或元素的底部对齐。精确的对齐方式随最高或最低字母的高度而变。

例如，用于脚注数字的规则如下面的语句所示，它把数字成为上标，并且大小减小20%。

FOOTNOTE_NUMBER { vertical-align: super; font-size: 80% }

12.12.5 text –transform属性

text-transform属性可用来指定文本应以全部大写字母、全部小写字母或首字母为大写形式显示。例如，这个属性用于标题是很有用的。有效值为：

capitalize

uppercase

lowercase

none

capitalize(以大写字母开头)仅使每个单词的首字母成为大写(如本句：Capitalization Makes Only The First Letter Of Every Word Uppercase)。但如把句子设置成uppercase(大写体)将使句子中的每个字母成为大写(如PLACING THE SENTENCE IN UPPERCASE, HOWEVER, MAKES EVERY LETTER IN THE SENTENCE UPPERCASE)。下面的规则将《第十二夜》剧本大纲中的TITLE元素转换成大写体。图12-22为应用了此规则后所显示的大纲。

TITLE { text-transform: uppercase }

图12-22 大纲中的TITLE现在成为大写

text-transform属性与语言有关，因为许多语言(如中文)就没有任何大写和小写的概念。

12.12.6 text-align属性

text-align属性只应用于块级元素。它指定块中的文本是否为左对齐、右对齐、居中或两端对齐。

left

right

center

justify

下面的规则使《第十二夜》剧本大纲中的TITLE元素居中，并使其他的两端对齐。图12-23显示了应用这些规则之后的大纲。

TITLE { text-align: center }

SYNOPSIS { text-align: justify }

图12-23 大纲中TITLE居中，而文本的其他部分两端对齐

12.12.7 text-indent属性

text-indent属性只应用于块级元素，它指定块的第一行相对于块其余行的缩排方式，可用绝对长度或父元素宽度的百分数来表示。此值可为负，表示悬挂式缩进。

要使元素的所有行而不仅仅是第一行都缩进，可使用框属性(将在下节讨论)在元素上设置额外的左边距。

例如，下面的规则将大纲中的场景缩进半英寸。图12-24显示了在应用了本规则之后的大纲。

SCENE { text-indent: 0.5in }

12.12.8 line-height属性

line-height属性指定后续行基线之间的距离，可用绝对数字、绝对长度或字号的百分数来表示。例如，下面的这条规则使SYNOPSIS元素的行距加倍。图12-25显示在应用此规则之后的《第十二夜》剧本大纲。

SYNOPSIS { line-height: 200% }

图12-24 大纲中的SCENE及其子元素都缩进半英寸

图12-25 间隔加倍的大纲

行距加倍不是特别吸引人，所以我要将其删除。在下一节中，在各元素周围添加了一些额外的页边距，以获得良好的效果。清单12-15概述了本节中加入到大纲样式单的所有情况(去掉了行距加倍)。

清单12-15：文本属性的大纲样式单

SYNOPSIS, TITLE, ACT, SCENE { display: block }

SCENE_NUMBER { font: italic smaller serif }

TITLE { font: bold x-large Helvetica, sans-serif }

SYNOPSIS { font: 14pt Times, "Times New Roman", serif }

ACT_NUMBER { font variant: small-caps }

ACT_NUMBER:first-letter { font-variant: normal }

ACT_NUMBER { font-weight: bold }

CHARACTER { text-decoration: underline }

TITLE { text-transform: uppercase }

TITLE { text-align: center }

SYNOPSIS { text-align: justify }

SCENE { text-indent: 0.5in }

12.13 框属性

CSS描述了两维的绘制输出内容的一块画布。在这块画布上绘制的元素被包围在虚构的矩形中，这些矩形称为框(box)。这些框总是平行于画布的边缘放置。使用框属性使人们能够指定单个框的宽度、高度、页边距、贴边、边、大小和位置。图12-26显示这些属性之间的关系。

图12-26 具有页边距、边框线和贴边的CSS框

12.13.1 页边距属性

页边距属性指定加到框的边框线外面的间距。也可使用margin-top、margin-bottom、margin-right和margin-left分别设置顶端、底、右和左页边距。各页边距可使用绝对长度或父元素宽度大小的百分数来表示。例如，按下面的规则和图12-27演示的那样，设置ACT的margin-top属性为1ex，就可以在每个ACT元素和其前面的元素之间增加额外的间距。

ACT { margin-top: 1ex }

图12-27 ACT元素的顶端边距变大

也可以使用简略的margin属性一次设置所有的四个边距。例如，为基本元素(本例为SYNOPSIS)设置页边距属性，就可以在整个《第十二夜》文档周围增加额外的空间。

SYNOPSIS { margin: 1cm 1cm 1cm 1cm }

事实上，这与页边距单独使用一个值是一样的，CSS会将这个值认为可应用于所有四个边上。

SYNOPSIS { margin: 1cm }

若给出两个margin值，则第一个应用于顶端和底部，第二个应用于右和左边。若给出三个margin值，则第一个应用于顶端，第二个应用于右和左边，第三个应用于底部。只使用各自的margin-top、margin-bottom、margin-right和margin-left属性也许更容易。

图12-28 在整个大纲周围增加1厘米空间

12.13.2 边框线属性

大多数框都有边框。它们是影响基本内容布局的想像中的框，但也许读者无法看见这些框。但是，可以使用边框线属性在其周围绘出线，从而使框可见。边框线属性允许指定边框线的样式、宽度和颜色。

12.13.2.1 边框线样式

缺省条件下，不管边框线的宽度和颜色是否设置，在框的周围不会绘制任何边界。要使某一边界可见，必须把框的border-style属性从其缺省值none改变为下列值之一：

dotted

dashed

solid

double

groove

ridge

inset

outset

border-style属性可有一到四个值。正如margin属性一样，一个值适用于所有四个边界。使用两个值时，第一个值表示第一样式，用来设置顶和底边界，第二个值表示第二样式，用来设置右和左边界。使用三个值时，则按顺序设置顶、右及左和底边界。当使用四个值时，则表示按从顶、右、底和左的顺序设置每个边界。例如，下列这条规则使用实线边框把整个SYNOPSIS围住。图12-29是Internet Explorer 5.0显示的情景。在这种情况下，边框对使页边距更加明显的效果不太大(记住，页边距在边框之外)。

SYNOPSIS { border-style: solid }

图12-29 大纲周围的边框

Internet Explorer 5.0只显示实线边框。其他样式都是作为简单地实线边框绘出。

12.13.2.2 边框线宽度

为了指定沿框的顶端、底部、右和左边缘指定边框线的宽度，共有四个border-width属性。它们是：

1．border-top-width

2．border-right-width

3．border-bottom-width

4．border-left-width

每个属性都可以用绝对长度或三个关键字之一：thin、medium或thick来指定。边框线宽度不可为负值，但可以为零。

例如，要使SYNOPSIS元素围在1个像素宽的实线边框(任何计算机显示器都能显示的最细边框)内，可使用下面的规则来设置这四个属性：

SYNOPSIS { border style: solid;

border-top-width: 1px;

border-right-width: 1px;

border-bottom-width: 1px;

border-left-width: 1px }

如果想要把所有的或几个边框设置为相同的宽度，则使用border-width简略属性更方便。这个属性可有一到四个值。一个值时，设置所有四个边框线宽度。使用两个值时，设置顶和底边为第一个值，右和左边为第二个值。使用三个值时，则表示按顺序设置顶端、右及左和底宽。当使用四个值时，则表示按从顶、右、底和左的顺序设置每个边框。例如，下列的规则与前述的规则是等价的：

SYNOPSIS { border-style: solid; border-width: 1px }

12.13.2.3 边框颜色

border-color属性设置一到四个边框的颜色。只使用一个值，是指设置所有四个边框的颜色。当使用两个值时，表示把顶和底边框设置为第一个颜色，右和左边框设置为第二个颜色。当使用三个值时，表示按顶端、右及左和底边顺序设置。使用四个值时，表示按顶端、右、底和左的顺序设置每个边颜色。有效值是任何公认的颜色名或RGB基色值。例如，要把SYNOPSIS元素放置在1个像素、实线的红边框线内，可使用下面这条规则：

SYNOPSIS { border style: solid;

border-width: 1px;

border-color: red }

由于本书是以黑白形式印刷的，所以我将这张图留给读者自己解决。

12.13.2.4 边框线简略属性

有五个简略边框线属性可以使用一条规则同时设置宽度、样式和边框颜色。它们是：

1．border-top

2．border-right

3．border-bottom

4．border-left

5．border

例如，border-top属性为顶边框提供宽度、样式和颜色。border-right、border-bottom和border-left相类似。省略的属性被设置为父元素的值。例如，图12-30显示在每一幕下面有一个2像素实线的蓝边框线(如果喜欢可作为水平尺)。要获得这种效果，可使用下面的规则：

ACT { border-bottom: 2px solid blue }

图12-30 两像素、实线底边框，与HTML的HR元素相类似

border属性把所有四个侧边设置成指定的宽度、样式和高度。例如，下列规则在CHART元素四周绘出3像素宽、实线的红边框。

CHART { border: 3pt solid red }

12.13.3 贴边属性

贴边属性指定框的边界内部间距量。如果显示，框的边框落在页边距和贴边之间。使用padding-top、padding-bottom、padding-right和padding-left属性，可以对顶、底、右和左贴边分别进行设置。每个贴边都可以用绝对长度或父元素宽度大小的百分数来表示。例如，按下面规则所示来设置其贴边属性，可将SYNOPSIS与其边分开。

SYNOPSIS { padding-bottom: 1em;

padding-top: 1em;

padding-right: 1em;

padding-left: 1em }

还可以使用简略的padding属性一次设置所有的四个值。例如，下面的规则与前面的相同：

SYNOPSIS { padding: 1em 1em 1em 1em }

事实上，这与使用padding属性的一个值也是完全一样的，CSS把此当作适用于所有四个边来看待。

SYNOPSIS { padding: 1em }

提供两个padding值时，第一个应用于顶和底，第二个应用于右和左。提供三个padding值时，第一个应用于顶，第二个应用于右和左，第三个应用于底。使用各自的padding-top、padding-bottom、padding-right和padding-left可能更容易。

在剧本大纲的幕名下面的蓝边似乎靠得太紧，所以我们使用padding-bottom属性在剧幕的结尾和边框之间增加1ex贴边(如下面的规则所示)。图12-31显示的就是这种情景。一般地，在边框周围使用一点贴边是一个很好的主意，这样可以使文本更容易阅读。

ACT { padding-bottom: 1ex }

12.13.4 大小属性

使用width和height属性可强制框为给定的大小。框的内容随需要成比例变化，以适应框的要求。尽管可以将此属性应用到文本框上，但更普通、更有用的是将此属性用于像影像和Java小程序这样的替代元素。为了指示浏览器应使用真实的大小，其宽度和高度可用绝对长度、父元素高度和宽度的百分数或关键字auto(缺省值)给出。例如，下面的这条规则把整个SYNOPSIS调整为3英寸高和3英寸宽。

SYNOPSIS { padding: 1em; width: 3in; height: 3in }

图12-31 贴边使边框更容易看到

图12-32显示的是Internet Explorer 5.0中的效果。当面对一个比其框还大的元素时，Internet Explorer缩小宽度，但扩展其高度。Mozilla使文本超出框之外，有可能覆盖下面的元素。当内容与有准确大小的框不相适用时，各浏览器的处理结果无法一致、并且也无法预测。

图12-32 在Mozilla中显示的3英寸高3英寸宽的大纲

如果将width设置为绝对或相对单位，将高度设置为auto，那么高度按照宽度成比例调整。

12.13.5 定位属性

在缺省条件下，嵌套在相同父元素内的块级元素在网页上一个挨一个地排列。它们不会并排，也不会折行。可以灵活的使用float和clear属性改变这种情况。

12.13.6 float属性

float属性的缺省值为none，可把它设置为left或right。如果其值为left，那么元素移到网页的左侧，文本在右边围绕着元素的周围。在HTML中，这与使用ALIGN = "LEFT"的IMG标记的效果一致。如此值为right，则元素移到网页的右侧，文本在左侧围绕着元素的周围。在HTML中，这与使用ALIGN = "RIGHT"的IMG的标记效果一致。

要在XML文件中嵌入影像，没有任何标准方法，所以对于本例，我们用一背景影像，并灵活的使用CSS属性来仿造嵌入影像的效果，清单12-16是一个稍加修改的舞会请谏，它有一空的IMAGE元素。清单12-17是一样式单，它将party.gif文件设置为IMAGE元素的背景。也可以设置IMAGE元素的宽度和高度属性。最后，设置float为left。图12-33显示运行后的结果。

清单12-16：有空IMAGE元素的舞会请谏

<?xml version="1.0"?>

<?xml stylesheet type="text/css" href="12-17.css"?>

<INVITATION>

<IMAGE />

<TEXT>

You re invited to a party on December 31, 1999 to celebrate

the new millennium! You re invited to a party on December 31,

1999 to celebrate the new millennium! You re invited to a

party on December 31, 1999 to celebrate the new millennium!

You re invited to a party on December 31, 1999 to celebrate

the new millennium! You re invited to a party on December 31,

1999 to celebrate the new millennium! You re invited to a

party on December 31, 1999 to celebrate the new millennium!

You re invited to a party on December 31, 1999 to celebrate

the new millennium! You re invited to a party on December 31,

1999 to celebrate the new millennium! You re invited to a

party on December 31, 1999 to celebrate the new millennium!

You re invited to a party on December 31, 1999 to celebrate

the new millennium! You re invited to a party on December 31,

1999 to celebrate the new millennium!

</TEXT>

</INVITATION>

清单12-17：加载一个IMAGE的样式单

INVITATION { display:block; }

IMAGE { background: url(party.gif) no-repeat center center;

width: 134px;

height: 196px;

float: left; }

TEXT { display: block }

12.13.7 clear属性

clear属性指定元素是否可以在其各边有浮动元素。如果不能，元素将移到任何在此元素之前的浮动元素之下。它与HTML中的<BR CLEAR="ALL">元素有关。其可能值为：

none right

left both

图12-33 在左边浮动的舞会请谏上的影像

缺省值none使浮动元素出现在元素的两侧。left值预示浮动元素出现在元素的左侧。right值预示浮动元素出现在元素的右侧。both值预示浮动元素出现在元素的两侧。例如，假设把下列规则加入到清单12-17的样式单中：

TEXT { clear: left }

现在，尽管IMAGE元素想浮动在TEXT元素的左边，但TEXT元素不允许这样做(如图12-34所示)。IMAGE元素仍然处于左边，但现在TEXT被推到影像之下。

图12-34 将clear设置为left的舞会请谏

12.14 本章小结

在本章中，读者已学习了以下内容：

·          对于将样式应用于元素的内容来说，CSS是一种简单、易懂的语言，它在HTML中非常有效，而在XML中甚至更加有效。

• 选择符是将规则应用其上的一组以逗号分隔开来的元素。
• CSS可把多条规则应用于所给类型的元素或带有特定CLASS或ID特性的元素。
• 许多(尽管不是所有的)CSS属性都可以被它们所应用的元素的子元素所继承。
• 如果多条规则应用于一个元素，那么格式化属性以预想的方式层叠。
• 在CSS样式单中，可使用像C语言中的/ * * /一样的注释。
• 长度可以用相对或绝对单位指定。使用相对单位更好。
• display属性决定一元素是否是块级、内联或列表项元素。
• 字体属性决定文本字体的外观、样式、大小和粗细。
• 颜色属性可用十进制、十六进制或百分数的24位RGB空间表示。
• 背景属性包括颜色、影像、影像位置和影像平铺。
• 文本属性可用来调整行距、字间距、字母间距、垂直和水平对齐、修饰和大写。
• 框属性可用来调整网页上元素的相对位置和间距，以及元素周围的边框线。

CSS1也受到一些限制。首先，CSS1只能把样式与已经出现在文档中的内容相链接。它无法向文档中添加内容，即使像标点符号这样的内容。此外，它不能把内容以任何方式(如分类或重排)进行变换。这些需要用XSL(Extensible Style Language，可扩充样式语言)来解决。即使仅仅从格式化内容的角度来考虑，CSS1所提供的也比人们需要的少。最明显的是，不支持表格。还有其他非明显的缺点。CSS1不能处理从右到左的文本(如希伯来语、阿拉伯语)或垂直文本(如繁体中文)。在下一章中，我们将学习CSS2，它可以解决这些问题和CSS1的限制。