第4章 使用CSS格式化XML
- 格式：doc
- 大小：2.30 MB
- 文档页数：49
第4章 使用CSS格式化XML
由前面的知识知道，在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文件——甚至整个站点，因此具有更好的易用性和扩展性。
样式表究竟是怎样工作的？
假设要建立一个网页，网页上所有的
首先，选中一个使用
然后，单击Size后面的按钮，从打开的颜色选择器中选择红色（#FF0000）。
最后，单击按钮，此时该文本对应的属性对话框如图4.1所示。
图4.1 属性对话框
很明显，如果有100个三级标题的文本，那么就要通过对应的属性面板设置100次。这样显然不行。这时候，必须用到层叠样式表，可以创建一个样式，定义
下面通过一个简单的实例进行说明，假设要建立一个页面，页面上所有的三级标题的文本都是黑体、绿色、带下划线。其具体操作步骤如下：
（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）返回到文档窗口可以看到，文档窗口中所有使用了
图4.5 应用样式后的文档窗口显示效果
4.1.2 将样式与XML结合
将样式表和XML文档组合的方法很简单，只需要在Dreamweaver 4创建的源代码中添加基本的样式表指令，其形式如下所示：
每个样式表指令必须含有一个 type 属性。这个属性的值描述了样式表应用的具体类型：“text/css”表示是一个CSS样式表，“text/xsl”表示使用了一个XSl样式表。
处理指令中的href属性值是一个URL，通常是相对值，指明在何处可找到样式单。如果样式单没有找到，Web浏览器很可能使用其缺省的样式单，不过有些浏览器可能会报告一条错误信息。
也可以将同一个样式单用于许多文档，人们通常的确就是这么做的。于是，把样式单放在Web服务器上的某个主要位置成了人们的通用方法，所有的文档都会在此位置引用这些样式单；一个便利的位置就是Web服务器根目录上的样式目录。
甚至还可以使用指向另一个Web站点上的样式单的绝对URL值，虽然这样做不可避免地会使站点依赖于外部Web站点的状态。
下面通过一个具体实例来说明。
1．编写XML文档
下面的这个XML样例文档描述了一个饭店的考核评审，它包含了一些特定的章节对这个考核评审的不同类型的重要信息进行描述。第一节包含了在一个名为“restaurant”的元素，并提供了关于饭店的名称、地址、电话。第二节是“review”元素，它包含了考核的数据、考核人的名字、考核日期、得到的星数。第三节是考核的主体以及最后一节是一个饭店的菜单的摘要。在Dreamweaver 4的代码窗口中输入如下代码：
Red Apple Inn
3100 Longview Lane
Palabro
Wyoming
123-555-1212
****
December 29, 1998
Louis Framptenheimer
The small town of Palabro seems like
an unlikely place for a high-class culinary establishment, but
the Red Apple Inn's Chef Alex
Choperoni is earning a national reputation for innovative
dishes. And rightly so, if this reviewer's recent
culinary experience is any example.
Within striking distance from the ski slopes at Jackson
Hole, the Red Apple Inn 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 Drew Barrymore and
Matthew Broderick. 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.
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.
