第4章 使用CS格式化XML.docVIP

第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文件——甚至整个站点，因此具有更好的易用性和扩展性。 样式表究竟是怎样工作的？ 假设要建立一个网页，网页上所有的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面