使用串接样式表(CSS)来显示XML文件

王朝html/css/js·作者佚名 2006-12-16

在本章中，你将学习显示XML 文件于Microsoft Internet Explorer 5 中的第一种方法：串接样式表（CSS）。串接样式表是一个包含安排XML 文件中元素相关指令的档案。因为你已经利用XML创造了自己的元素，浏览器并不知道如何适当地显示这些元素。建立串接样式表并将它链接到XML 文件中便是一种告诉浏览器如何显示文件中每个元素的方法。附加串接样式表的XML 文件可以直接在Internet Explorer 5 中被开启。你不需要使用HTML 网页来存取与显示资料（只需运用接下来两章中介绍的方法即可）。

将显示元素的相关指令放在样式表中，使它与XML 文件分开，这样可以提高XML 文件的弹性并让它更容易维护。例如，借着简单地加上适当的样式表，你可以快速地将个别的XML 文件改编，使它适合多种不同的显示情况（不同的浏览器、应用程序、内文、外围装置等等），而不必重新建构文件本身。同时，借着仅重新校定附加在文件后面的共通样式表，你可以快速地更新一组类似XML 文件的编排，而不必开启与编辑每一份文件。

使用串接样式表大概是显示XML 文件最简单的方法了。首先，因为目前CSS 在HTML 网页中的大量运用，使得CSS 语言已经广为众多网站设计人员熟悉。同时，目前的网站浏览器已经提供了对串接样式表的高度支持，但其它显示XML 文件的方法还正在发展中，而且浏览器也才开始支持这些方法。

然而，相较于你在稍后数章中将学得的XML 显示方法，串接样式表还是有些限制。虽然串接样式表对于浏览器如何安排XML 文件中元素内容的显示方法提供了相当高度的控制权，但它并不让你修改或重新安排文件的内容。同时，它不允许你存取XML 的属性、实体、处理指令，以及其它组件，也不让你处理这些要素包含的信息。

在接下来的章节中，你将学习某些较复杂，但也较具弹性的方法来显示XML 文件。在第八章中，你将学习如何将XML 文件链接到HTML 网页中，并借着连结标准的HTML 元素至XML 文件来显示XML 元素。在第九章中，你将学习如何借着在HTML 网页中撰写script 程序代码，来存取与显示XML 文件中个别的元素、属性与其它的组件。而在第十章中，你将发现如何使用更具威力的样式表语言－延伸样式表语言（XSL），让你不只能够安排XML 元素的内容，同时也能以高度弹性的方式来转换文件的内容。

注意

本章包含了大多数Internet Explorer 5 所支持的CSS 属性，与部分的CSS 原始版本，该版本是由World Wide Web Consortium（W3C）所制定，称为串接样式表第一级或CSS1。W3C 同时也定义了更多的CSS 进阶版本，大部分是CSS1 的超集，称为串接样式表第二级或CSS2。CSS2目前只被少数的浏览器支持，也超过了本书的范围。你可以参考位于 http://www.w3.org/TR/REC-CSS1 的完整W3C 的CSS1 规格，和位于 http://www.w3.org/TR/REC-CSS2 的完整W3C 的CSS2 规格。

使用串接样式表的基本步骤

使用串接样式表来显示XML 文件有两个基本步骤：

1. 建立样式表档案。

2. 将样式表链接到XML 文件。

第一个步骤：建立样式表档案

串接样式表是一个完全的纯文本文件，一般以.css 作为扩展名，内含一组告诉浏览器如何安排与显示特定XML 文件中元素的规则。在利用XML 文件时，你可以使用你喜爱的文书编辑器来建立串接样式表。

列表7-1 包含一个简单的串接样式表范例。（你可以在随书光盘的 Inventory01.css 档案中找到。）

Inventory01.css

/*File Name:Inventory01.css */

BOOK

{display:block;

margin-top:12pt;

font-size:10pt}

TITLE

{font-style:italic}

AUTHOR

{font-weight:bold}

这份样式表被设计来附加到显示在列表7-2 的XML 文件中。（你可以在随书光盘的 Inventory01.xml 档案中找到。）你可以在含有列表7-2 的页面上作个记号－因为该列表还会出现在本章的其它范例中，而你也将回来参考它。

Inventory01.xml

<?xml version="1.0"?>

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

<BOOK>

<TITLE>The Adventures of Huckleberry Finn</TITLE>

<AUTHOR>Mark Twain</AUTHOR>

<BINDING>mass market paperback</BINDING>

</BOOK>

<BOOK>

<TITLE>Leaves of Grass</TITLE>

<AUTHOR>Walt Whitman</AUTHOR>

<BINDING>hardcover</BINDING>

</BOOK>

<BOOK>

<TITLE>The Legend of Sleepy Hollow</TITLE>

<AUTHOR>Washington Irving</AUTHOR>

<BINDING>mass market paperback</BINDING>

</BOOK>

<BOOK>

<TITLE>The Marble Faun</TITLE>

<AUTHOR>Nathaniel Hawthorne</AUTHOR>

<BINDING>trade paperback</BINDING>

</BOOK>

<BOOK>

<AUTHOR>Herman Melville</AUTHOR>

<BINDING>hardcover</BINDING>

</BOOK>

<BOOK>

<TITLE>The Portrait of a Lady</TITLE>

<AUTHOR>Henry James</AUTHOR>

<BINDING>mass market paperback</BINDING>

</BOOK>

<BOOK>

<TITLE>The Scarlet Letter</TITLE>

<AUTHOR>Nathaniel Hawthorne</AUTHOR>

<BINDING>trade paperback</BINDING>

</BOOK>

<BOOK>

<TITLE>The Turn of the Screw</TITLE>

<AUTHOR>Henry James</AUTHOR>

<BINDING>trade paperback</BINDING>

</BOOK>

</INVENTORY>

注意

列表7-1 中的范例样式表与列表7-2 的范例XML 文件都是你在第二章的＜显示使用串接样式表的XML 文件＞中所作练习的副本。

一份样式表是由一个或多个规则（rules）（有时称为规则集（rule sets））所组成。规则包含了XML文件中某个元素的显示信息。在范例样式表中包含了三个规则：分别针对BOOK元素、TITLE元素，与AUTHOR 元素。下面是BOOK 元素的规则，内含规则的所有职责卷标：

selector 是套用该显示信息元素型态的名称。

紧跟在selector 之后是declaration block，被大括号（{}）包围且内含一个或多个宣告，以分号区隔（;）。

每一个宣告详细指明了特定属性的相关设定，例如用来显示元素的字号。宣告是由一个属性，后面接着冒号（:），再接着一个属性值组成。例如，下面的宣告将font-size 属性设定成10pt (10点)：

样式表也可以包含批注。样式表的批注由斜线加上星号（/*）作为开始，以星号加斜线（*/）作为结束。在这两个限定字符组之间，你可以输入任何你想要的文字，当浏览器读取样式表以编排文件时，它会忽略这些批注文字。你可以使用批注来帮助文件更具可读性。在列表7-1 中，样式表起始部分的批注就是一个批注范例：

/*File Name:Inventory01.css */

当开发样式表时，你也可以使用批注来暂时地启动规则或部份规则。例如，如果你想要看看BOOK元素在没有顶端的页边空白的样字，你可以暂时地将批注字符加到下面的BOOK 规则中：

BOOK

{display:block;

/*margin-top:12pt;*/

font-size:10pt}

注意

空格符（空白、tab 键与跳行）可以分开不同的CSS 文件，就像宣告区块中的个别宣告。本书使用空格符只有一种可能的方式。你可以利用任何可以帮助你组织与安排个人样式表的方法来使用空格符。例如，你可能将属于同一个规则的所有宣告放在同一行上，而不是像范例中你所见到的，将它分散在不同行中。

列表7-1 中的范例样式表包含了下列宣告：

display:block 在元素本文的前后加入换行。（这个设定有其它的实作方式，你将在本章稍后学到。）

margin-top:12pt 在文件的本文上方加入一个12 点宽的页边空白。

font-size:10pt 将用来显示元素文字的字号设定成10 点大小。

font-style:italic 以斜体方式显示元素的文字。

font-weight:bold 以粗体方式显示元素的文字。

下面是Internet Explorer 5 如何使用这份样式表来显示XML 文件，后面接着由这些宣告所提供的的指令。

这组串接样式表中可以获得的属性集合与那些你可应用在文书编辑器中文字的属性很类似。在本章稍后，你将学到关于你能使用的不同属性与你能够指定给这些属性的值。

CSS 中的大小写一致

在Internet Explorer 5 中，串接样式表中字符的大小写是一样的。亦即，当Internet Explorer 5处理样式表时，它会忽略字母的大小写。例如，你可以运用三种方法来输入下面规则：

TITLE

{font-style:italic}

Title

{FONT-STYLE:Italic}

title

{Font-Style:ITALIC}

串接样式表中的大小写一致拥有重要的涵意。因为XML 文件是有大小写之分的，你可以正常拥有两个不同的元素型态其名字的大小写不同，例如Book 与BOOK。然而，在串接样式表中，这两个名字会被视为相同的元素型态，而且你也无法为这两个元素型态指定不同的属性设定。因此，如果你想使用串接样式表来显示XML 文件，你应该让元素型态的名字所有的字符的大小写都不一样。

继承属性设定

通常，你指定给特定元素（如BOOK 元素）的属性设定会影响到直接或间接套迭于该元素内的子元素，除非子元素被不同的属性设定所影响，父元素的属性才不会影响到子元素。然而，下面的属性却是例外的，而且将不被子元素所继承：

display 属性，将在本章后面＜设定displa 属性＞中介绍。

背景属性（background-color（背景色彩）、background-image（背景影像）、background-repeat（背景重复）、与background-position（背景位置），将在本章后面＜设定背景属性＞中介绍。

vertical-align 属性，将在本章后面＜设定文字间隔与行高属性＞中介绍。

方块属性，将在本章后面＜设定方块属性＞中介绍。

例如，列表7-1 中的范例样式表将BOOK 元素（位在列表7-2 中的文件中）显示成这个样子：

BOOK

{display:block;

margin-top:12pt;

font-size:10pt}

每一个BOOK 元素拥有五个子元素。因为font-size（字号）是一个被继承的属性，所以BOOK元素内的所有子元素都会以10 点字号被显示。然而，子元素被不会继承display 与margin-top （上方边界）的属性设定（margin-top 是方块属性的一种）。

当属性是一个非继承的属性，且你并未替元素指定属性值时，浏览器将使用属性的默认值。例如，display 属性的默认值是inline。本章为每一个非继承的属性都指定了默认值。

因为许多属性的值都是继承而来，所以当你设计样式表，你可能会想要先从顶层的元素开始，然后往下继续设计更多紧密套迭的元素，你将只需作一些微调工作并加入一个偶尔的覆写设定。这个方法会将不必要的属性设定减到最少（也就是说，子元素将继承设定，因此你不需指派属性设定）。

在本章后面的＜在串接样式表中进行串接＞章节中，你将学得更多有关继承的知识与继承如何配合的全部串接机制。

使用多个元素与多个规则

你可以将单一的规则套用到数个元素，只需将所有元素的名称包含在选择者中，并以逗号来分隔每一个名称。例如，下面的规则应用到POEM、TITLE、AUTHOR、DATE，与STANZA 等组件型态：

POEM,TITLE,AUTHOR,DATE,STANZA

{display:block;

margin-bottom:12pt}

如果一组元素共同使用同一组属性设定，借着将这些元素全部包含在单一规则中，而不是将这些设定分散在不同规则中，你将可以让你的样式表变得更短，且更容易让人了解。

你也可以将给定的元素型态包含在超过一个以上的规则中，这些规则是位在相同的样式表中。例如，下面的规则都包含在DATA 元素中：

POEM,TITLE,AUTHOR,DATE,STANZA

{display:block;

margin-bottom:12pt}

DATE

{font-style:italic}

第一个规则包含了DATA 与其它被列出元素所共同使用的宣告，而第二个规则对DATA 进行微调－意即，它指定了只能被应用到DATA 的属性设定。

使用上下文选择器

在选择器中，你可以将一个或多个被继承元素的名称（父元素、父元素加上父元素的父元素（即祖父元素）等等）放置在元素名称之前，而且该规则只适用于拥有此套迭名称的元素。一个包含一个或多个被继承元素名称的选择器，被称为上下文选择器（contextual selector）。而一个不包含被继承元素名称的选择器（例如你在前面章节中所见到的选择器）则称为一般选择器（generic selector）。

如果特定属性的某条规则拥有上下文选择器的设定，而且该元素还有另一条规则内含一般选择器的设定，那么位在上下文规则中的设定将取得更高的优先权，因为它比较特殊。

例如，假设下面是一份XML 文件的根元素：

<MAPS>

<CITY>

<NAME>Santa Fe</NAME>

<STATE>New Mexico</STATE>

</CITY>

<STATE>California</STATE>

</MAPS>

附加样式表中的下列规则可能会导致浏览器将「New Mexico」以一般字型编排，但「California」则是以斜体字型编排：

CITY STATE

{font-style:normal}

STATE

{font-style:italic}

虽然New Mexico STATE 元素和CITY STATE 规则中的上下文选择器与位在STATE 规则中的一般选择器相配，但因为CITY STATE 规则中的选择器比较特殊，所以拥有较高的优先权。（在本章稍后的＜在串接样式表中进行串接＞章节中，你将学得更多冲突规则优先权的相关知识。）

注意

请确定你并未在上下文选择器中的元素名称之间加入逗号（,）。否则，该规则将适用所有的元素（如同前面章节中所叙述的），而不是最后被列出的字元素。

使用STYLE 属性

你可以在XML 文件中使用特殊的STYLE 属性－而不是在样式表中－来将一个或多个特殊属性设定指派给个别的元素。如果透过STYLE 属性来指派的属性设定与其它在附加样式表中设定的属性相冲突，则透过STYLE 属性的设定拥有较高的优先权。因此，STYLE 属性是一种简便的覆写方法－对于特殊元素－为附加样式表中STYLE 元素型态所做的一般属性设定。然而，使用STYLE 属性的确违反了将格式信息与XML 档案中文件内容的定义与结构分开的CSS 原则。

要指定一个或多个属性设定，将宣告包含在被引号包围的STYLE 属性的属性值中，以分号来区隔个别的宣告，就像你在CSS 宣告区段中所作的一样。

例如，列表7-1 中的范例样式表将TITLE 元素以斜体、10 点字号来编排。然而，如果你将下面的STYLE 元素包括在文件中特殊的TITLE 元素里的起始卷标中，只有该元素会以罗马正铅体字型（roman）（而不是斜体）、14 点字号被显示：

The Adventures of Huckleberry Finn

</TITLE>

下面是该文件在Internet Explorer 5 中看起来的样子。

提示

在有效的XML 文件中，在你使用该属性之前，你需要在DTD 中宣告STYLE 属性。你应该将属性宣告如下：

<!ATTLIST TITLE STYLE CDATA #IMPLIED>

汇入其它样式表

你可以在你的串接样式表中使用 @import 指令来合并一个或多个其它的样式表。汇入不同样式表的选项让你可以将相关的样式规则储存在不同的档案中，然后将它们视需要来与特殊型态的文件结合。

下面是 @import 指令的一般格式，其中StyleSheetURL 是包含你想要汇入的串接样式表档案的完全或相对的URL（统一资源寻址器）：

@import url(StyleSheetURL);

想取得更多有关指定URL 值的信息，请参考下面网页中＜指定URL 值＞的部分。例如，下列指令（使用相对URL）被放置在列表7-1 中的样式表的起始部分，将会把包含在档案Book.css（该档案必须与被汇入的样式表放在同一个目录下）中的样式表汇入：

/*File Name:Inventory01.css */

@import url(Book.css);

BOOK

{display:block;

margin-top:12pt;

font-size:10pt}

/*rest of style sheet...*/

@import 指令必须在样式表的起始部分执行，先于任何规则之前。你可以将数个 @import 指令包含在样式表的起始部分。

当你汇入一个或多个样式表时，浏览器会将包含在被汇入样式表中的规则与汇入的样式表相结合。然而，如果任何规则发生冲突，要求汇入的样式表将比被汇入的样式表取得较高的优先权。而且如果你汇入数个样式表，在档案中稍后被汇入的样式表中的规则相较于之前被汇入的样式表，将会取得较高的优先权。想取得更多有关优先权的资料，请参阅本章稍后的＜在串接样式表中进行串接＞的章节。

指定URL 值

URL 是标准的因特网地址，例如 http://mspress.microsoft.com/ 。@import 指令与background-image（背景影像）属性都需要一个URL 的值来指定相关资源的位置（样式表或影像文件）。你可以使用下列的方式来指定URL 的值，其中URL 是URL 地址。注意，你不能将空白放置在url 与「( )」字符之间。

url(URL)

你可以使用完全合格的URL，如这些范例所示：

@import url(http://www.my_domain.com/stylesheets/MyStyles.css);

INVENTORY

{background-image:url(file:///E:\Example Code \Background.gif)}

或者，你可以使用局部的URL，来指定相对于包含URL 的样式表档案位置的相对位置。样式表中相对的URL 就像HTML 网页中的相对URL。例如，如果样式表档案是位于范例程序代码所在目录，下面的相对URL 会等于前面范例中完整的URL（即file:///E:\Example

Code\Background.gif）：

INVENTORY {background-image:url(Background.gif)}

第二个步骤：将样式表链接到XML 文件中

要将串接样式表链接到XML 文件中，你可以将保留的xml-stylesheet 处理指令加到文件中。这个指令拥有下面一般格式，其中 CSSFilePath 是表明样式表档案位置的URL：

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

你可以使用完整的URL，就像这样：

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

href="http://www.my_domain.com/Inventory01.css"?>

然而，一般来说，你可以使用局部的URL，它指定了相对于包含xml-stylesheet 处理指令的XML文件位置的相对位置，就像这个：

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

（相对URL 比较普及，因为你通常将样式表档案储存在与XML 文件相同的目录下，或者是在该目录的子目录中。）

你通常将 xml-stylesheet 处理指令加到XML 文件的序文中，接在XML 宣告的后面，如同你在列表7-2 的XML 文件中所看到的。（想获得更多有关处理指令的相关数据，以及所有你能够合法放置这些指令位置的叙述，请参阅第四章中的＜使用处理指令＞。）将外部的样式表附加到XML 文件的能力让你能够以非常弹性的方式来安排文件。借着简单地附加不同的样式表，你可以彻底地改变文件的格式。而要附加不同的样式表，你只需编辑位在 xml-stylesheet 处理指令中的URL，而不用对XML 文件作出任何改变。

当你链接一个样式表到XML 文件时，你可以直接用Internet Explorer 5 来打开文件。例如，你可以输入文件的URL 或档案路径到IE5 的网址栏并按下 Enter ，将文件直接显示于Internet Explorer 5。

Internet Explorer 5 将开启XML 文件并使用位在被链接样式表中的指令来显示文件。

注意

如果浏览器无法找到在xml-stylesheet 处理指令中指定的样式表，它将使用自己的属性设定来显示文件的内容（例如，浏览器目前的字型种类与字号设定）。而且，如同你在第二章所学到的，如果XML 文件不是链接到样式表（亦即，文件并未包含xml-stylesheet 处理指令），Internet Explorer 5 将会显示XML 文件的原始程序代码，而不是文件的内容。

借着为每一个样式表加入xml-stylesheet 处理指令，你可以将多个样式表含括在XML 文件中，如这个XML 文件起始部分的范例所示：

<?xml version="1.0"?>

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

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

</INVENTORY>

链接数个样式表的选项让你可以将相关的规则群组储存在个别的档案，然后将它们视特定型态文件的所需来进行组合。

当你链接多个样式表，Internet Explorer 5 会将来自不同样式表的规则予以整合。如果不同的样式表包含了相冲突的规则，则较晚被链接到文件的样式表的规则将会比那些较事前绑定到文件的样式表中的规则取得较高的优先权。（在之前的范例中，位于Book02.css 中的规则将会比位在Book01.css 中的冲突规则取得较高的优先权。）在下一节中，你将学得更多有关冲突规则之间优先权的相关知识。

在串接样式表中进行串接

串接样式表中的「串接」代表你可以在数个不同的层级中将值指派给属性（就像串接字符串在不同层级中溢出）。下面列表描述了你可以将值指定给属性所在的主要层级。在此依各层级的优先权顺序来列出这些层级－从最高到最低。当浏览器准备显示元素时，如果给定的属性如font-size 在不同的层级中被指定了冲突的属性值，则浏览器将使用在最高优先权层级中所设定的属性值。

1. 如果你为XML 文件中特殊元素STYLE 属性中的属性（property）指派属性值，浏览器将使用该值来显示该元素。例如，它将以粗体来显示下面元素：

<TITLE STYLE="font-weight:bold">Leaves of Grass</TITLE>

2. 如果你不透过STYLE 属性来设定属性，浏览器将使用在CSS 规则中宣告的属性值与上下文选择器（意即，一个具体指定元素连同数个该元素的被继承元素，如同稍早在＜使用上下文选择器＞中所讨论的）。例如，假设下面是XML 文件的文件元素：

3. <MAPS>

4. <CITY>

5. <NAME>Santa Fe</NAME>

6. <STATE>New Mexico</STATE>

7. </CITY>

8. <STATE>California</STATE>

</MAPS>

同时也假设附加的样式表包含了下列规则：

CITY STATE

{font-style:normal}

STATE

{font-style:italic}

浏览器将使用CITY STATE 规则来安排「New Mexico」STATE 元素，因为它有一个上下文选择器且因此取得较STATE 规则高的优先权，因为STATE 规则只拥有一个一般选择器。「New Mexico」元素将会以一般字型出现。

9. 如果你并未在拥有上下文选择器的规则中宣告特定属性的属性值，浏览器将使用在包含一般选择器（意即，只包含元素名称的选择器）规则中宣告的属性值。例如，在步骤2 的范例样式表中，浏览器无法为「California」 STATE 元素找到对应的上下文规则，所以它将使用一般的STATE 规则，因此将以斜体字型显示「California」元素。

10. 如果你并未在一般规则中为元素宣告特定属性的属性值，浏览器将使用最近的被继承元素（父元素，父元素的父元素，诸如此类）中宣告的属性设定。例如，在列表7-1 中的样式表中，TITLE 元素的规则并未替font-size 属性指定值：

11. TITLE

{font-style:italic}

因此，浏览器将使用元素的父元素，BOOK（BOOK 是使用样式表的XML 文件中TITLE 元素的一部分）中的font-size 属性设定：

BOOK

{display:block;

margin-top:12pt;

font-size:10pt}

它将因此而使用10 点大小的字型来显示TITLE 元素的文字。

然而，请注意，这项处理将只为继承的属性发生。对于非继承元素，浏览器将使用属性的默认值（参阅本章稍早所介绍的＜继承属性设定＞）。

12. 如果样式表中并未替被继承元素包含属性的设定，则浏览器将使用自己的设定。该设定可能会是浏览器中内建的默认值，或者是由浏览器使用者所设定的值。例如，因为列表7-1 中的范例样式表并未替任何元素设定font-family 属性，所以浏览器将使用自己的font-family 值来显示所有元素。（在Internet Explorer 5 中，除非浏览器的使用者透过工具列上的Internet 选项指令来选择不同的字型群组，否则font-family 属性的默认值是Times New Roman。）

再次提醒你，这项处理将只为被继承的属性发生。对于非继承元素，浏览器将使用属性的默认值。

如同你从这份列表可以看到的，一般原则是这样：如果你在不同的层级为属性指定了冲突的属性值，浏览器将赋予比特殊规则较高的优先权。例如，元素本身的属性设定较其父元素的设定更为特殊，而且将因此而取得优先权。你可以使用这项原理来厘清更复杂的情况。（例如，如果子元素的父元素拥有上下文规则与一般规则，浏览器将为子元素采用哪个规则？没错，浏览器将使用上下文规则！）

注意

前面列表中优先权的顺序不是绝对的。浏览器的属性设定可能会取得比你附加在XML 文件样式表中的属性设定较高的优先权。这让拥有特殊需求的使用者取得格式安排的控制权（例如，视力受损的使用者可以使用超大字体）。在Internet Explorer 5 中，借着从工具列选单上选择 Internet 选项指令，在 Internet 选项对话盒的一般标签页中，按下套用按钮并选择适当的选项，使用者可以赋予浏览器的属性设定比样式表设定较高的优先权。

如果在同一个层级中，特殊属性被赋予了冲突的属性值，会发生什么事呢？在这种情况下，浏览器会采用它所处理的最后属性设定。例如，如果支持同一个元素的两个一般规则在font-style 属性上拥有相冲突的属性设定，如下面范例中所示，则浏览器会采用第二个设定，因为它最后被处理：

TITLE,AUTHOR,BINDING,PRICE

{display:block;

font-size:12pt;

font-weight:bold;

font-style:italic}

AUTHOR

{font-style:normal}

因此，在这个范例中，它将以一般字型而不是斜体来安排AUTHOR 元素。

下列要点描述了浏览器在处理样式表规则时的顺序：

如果你使用 xml-stylesheet 处理指令来链接数个样式表到文件上，浏览器会采用你在处理指令中所设定的顺序来处理样式表。

如果你使用 @import 指令（如同在稍早＜汇入其它样式表＞章节中所介绍的）来汇入一个或多个样式表到某个样式表中，浏览器在处理所有汇入的样式表之前会先处理被汇入的样式表，而且它将以你汇入各个样式表的顺序来处理汇入的样式表。

在特殊的样式表中，规则会依它们被列示的顺序来被处理。

注意

浏览器使用最后它所处理的样式属性的规则，与XML 处理器遭遇多个属性或实体宣告时的规则正好相反。如前面章节所介绍的，XML 处理器将使用第一个属性或实体宣告并忽略其后的宣告。

||||||设定显示属性

display 属性控制了浏览器显示元素文字的基本方式。你可以为该属性指派下面三种CSS 关键词的任何一种：

block 浏览器总是在元素文字（包含了属于任何子元素的文字）之前或之后加入一个换行指令。结果，元素的文字被显示在个别的「区块」中，其上有前置文字，下接后续文字。借着将不同的方块（box）属性套用到文字区块，如边界、可看见的框线，与补白等，让你也可以安排文字的格式。（本章稍后将讨论方块属性。）block 元素因而很类似文字处理软件中的段落符号，利用换行符号来分隔前置与后续文字，而这些段落符号通常可以是边界、框线等等。

inline (预设选项) 浏览器并不会在文字之前或之后加入换行指令（除非前置文字或元素文字已经到达窗口的右边边界且浏览器需要将文字放到下一行）。只有在需要将文字编排以适合窗口规格时，它才会在元素的文字中加入换行。因此元素的文字可以和前置文字及后续文字位在同一行。inlin 元素与文字处理软件中段落内的一连串文字很类似。

none 浏览器并不显示元素。你可以为负责储存你想在屏幕上隐藏信息的元素使用这项设定。

注意

CSS 规格指定不被子元素继承的display 属性。如果你为元素的display 属性指定了block 设定，这毫无问题。然而，子元素实际上继承了none 设定，因为当你将这项设定指派到父元素的display属性时，你同样可以隐藏所有的子元素。同时也请注意，inline 元素的子元素将会也被继承，因为如果它们没有display 属性值时，inline 就成了预设的设定。

想获得更多有关将CSS 关键词指派给属性的相关信息，请参阅接下来的＜指定CSS 关键词的值＞章节。

例如，假设你使用下列的样式表来显示列表7-2 中的范例XML 文件（当改变被用来显示XML文件的样式表时，你需要在文件中编辑 xml-stylesheet 处理指令）：

BOOK

{display:block;

margin-top:12pt;

font-size:10pt}

TITLE

{font-style:italic}

AUTHOR

{font-weight:bold}

PAGES

{display:none}

因为BOOK 元素的display 属性被指定成block 值，所以浏览器总是在元素的文字之前或之后加入换行。（BOOK 元素拥有文字内容。它的文字由属于所有BOOK 的子元素的文字所组成。）因为样式表并未替TITLE、AUTHOR、BINDING，与PRICE 元素（这些元素并未从它们的父元素继承display 属性值）指定display 属性的值，浏览器将它们视为inline 元素，为默认值。因此，浏览器在这些元素之间并不加入换行，而且－提供浏览器足够的宽度－浏览器将所有元素显示在同一行。因为PAGES 元素的display 属性被指定了值none，所以浏览器并不显示该元素。下面是全部的结果：

指定CSS 关键词的值

对于许多CSS 属性来说，你可以－或必须－借着使用预先定义的CSS 关键词来指定它们的属性值。你可以使用的特定关键词是根据特定属性来决定。例如，你可以为display 属性指定三个关键词中的一个：block、inline 或none。你可以为color 属性指定叙述基本颜色的十六个关键词之一，如这个范例中的red、grene、yellow、fuchsia：

PARA {color:fuchsia}

而且你可以为border-style 属性指定九个关键词中的一个：solid、dotted、dashed、double、groove、ridge、inset、outset 或none，如下所示：

SECTION {border-style:solid}

设定字型属性

CSS 标准提供了下列属性，负责修改用来显示元素文字的字型：

font-family

font-size

font-style

font-weight

font-variant

这些属性全部都被子元素继承。

设定font-family（字型群组）属性

font-family 属性指定了被用来显示元素文字字型的名称，如下面范例所示：

BOOK {font-family:Arial}

你可以输入任何想要的字型名称。（它们并不是预先定义的CSS 关键词。）如果浏览器无法找到指定的字型，它会自动以现有的字型来替换。

注意

如果字型名称包含空白，则利用引号包围整个字符串，如这个范例所示：BOOK{font-family:"Times New Roman"}。

你可以借着列出数个供选择的字型，利用逗号分开，以你喜爱的顺序来安排，来增加获得想要字型的机会。下面是个范例：

BOOK {font-family:Arial,Helvetica}

如果名为的Arial 字型无法获得，浏览器将使用Helvetica 字型。如果Helvetica 字型也无法使用，它将换成其它可以使用的字型。而且你可以更进一步借着包括CSS 关键词－通常在列表的底端－指明你想要的一般字型，来增加获得要求字型的机会，如下面范例所示：

BOOK {font-family:Arial,Helvetica,sans-serif}

在这里，如果浏览器无法找到Arial 或Helvetica，它将改用其它无衬（Sans serif）字体字型（指没有衬线的字型，也称为gothic 字型）。

下面的表格列出了你可以用来指定你想要字型的一般型式的关键词。CSS 规格称这些关键词为generic family names。对于每一个generic family name，表格也会提供属于该群组的特殊字型的名称，以及当你要求使用该字型时，Internet Explorer 5 所显示文字的范例。（Internet Explorer 5 显示的特定字型会依照目前安装在Microsoft Windows 中的字型群组来决定，所以你看到的字型可能会不一样。）

字型群组的一般群组名称

特殊字型范例

文字实例

serif

Times New Roman

The Adventures of Huckleberry Finn

sans-serif

Aria

The Adventures of Huckleberry Finn

monospace

Courier New

The Adventures of Huckleberry Finn 例如，如果你将下面的样式表附加到显示于列表7-2 中的文件中，Internet Explorer 5 会显示文件如下图所示：

BOOK

{display:block;

margin-top:12pt;

font-family:Arial,sans-serif;

font-size:12pt}

TITLE

{font-style:italic}

AUTHOR

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

指定给BOOK 元素font-family 属性的Arial 字型会被除了AUTHOR 之外的所有子元素继承，AUTHOR 拥有自己的font-family 值（"Times New Roman",serif）。

设定font-size（字号）属性

font-size 属性设定了用来显示元素文字的字号。你可以为这个字型指定四种不同型式的值：

与浏览器字号成比例的尺寸值。你可以指定一个与浏览器目前所使用的字型尺寸成比例的尺寸值。要这样做，你可以使用下列表格中的关键词值。在Internet Explorer 5 中，尺寸值small 会导致浏览器使用它目前所使用的字型尺寸；而其它值则依此往上或往下延展。

字型尺寸关键词： xx-small

范例CSS 规则： TITLE {font-size:xx-small}

描述：关键词所能设定的最小字型尺寸

文字实例：

字型尺寸关键词： x-small

范例CSS 规则： TITLE {font-size:x-small}

描述：大约是xx-small 字型尺寸的1.5 倍大

文字实例：

字型尺寸关键词： small

范例CSS 规则： TITLE {font-size:small}

描述：大约是x-smal 字型尺寸l 的1.5 倍大，该值是Internet Explorer 5 目前所使用的值。

文字实例：

字型尺寸关键词： medium

范例CSS 规则： TITLE {font-size:medium}

描述：大约是small 字型尺寸的1.5 倍大。

文字实例：

字型尺寸关键词： large

范例CSS 规则： TITLE {font-size:large }

描述：大约是medium 字型尺寸的1.5 倍大。

文字实例：

字型尺寸关键词： x-large

范例CSS 规则： TITLE {font-size:x-large }

描述：大约是large 字型尺寸的1.5 倍大。

文字实例：

字型尺寸关键词： xx-large

范例CSS 规则： TITLE {font-size: xx-large }

描述：大约是x-large 字型尺寸的1.5 倍大。

文字实例：

注意

CSS 规格推荐的是1.5 倍系数。然而，在Internet Explorer 5 中不同尺寸之间的真正比例有点不同。例如，medium 真正只比small 大1.5 倍。

与父元素字型尺寸值成比例的尺寸值。你可以指定一个字型尺寸，该尺寸与父元素目前的字型尺寸成比例。要这样做，你可以利用下面font-size 属性的关键词来设定值：

字型尺寸关键词： smaller

范例CSS 规则： TITLE {font-size:smaller}

描述：较父元素约小33%的字型尺寸（或对根元素来说，比浏览器字型小33%）

文字实例：

字型尺寸关键词： larger

范例CSS 规则： TITLE {font-size:larger}

描述：较父元素约小50%的字型尺寸（或对根元素来说，比浏览器字型小50%）

文字实例：

注意

前面表格中所提供的33%与50%是以CSS 规格中建议的1.5 倍编排比例系数为基础。真正的规则可能不同。

父元素字型的尺寸值百分比。你可以将字型尺寸值指定为与父元素目前字型尺寸成比例，借着指派一个百分比值到font-size 属性，可以获得较精确的设定，而不是使用较大或较小这种模糊的设定。例如，下面规则要求字型尺寸是父元素字号的一又二分之一倍：

TITLE {font-size:150%}

（如果浏览器使用了CSS 所推荐编排的1.5 比例，这个规则将会和规则TITLE

{font-size:larger}相等。）

下面的规则要求字型尺寸要比前一个规则中的字型稍大：

TITLE {font-size:160%}

请注意，对于根元素而言，百分比是以浏览器的字型尺寸为基础。（想获得更多有关指定百分比值到属性中的知识，请参阅下面＜指定百分比值＞的相关信息。）

特殊尺寸值。借着为font-size 指定尺寸值（size value），你也可以指定元素的字型尺寸。（本章稍后的＜设定尺寸值＞中将描述尺寸值的不同型式。）例如，下面的规则指定了12 点大小的字型尺寸：

TITLE {font-size:12 pt}

而下一个规则指定字型尺寸是父元素字型的两倍大：

TITLE {font-size:2 em}

（第二个范例等于<程序代码>TITLE {font-size:200%}</程序代码>）

指定百分比值

你可以为某些属性值指派百分比数值。当你关心不同组件的字型尺寸的比例关系大于真正的尺寸值时，百分比数值特别有用。

百分比数值将某些属性的大小以其它数值的百分比来表示。而若其它数值也是依赖你设定的特定数值来决定时会发生何事？通常，它会用元素本身的大小。例如，下面的设定让行高变成元素目前字型高度的两倍，产生两倍的行列间距：

SECTION {line-height:200%}

然而，对于font-size 属性，百分比值参考的是元素父元素目前的字型尺寸。例如，下面的规则将元素的字型高度设定成其父元素目前字型的三倍高：

PARAGRAPH {font-size:75%}

注意，如果元素继承了一个百分比的属性值，它继承了经运算后所得结果，而不是百分比值本身。（否则，若连续的继承元素都继承了百分比值，则字型尺寸在每一代中会保持连续变大或变小。）

指定尺寸值

许多CSS 属性可以，或必须被指定尺寸值。尺寸值指定了字型的尺寸、背景影像的位置、字符间距、缩排、行高、边界宽度、框线宽度、元素高度，以及其它属性。你可以为采用尺寸值的属性设定绝对尺寸值或相对尺寸值。

绝对尺寸值（absolute size value）是使用测量的标准单位来设定精确值的属性数值。测量的标准单位包括了英吋、点（point）或公厘。下面的表格列出了你必须使用的缩写字符以指定规则中的单位，而且它也显示了其它单位对应的数字。

*cm = centimeters; in = inches; mm = millimeters; pc = picas; pt = points

例如，下面两个规则采用了绝对的尺寸值：

STANZA {font-size:12pt}

PARAGRAPH {margin-top:.25in}

相对尺寸值（relative size value）则是一个相对于元素的目前字型的尺寸，或相对于屏幕上用来显示文件点素尺寸的尺寸值。（点素（pixel）是图像的元素－一个在计算机屏幕或电视上组成影像的个别点素其中之一。）下面的表格列出了你能够使用的相对尺寸单位：

单位单位的尺寸

em The height of the element's current font 元素目前字型的高度

ex 元素目前字型小写x 字符的高度

px 屏幕上点素的尺寸

一个例外是当你指定em 或ex 单位到font-size 属性时，该值参考的是父元素字型的尺寸。

例如，下面的规则加入了顶端边界到元素中。空白的高度将相等于元素字型的高度：

BOOK {margin-top:1em}

下面的规则则建立了一个15 点素高的顶端边界：

SECTION {margin-top:15px}

而下面的规则是将元素的字型高度设定成四分之三倍父元素字型的高度：

PARAGRAPH {font-size:.75em}

（最后这个规则与你在前面文章中看到的<程序代码>PARAGRAPH{font-size:75%}</程序代码>范例规则是一样的。）

注意，如果子元素继承了相对值，它是继承了该值的计算结果，而不是相对值本身。

设定font-style（字型样式）属性

font-style（字型样式）属性控制了元素的文字是否以斜体（italic）或一般直立（罗马正体铅字（normal））字符来显示。你可以将这个属性指定成下面三个关键词值中的一个：

字型尺寸关键词： italic

范例CSS 规则： TITLE {font-style:italic}

影响：如果可用，指定斜体字型。如果没有，将之换成倾斜体（oblique）字型

文字实例：

字型尺寸关键词： oblique

范例CSS 规则： TITLE {font-style:oblique}

影响：如果可用，指定倾斜体字型（将罗马正体铅字字型的文字倾斜而产生）

文字实例：

字型尺寸关键词： normal

范例CSS 规则： TITLE {font-style:normal}

影响：指定罗马正体铅字字型

文字实例：

设定font-weight 属性

font-weight 属性决定了元素的字符能够以多粗多黑的字体出现（那就是，多黑与多粗）。你可以将该属性指定成下面十三个关键词值中的一个：

font-weight 关键词： normal

范例CSS 规则： TITLE {font-weight:normal}

影响：以普通等级的粗黑体字型来显示文字

文字实例：

font-weight 关键词： bold

范例CSS 规则： TITLE {font-weight:bold}

影响：以典型的粗黑体字型来显示文字

文字实例：

font-weight 关键词： bolder

范例CSS 规则： TITLE {font-weight:bolder}

影响：以比父元素字型更粗更黑的字型来显示文字（或者，对根元素而言，是比浏览器字型更粗更黑的字型）

文字实例：

font-weight 关键词： lighter

范例CSS 规则： TITLE {font-weight:lighter}

影响：以比父元素字型较细较亮的字型来显示文字（或者，对根元素而言，是比浏览器字型较

细较亮的字型）

文字实例：

font-weight 关键词： 100

范例CSS 规则： TITLE {font-weight:100}

影响：以font weight 属性中允许的最浅程度粗黑字型来显示文字。

文字实例：

font-weight 关键词： 200

范例CSS 规则： TITLE {font-weight:200}

文字实例：

font-weight 关键词： 300范例CSS 规则： TITLE {font-weight:300}

文字实例：

font-weight 关键词： 400

范例CSS 规则： TITLE {font-weight:400}

影响：相当于为属性指定normal 关键词值

文字实例：

font-weight 关键词： 500

范例CSS 规则： TITLE {font-weight:500}

文字实例：

font-weight 关键词： 600

范例CSS 规则： TITLE {font-weight:600}

文字实例：

font-weight 关键词： 700

范例CSS 规则： TITLE {font-weight:700}影响：相当于为属性指定bold 关键词值

文字实例：

font-weight 关键词： 800

范例CSS 规则： TITLE {font-weight:800}

文字实例：

font-weight 关键词： 900

范例CSS 规则： TITLE {font-weight:900}

影响： font-weight 所能设定的最粗黑的字型

文字实例：

浏览器可能无法将这些不同程度的粗黑体全部显示出来。在右边行中的范例是Internet Explorer 5 响应每一个font-weight 属性值所显示的真正文字。

设定font-variant 属性

你可以使用font-variant 属性来将元素的文字转换成大写字符。你可以使用下面两个关键词值之一来设定font-variant 的属性值：

fontweight 关键词： small-caps

范例CSS 规则： TITLE {font-variant:small-caps}

影响：将文字全部转换成大写字符

文字实例：

font-weight 关键词： normal

范例CSS 规则： TITLE {font-variant:normal}

影响：将文字维持在原来的大小写状态（亦即，不作任何转换）

文字实例：

设定色彩属性

color 属性（色彩）设定了元素文字的颜色。你可以借着使用下面「设定色彩值」的相关信息来为该属性设定色彩值。例如，下面规则将AUTHOR 元素的文字设定成亮蓝色：

AUTHOR {color:blue}

而下面的规则将AUTHOR 元素的文字设定成亮红色：

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

color 属性会被子元素继承。因此，如果你将下面的样式表附加到列表7-2 中的范例XML 文件中，所有的文字都会变成亮蓝色，除了PRICE 文字之外，该字会变成亮红色，因为样式表中包含了为这个元素所做的覆写性色彩设定：

BOOK

{display:block;

margin-top:12pt;

font-size:10pt;

color:blue}

TITLE

{font-style:italic}

AUTHOR

{font-weight:bold}

PRICE

{color:red}

提示

color 属性负责设定文字中的个别字符的颜色（有时称为文字前景颜色）。要设定文字的背景颜色，使用本章稍后＜设定背景色彩＞中讨论的背景色彩属性。

设定色彩值

你可以放入色彩值的属性有color、background-color 与border-color。你可以借着使用下列四种不同的格式之一，来设定色彩值。下面的范例介绍了这些格式。这些规则都是一样的－每一个都是将color 属性的色彩值设定成亮红色。

PARA {color:red}

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

PARA {color:#FF0000}

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

第一种格式使用了CSS 关键词（red），而其它三种格式的每一种都是借着指定颜色的红、篮、绿三原色的相对强度来设定色彩。在第二种格式中，每一种色彩强度是由十进制值的0 到255来表示。在第三种格式中，色彩则是借着使用六个从000000 到FFFFFF 的十六进制数字来指定，其中前两个位是指定红色强度，中间两个则是绿色，最后两个则是蓝色强度。在最后一种格式中，每一种颜色强度都是借着使用百分比值从0%到100%来指定。

下表列出了你用CSS 关键词所能设定的色彩值，而每一种色彩都显示了四种相等的色彩规格。（CSS 关键词使用了较易了解的名称来描述颜色，同时表格中第一个字段使用了在摄影与光学中标准的色彩名称。）

如果你使用任何一种RGB 格式，你当然可以建立许多较具个人化的色彩，超过表格中所显示的。事实上，因为你可以指定这三种格式256 种色彩值的任一种，你可以组合出总共16,777,216 种不同的自订颜色（256 * 256 * 256）。而且，如果你将文件显示在拥有24 位或更大色彩深度的系统上，显示器可以真正地显示出每一个不同颜色的深度。

设定背景属性

CSS 标准提供了下列属性让你修改元素的背景：

background-color

background-image

background-repeat

background-position

背景指的是围绕元素文字的个别字符的区域。你可以将元素的背景设定成单一颜色或是影像。技术上来说，子元素将无法继承这些属性。然而，根据预设，元素的背景是透明的。这代表如果你忽略了子元素上的全部背景属性，父元素的（或浏览器的）背景颜色或影像将穿过父元素展现，有效地提供子元素相同于父元素（或浏览器）的背景颜色。

设定background-color（背景色彩）属性

借着将色彩值指定到background-color 属性，你可以将单一的背景颜色应用到元素上。（本章稍早＜指定色彩值＞中已描述了你可以使用的不同型式色彩值。）例如，下面的规则将TITLE元素的背景颜色设定亮黄色：

TITLE {background-color:yellow}

color 属性设定元素的前景颜色的方法－那就是，字符本身的颜色。因此，下列规则在黄色背景上建立了蓝色文字：

TITLE

{color:blue;

background-color:yellow}

如果你没有为元素指定一个单一的背景颜色，你可以将background-color 属性指定成transparent，如下所示：

TITLE {background-color:transparent}

或者，因为transparent 是默认值，你可以轻易地将background-color 从元素中删除。除非你指定了背景影像到元素上，否则transparent 设定会导致父元素的（或浏览器的）背景穿透子元素显示。

||||||设定background-image（背景影像）属性

你可以借着将影像文件的URL 值设定到background-image 属性中来为元素加入背景影像。（更多有关指定URL 的信息，请参阅本章稍早的＜指定URL 值＞。）例如，下面的规则将包含在档案Leaf.bmp 中的背景影像指定到STANZA 元素：

STANZA {background-image:url(Leaf.bmp)}

要作进一步的介绍，请参考列表7-3 中的样式表。该档案会被附加到列表7-4 中的XML 文件。（你将可在随书光盘的 Leaves.css 档案与 Leaves.xml 档案中找到。）

Leaves.css

/*File Name:Leaves.css */POEM

{font-size:145%}

POEM,TITLE,SUBTITLE,AUTHOR,SECTION,NUMBER,STANZA,VERSE

{display:block}

SECTION,STANZA

{margin-top:1em}

STANZA

{background-image:url(Leaf.bmp)}

Leaves.xml

<?xml version="1.0" ?>

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

<POEM>

<TITLE>Leaves of Grass

<SUBTITLE>I Sing the Body Electric</SUBTITLE>

</TITLE>

<AUTHOR>by Walt Whitman</AUTHOR>

<VERSE>I SING the Body electric;</VERSE>

<VERSE>The armies of those I love engirth me,

and I engirth them;</VERSE>

<VERSE>They will not let me off till I go with them,

respond to them,</VERSE>

<VERSE>And discorrupt them,and charge them full with

the charge of the Soul.</VERSE>

</STANZA>

<VERSE>Was it doubted that those who corrupt their own

bodies conceal themselves;</VERSE>

<VERSE>And if those who defile the living are as

bad as they who defile the dead?</VERSE>

<VERSE>And if the body does not do as much as

the Soul?</VERSE>

<VERSE>And if the body were not the Soul,what is

the Soul?</VERSE>

</STANZA>

</SECTION>

</POEM>

下面是图像影像文件Leaf.bmp 的内容：

Internet Explorer 5 显示Leaves.xml 如下图所示：

注意，该影像会视需要不断地重复（这指铺开）以填满由元素内容占满的整个区域，几乎延展到浏览器窗口右边的边缘。（下个章节会描述如何控制铺布背景影像。）也注意在元素文字的上面或下面延伸的影像的任何部分都会被截掉。在这个范例中，位在每一个STANZA 元素底部横列上的的影像只有非常少的部分会被剪裁掉。

如果你不想为元素指定背景影像，你可以将background-image 属性设定成none，如下所示：

STANZA {background-image:none}

或者，因为none 是默认值，所以你可以简单地将background-image 属性从元素中删除。除非你为元素设定了某种背景色彩，否则none 设定会导致父元素的（或浏览器的）背景设定穿透子元素显示。

注意

如果你同时指定了背景影像与背景颜色（使用background-color 属性），则影像将会盖掉背景色彩。

设定background-repeat（背景重复）属性

如果你将影像档案指派到background-image 属性当作属性值，借着将background-image 属性设定成下列关键词值之一，你可以控制影像重复的方法：

repeat（默认值）。垂直地与水平地重复影像。因为这是默认值，所以将background-repeat:repeat 加入列表7-3 中样式表的STANZA 规则中，如下所示，对于文件被显示的方式并没有影响，如下面图形中所示：

STANZA