第4章 使用CSS格式化XML.doc

《第4章 使用CSS格式化XML.doc》由会员上传分享，免费在线阅读，更多相关内容在学术论文-天天文库。

1、第4章使用CSS格式化XML由前面的知识知道，在XML中，XML不能为一个特定的元素预定义显示属性。因此，它需要一个分离的样式表来描述一个XML如何才能被显示。XML的内容和表述的分离允许XML的内容能很容易被重新安排。MicrosoftInternetExplorer支持使用CSS或者XSL书写的样式表。在本章中，将详细介绍如何使用Dreamweaver4创建层叠样式表单的基本要素，主要包括CSS的基本概念、CSS属性、格式化模型以及CSS单位等一些基本的内容。4.1CSS开始文档在本节中，将通过具体的实例来

2、阐述在XML中如何使用CSS来表现XML的基本知识，有关更深入的知识将在后面几节中介绍。对于将诸如粗体和斜体等样式应用于特定的XML元素来说，CSS是一种简单、易懂的语言。任何常用的字处理软件都具有CSS支持的大多数样式。例如，可选择字体、字体的粗细、字号、背景颜色、各种元素的间距、元素周围的边框等。但是，所有的样式信息并不在文档之内存储，而是放置在一种称为样式表的独立文件中。仅仅改变样式表就可以以多种不同方式格式化一个XML文档。不同的样式单可用于不同的目的，并且无需改变文档中的任何内容。以上功能在Dream

3、weaver4中很容易实现，Dreamweaver4不但可以创建任意复杂的CSS样式表，还可以将该样式表导出为一个独立的样式表文件。4.1.1StyleSheets简介层叠样式表（CascadingStyleSheets，以下简称CSS）是1996年作为把有关样式属性信息，如字体和边框加到HTML文档中的标准方法而提出来的。但是，CSS与XML结合的确比与HTML结合得更好，因为HTML承担着CSS标志和HTML标志之间向后兼容的任务。例如，要正确地支持CSS的nowrap属性就不能使用HTML中非标准的但又是

4、经常使用的NOWRAP元素。由于XML元素没有任何预定义的格式规定，所以不会限制何种CSS样式只能用于何种元素。在1998年，W3C公布了一个修订的、详细的CSS规范，称之为CSS2。同时，他们又把原来的CSS改名为CSS1。CSS2几乎是CSS1的超集，只有少部分不同。换句话说，CSS2是在CSS1的基础上增添了音频样式单、媒体类型、特性选择符和其他新的功能。因此，本章涉及到的几乎每个例子既适用于CSS1，也适用于CSS2。在下一章中，将把CSS2看作CSS1的扩充来加以介绍。一个CSS样式表就是一组样式，样

5、式中的属性在XML和HTML元素中依次出现，并显示在浏览器中。比如：绿色、斜体和Arial字体。样式可以定义在XML和HTML文档的标记中，也可以在外部附加文档中作为外加文件。此时，一个样式表可以作用于多个XML文件——甚至整个站点，因此具有更好的易用性和扩展性。样式表究竟是怎样工作的？假设要建立一个网页，网页上所有的

文本都是红色、斜体和Arial字体。如果不懂得使用CSS，则只能按照下面的代码满足要求。首先，选中一个使用

标记的文本，然后选择Window

6、Properties命令，出现属性对话框

7、，在该属性对话框中设置文本的Format为Heading3，字体为Arial。然后，单击Size后面的按钮，从打开的颜色选择器中选择红色（#FF0000）。最后，单击按钮，此时该文本对应的属性对话框如图4.1所示。图4.1属性对话框很明显，如果有100个三级标题的文本，那么就要通过对应的属性面板设置100次。这样显然不行。这时候，必须用到层叠样式表，可以创建一个样式，定义

标识符样式为红色、斜体和Arial字体。一旦此样式作用于文档，每个

标题都显示红色、斜体和Arial字体。这样可以一次性解决所有

8、的问题，从而大大提高工作效率。下面通过一个简单的实例进行说明，假设要建立一个页面，页面上所有的三级标题的文本都是黑体、绿色、带下划线。其具体操作步骤如下：（1）启动Dreamweaver4，新建一个文档。在工具栏中的Title文本框中输入“CSS实例”作为该文档的标题。（2）在文档窗口中输入“这是一个绿色、黑体、带下划线的标题。”然后按回车键，进行换行，在输入“这也是一个绿色、黑体、带下划线的标题。”，通过对应的属性对话框，设置这两段文本的Format为Heading3。（3）打开Window菜单，选择CSSS

9、tyleSheet命令，出现CSSStyles面板，如图4.2所示。图4.2CSSStyles面板（4）选中该面板左下角的Apply复选框，选中这个复选框后，就不用每次需要应用格式的时候都要单击Apply按钮。单击该面板顶部右边的三角按钮，从打开的下拉菜单中选择NewStyle命令，出现NewStyle面板，如图4.3所示。图4.3NewStyle面板（5）先选择RedefineHTM