由前面的知识知道，在XML中，XML不能为一个特定的元素预定义显示属性。因此，它需要一个分离的样式表来描述一个XML如何才能被显示。XML的内容和表述的分离允许XML的内容能很容易被重新安排。Microsoft Internet Explorer 支持使用CSS或者XSL书写的样式表。
在本章中，将详细介绍如何使用Dreamweaver 4创建层叠样式表单的基本要素，主要包括CSS的基本概念、CSS属性、格式化模型以及CSS单位等一些基本的内容。
4.1? CSS开始文档
在本节中，将通过具体的实例来阐述在XML中如何使用CSS来表现XML的基本知识，有关更深入的知识将在后面几节中介绍。
对于将诸如粗体和斜体等样式应用于特定的XML元素来说，CSS是一种简单、易懂的语言。任何常用的字处理软件都具有CSS支持的大多数样式。例如，可选择字体、字体的粗细、字号、背景颜色、各种元素的间距、元素周围的边框等。但是，所有的样式信息并不在文档之内存储，而是放置在一种称为样式表的独立文件中。仅仅改变样式表就可以以多种不同方式格式化一个XML文档。不同的样式单可用于不同的目的，并且无需改变文档中的任何内容。
以上功能在Dreamweaver 4中很容易实现，Dreamweaver 4不但可以创建任意复杂的CSS样式表，还可以将该样式表导出为一个独立的样式表文件。
4.1.1? Style Sheets简介
层叠样式表（Cascading Style Sheets，以下简称CSS）是1996年作为把有关样式属性信息，如字体和边框加到HTML文档中的标准方法而提出来的。但是，CSS与XML结合的确比与HTML结合得更好，因为HTML承担着CSS标志和HTML标志之间向后兼容的任务。例如，要正确地支持CSS的nowrap属性就不能使用HTML中非标准的但又是经常使用的NOWRAP元素。由于XML元素没有任何预定义的格式规定，所以不会限制何种CSS样式只能用于何种元素。
在1998年，W3C公布了一个修订的、详细的CSS规范，称之为CSS2。同时，他们又把原来的CSS改名为CSS1。CSS2几乎是CSS1的超集，只有少部分不同。换句话说，CSS2是在CSS1的基础上增添了音频样式单、媒体类型、特性选择符和其他新的功能。因此，本章涉及到的几乎每个例子既适用于CSS1，也适用于CSS2。在下一章中，将把CSS2看作CSS1的扩充来加以介绍。
一个CSS样式表就是一组样式，样式中的属性在XML和HTML元素中依次出现，并显示在浏览器中。比如：绿色、斜体和Arial字体。样式可以定义在XML和HTML文档的标记中，也可以在外部附加文档中作为外加文件。此时，一个样式表可以作用于多个XML文件——甚至整个站点，因此具有更好的易用性和扩展性。
样式表究竟是怎样工作的？
假设要建立一个网页，网页上所有的<H3>文本都是红色、斜体和Arial字体。如果不懂得使用CSS，则只能按照下面的代码满足要求。
首先，选中一个使用<H3>标记的文本，然后选择Window|Properties命令，出现属性对话框，在该属性对话框中设置文本的Format为Heading3，字体为Arial。
然后，单击Size后面的 按钮，从打开的颜色选择器中选择红色（#FF0000）。
最后，单击 按钮，此时该文本对应的属性对话框如图4.1所示。
图4.1? 属性对话框
很明显，如果有100个三级标题的文本，那么就要通过对应的属性面板设置100次。这样显然不行。这时候，必须用到层叠样式表，可以创建一个样式，定义<H3>标识符样式为红色、斜体和Arial字体。一旦此样式作用于文档，每个<H3>标题都显示红色、斜体和Arial字体。这样可以一次性解决所有的问题，从而大大提高工作效率。
下面通过一个简单的实例进行说明，假设要建立一个页面，页面上所有的三级标题的文本都是黑体、绿色、带下划线。其具体操作步骤如下：
（1）启动Dreamweaver 4，新建一个文档。在工具栏中的Title文本框中输入“CSS实例”作为该文档的标题。
（2）在文档窗口中输入“这是一个绿色、黑体、带下划线的标题。”然后按回车键，进行换行，在输入“这也是一个绿色、黑体、带下划线的标题。”，通过对应的属性对话框，设置这两段文本的Format为Heading3。
（3）打开Window菜单，选择CSS Style Sheet命令，出现CSS Styles面板，如图4.2所示。
图4.2? CSS Styles面板
（4）选中该面板左下角的Apply复选框，选中这个复选框后，就不用每次需要应用格式的时候都要单击Apply按钮。单击该面板顶部右边的三角按钮 ，从打开的下拉菜单中选择New Style命令，出现New Style面板，如图4.3所示。
图4.3? New Style面板
（5）先选择Redefine HTML Tag选项，此时面板顶部的Name变成Tag，可以打开的HTML标识符列表框从中选择一个标识符，或直接输入一种HTML标识符“H3”。设置好新建样式类型后单击OK按钮进行确认。接着系统会弹出一个保存文件对话框，将该样式标保存。
（6）在保存文件后，出现层叠样式表定义面板。在Type对话框中设置各种属性如下：
- Font：黑体。
- Decoration：underline。
- Color：绿色（#00FF00）。
设置完毕后，该面板显示如图4.4所示。单击OK按钮，进行确认，并关闭该面板。
图4.4? 选择Type选项的Style Definition对话框
（7）返回到文档窗口可以看到，文档窗口中所有使用了<H3>的文字都变成了黑体、倾斜，文字颜色变为绿色，并带有下划线，文档窗口的显示如图4.5所示。
图4.5? 应用样式后的文档窗口显示效果
4.1.2? 将样式与XML结合
将样式表和XML文档组合的方法很简单，只需要在Dreamweaver 4创建的源代码中添加基本的样式表指令，其形式如下所示：
<?xml-stylesheet type="text/css" href="mystyle.css"?>
每个样式表指令必须含有一个 type 属性。这个属性的值描述了样式表应用的具体类型：“text/css”表示是一个CSS样式表，“text/xsl”表示使用了一个XSl样式表。
<?xml-stylesheet?>处理指令中的href属性值是一个URL，通常是相对值，指明在何处可找到样式单。如果样式单没有找到，Web浏览器很可能使用其缺省的样式单，不过有些浏览器可能会报告一条错误信息。
也可以将同一个样式单用于许多文档，人们通常的确就是这么做的。于是，把样式单放在Web服务器上的某个主要位置成了人们的通用方法，所有的文档都会在此位置引用这些样式单；一个便利的位置就是Web服务器根目录上的样式目录。
<?xml-stylesheet type="text/css" href="/styles/poem.css"?>
甚至还可以使用指向另一个Web站点上的样式单的绝对URL值，虽然这样做不可避免地会使站点依赖于外部Web站点的状态。
下面通过一个具体实例来说明。
1．编写XML文档
下面的这个XML样例文档描述了一个饭店的考核评审，它包含了一些特定的章节对这个考核评审的不同类型的重要信息进行描述。第一节包含了在一个名为“restaurant”的元素，并提供了关于饭店的名称、地址、电话。第二节是“review”元素，它包含了考核的数据、考核人的名字、考核日期、得到的星数。第三节是考核的主体以及最后一节是一个饭店的菜单的摘要。在Dreamweaver 4的代码窗口中输入如下代码：
<?xml version='1.0'?>
<story>
<restaurant>
<name>Red Apple Inn</name>
<address>
<street>3100 Longview Lane</street>
<city>Palabro</city>
<state>Wyoming</state>
</address>
<phone>123-555-1212</phone>
</restaurant>
<review>
<rating stars="4">****</rating>
<date>December 29, 1998</date>
<reviewer><person>Louis Framptenheimer</person></reviewer>
</review>
<body>
<p><summary>The small town of <city>Palabro</city> seems like
an unlikely place for a high-class culinary establishment, but
the <self>Red Apple Inn's</self> Chef <person>Alex
Choperoni</person> is earning a national reputation for innovative
dishes.</summary>? And rightly so, if this reviewer's recent
culinary experience is any example.</p>
<p>Within striking distance from the ski slopes at <city>Jackson
Hole</city>, the <self>Red Apple Inn</self> is a completely
restored Victorian hotel, and offers a warm and elegant atmosphere and
gracious service.? The upscale clientele includes regular
appearances by movie stars <person>Drew Barrymore</person> and
<person>Matthew Broderick</person>.? Reservations are a must, and
during the ski season it is not uncommon for the dining room to
be booked solid six weeks in advance.</p>
<p>It is hard to go wrong with a menu this packed with interesting
choices.? The crab cakes are especially fine with a thin crisp
crust that opens with a gentle prod of a fork to reveal a light,
moist, almost mousse-like interior with a rich nutty flavor.</p>
<p>The <self>Red Apple Inn</self> boasts one of the finest wine
cellars in the region.? None of the dishes we sampled were less than
outstanding. Here are a few of the selections from the daily menu.</p>
</body>
<menu>
<appetizer>
<description>Crab cakes with a creamy dill sauce served with crispy
herbed daikon fries</description>
<price>$23</price>
</appetizer>
<entree>
<description>Braised jumbo sea scallops on a tomato beurre
blanc</description>
<price>$39</price>
</entree>
<entree>
<description>Free-range chicken breast stuffed with morels in a
brandy/green-peppercorn sauce</description>
<price>$31</price>
</entree>
<entree>
<description>Tarragon roast pork loin on a bed of ginger apple slaw
and caramelized onions</description>
<price>$34</price>
</entree>
</menu>
</story>
输入以上代码后，选择File|Save命令，将该文件保存为restaurant.xml。
2．编写样式表文档
下面必须使用Dreamweaver 4创建一个CSS文件用来格式化restaurant.xml文档。其具体的操作步骤如下：
（1）启动Dreamweaver 4，新建一个文档。
（2）选择Window|CSS Style Sheet命令，出现CSS Styles对话框。
（3）选中该面板左下角的Apply复选框，选中这个复选框后，就不用每次需要应用格式的时候都要单击Apply按钮。单击该面板顶部右边的三角按钮 ，从打开的下拉菜单中选择New Style命令，出现New Style对话框。
（4）在New Style对话框中选择Redefine HTML Tag选项，此时面板顶部的Name变成Tag，然后在其后面的文本框中输入story。设置好新建样式类型后单击OK按钮进行确认。接着系统会弹出一个保存文件对话框，将该样式标保存为review.css，与restaurant.xml文件在同一个目录下。
（5）在保存文件后，出现层叠样式表定义面板。在Type对话框中设置各种属性如下：
- Font：黑体。
- Style：italic。
- Color：绿色（#00FF00）。
设置完毕后，单击OK按钮，进行确认，并关闭该对话框。通过同样的方法可以定义其他选择符的样式。并将所有CSS样式保存到review.css样式表文件中。
3．将CSS和XML文档连接起来
现在在XML文档的开始部分（在stroy元素之前）加入样式表指令，以便它能定位到刚才新建的样式表。
<?xml-stylesheet type="text/css" href="review.css" ?>
基于这样一个指令，当在一个浏览其中打开一个XML文档的时候将提供一个最基本的显示模式。
4.2? 层叠样式表
CSS对于设计者来说是一种非常灵活的工具，不必再把繁杂的样式定义编写在文档结构中，可以将所有有关文档的样式指定内容全部脱离出来，在行定义、在标题中定义，甚至作为外部样式文件供HTML调用。同时，在定义时也不必考虑各种浏览器的兼容性，因为那些古老的不支持CSS的浏览器能够将CSS的样式定义内容完全忽略，这是先前的HTML所不能做到的。
在CSS灵活多变的定义方法背后，它所能够指定的样式类型相对于HTML来说有过之而无不及。除了通用的颜色、字体、背景等样式，CSS还可以控制字符间距、填充距、大小写等50个左右的样式，显示出强大的定义能力。
CSS也是一种标记性语言，在没有打开浏览器的情况下，是不可能在看到这些元素属性的同时想象出它们的效果，所以建议读者在阅读本节时一定注意多上机实践，以达到良好的学习效果。
4.2.1? 层叠式样式表种类及样式冲突
1．层叠样式表的种类
层叠中有三种类型的样式表分别如下：
- HTML标记样式：这种样式为HTML标识符重新定义格式化，如<H3>。当重新定义格式化<H3>后，所有应用<H3>标识符的文本都会自动改变而应用新的样式。
- 自定义样式：自定义样式可以将自定义的样式应用于任何文本。如果将自定义样式应用于整段文本，则会在该段文本的源代码中加入CLASS属性，例如P CLASS="testStyle"；如果将样式应用于一行文本，则在选择的文本源代码的两边插入包含了CLASS属性的SPAN标记。
- CSS选择器样式：CSS选择器样式重新定义了特殊的标记组合以及包含特殊序列号（ID）属性标记。如<TD><H3>这样的标记组合表示在表格单元格中的文本应用2级标题；而#testStyle应用于所有包含属性值ID="testStyle"的标记中。
2．样式冲突
将一个以上的样式单与一个文档相连时（例如，一个浏览器可能有一个缺省的样式单，把此缺省的样式单加入到设计者为此页提供的样式单中）。在此情况下，有可能有多个样式作用于一个元素，这些样式会相互冲突产生不可预料的效果。好在CSS的规则为每种样式方法定义了CSS的内在级别。
一般来说，作者的样式将覆盖读者的样式，而这两者都可以覆盖UA的样式。因为样式表的设计者可以人为地提高一部分样式声明的级别，请看如下代码。
Element1? {
color: red! important;
background : white ! improtant;
}
Element2? {
font-size: 18pt ! important;
font-weight: 700
}
在上面的代码中，前三个声明的级别被提高了，而最后一个仍保持原样。读者声明重要的规则将覆盖作者的普通规则，然而作者声明重要的规则将覆盖读者的普通规则。
导入的样式表之间也会相互覆盖，任何在样式表中指定的样式规则都将覆盖导入的样式规则。也就是说，前者的级别比后者高。
下面是层叠顺序的具体规则：
（1）找出所有适用于元素、属性的声明。如果选择符合元素匹配，那么这些声明将直接发生作用。如果没有适用的声明，那么使用继承值。如果对于一个XML，HTML元素或有些CSS属性来说没有继承值，那么使用默认值。
（2）将声明按等级排列，其中标注“！important”的比未标注的级别要高。
（3）按原始排列规则，作者的样式表覆盖读者样式表，读者的样式表覆盖UA的默认值。
（4）按选择符的指数来排列，那些特别指定的选择符将覆盖通用的。
（5）按顺序指定排列，如果两个规则具有相同调用级别，那么后一个执行的级别高。
4.2.2? 链接外部层叠式样式表
从前面介绍的只是可以了解到一个XML文档，只有结合CSS样式表或XSL，才会正常显示。下面系统地介绍CSS样式单与XML文档相链接的几种方法：
（1）把<?xml-stylesheet?>处理指令包括在XML文档中。
（2）使用@import，样式单本身可以导入其他样式单。
样式单中包括@import指令来加载保存在其他文件中的样式单。可使用绝对或相对的URL来标识导入的样式单。例如：
@import url(http://www.w3.org/basicstyles.css)
@import url(/baseball.css)
“@import”指令必须出现在样式单的开头并在任何规则之前。导入样式单的样式单中的规则总要覆盖被导入的样式单中的规则。
（3）用户可以使用浏览器的内部运行机制为文档指定一个样式单。
当使用一个附加CSS样式表的XML的时候，名域（Namespaces）必须在文档元素中定义。局部范围的名域会被正确地解析，但是CSS并没有提供一个解决名域前缀问题的机制。因此，CSS规则在局部范围的名域中不能准确地与元素相对应，把所有的名域放在文档元素上申明，确保他们都是全局的，这样就不会有前缀的冲突。默认的名域不能被使用，所有带名域的元素必须有一个直接的前缀。另外CSS选择器能够只通过前缀选定带名域的元素，因此前缀在XML和样式表中必须一致。由于Dreamweaver毕竟不是专门用来构建XML文件的工具，所以有些代码用户必须手工进行输入。
下面是一个元素带有'HTML'前缀的样式表。
HTML\:IMG {
border: 2px solid black;
}
HTML\:A:visited HTML\:IMG {
border-color: grey;
}
HTML\:A:active HTML\:IMG {
border-color: red;
}
HTML\:A:link HTML\:IMG {
border-color: blue;
}
在Microsoft Internet Explorer 5中的前缀必须保留“HTML”或者“html”，以便解释HTML元素。
<HTML:STYLE> 区，能被用于在XML文当中嵌入一个CSS样式表。这个功能加强任何用样式表指令指向的样式表。当没有一个可扩展样式表时，必须仍有一个样式表指令来指明XML文档是用CSS样式表，甚至可以没有“href”属性。
下面的样例展示了如何使用HTML命名域将review.css嵌入到XMl文档中去，<HTML:STYLE>和样式表指令没有“href”属性。
<?xml version="1.0"?>
<?xml-stylesheet type="text/css"?>
<story xmlns:HTML="http://www.w3.org/Profiles/XHTML-transitional">
<HTML:STYLE>
story
{
display: block;
font-family: Arial, Helvetica, sans-serif;
font-size: small;
width: 30em;
}
??? restaurant
{
display: block;
padding: 1.2em;
font-size: x-small;
margin-bottom: 1em;
}
...
</HTML:STYLE>
<restaurant>
...
</restaurant>
（4）浏览器为大多数属性提供缺省的样式。
4.2.3? 编辑外部层叠式样式表
编辑或修改一个外部样式表文件会影响所有与之相链接的文档。编辑或修改一个外部样式表文件的操作步骤如下：
（1）启动Dreamweaver 4，选择Site|Site File命令，出现站点管理窗口，如图4.6所示。
图4.6? 站点管理窗口
（2）在该站点管理窗口中找到需要编辑的样式表文件，然后双击该文件的图标，则会出现该文件的样式表对话框，如图4.7所示。
（3）在该对话框中选择需要编辑的样式选择符，然后单击Edit按钮，则会出现层叠样式表对话框，在该面板中设置需要的样式。
图4.7? 样式表文件对话框
[下一页]
|