xml文件的显示——css和xslnew

《xml文件的显示——css和xslnew》由会员上传分享，免费在线阅读，更多相关内容在教育资源-天天文库。

1、XML文件的显示——CSS和XSLCSS（叠层样式表）和XSL（可扩展样式语言）都可以定义XML文件的显示，这两种方式有哪些不同以及它们在使用中的具体方法，我们将在本文给予介绍。在XML文件中，使用的基本上是自定义的标记，显然一个浏览器是无法理解这些标记的，现在，浏览器仅仅是作为一个XML文件的解析器——只要你的XML文件是Well-Formed的，那么它就将文件原封不动地给你显示出来。在XML中内容与表现形式是分开的，在一个XML的源文件中并没有关于它表现形式的信息。XML的最大特点就是揭示了信息本身的含义，用于自动化的电

2、子文档交换是最优的，如果一个XML文件仅仅用于交换信息，就无需考虑它的显示问题。编辑XML文件，我们仅仅需要关注文件的内容、信息的结构，至于它怎么显示，则交给CSS（叠层样式表）和XSL（可扩展样式语言）来完成。这就使得用户可以根据需要来定义数据的表现形式。■用CSS来表现XMLCSS在HTML中已经有很好作用，在XML中，CSS同样发挥了它强大的样式表作用。在XML中的CSS和HTML中的CSS差不多。目前的版本是CSS2.0。我们先来看一段CSS的代码——例1中的first.css。它是为例1中2.xml这个XML文件所

3、作的CSS文件。在2.xml这个XML文件的源文件中，有一行：〈？xml-stylesheethref=“first.css”type=“text/css”?〉，它指明这个XML文件在显示的时候引用CSS文件，具体的语法如下：〈？xml-stylesheethref=“URL”type=“text/css”?〉其中，xml-stylesheet是关键字，表明引用样式表设定；href=“URL”用来指定样式表所在的位置，在例1中，因为first.css和2.xml在同一个目录下，所以可以直接写出它的名称，是相对地址；type=

4、“text/css”表示该样式表是CSS的样式表。应用CSS前，浏览器显示如图1，应用了样式表后，显示效果如图2所示。图1下面我们来分析例1中first.css这个文件。大家可以看到，在XML中的CSS和HTML中的CSS语法上实际是一样的。都是通过一些标记来设置标记文字怎样显示。对照表1和表2，来分析这个文件。在这个文件中，每一个区块是针对XML文件中不同的标记来设定的，每个区块用{}符号分割开。像第一个区块，设置了title标记中文字的颜色（COLOR）、显示状态（是否分段：block或inline；隐藏不显示出来：no

5、ne）、字型（FONT-FAMILY）、大小（FONT-SIZE和FONT-WEIGH）、有无上/下划线（TEXT-DECORATION）。其他区块，大家可以对照表中的恍┏Ｓ檬粜岳捶治觥Ｎ颐强梢岳肃SS的各种属性组合出丰富多彩的显示效果。这和编程关系不大，因为语法太简单了，关键看你的想像力了。对于同一个XML文件，如果我们赋予它不同的CSS，那么它就有不同的显示效果，如果你的网页用XML来制作，那么为了变换网页的样子，就可以编辑多个CSS文件，隔段时间更换。只需要在XML文件的前面改变“URL”指定的CSS文件就可以。■用X

6、SL来表现XMLXSL（可扩展样式语言）也是一种显示XML文件的规范。和CSS不同的是：XSL是遵循XML的规范来制定的。也就是说，XSL文件本身符合XML的语法规定。XSL在排版样式的功能上要比CSS强大。比如：CSS适用于那些元素顺序不变的文件，它不能改变XML文件中元素的顺序——元素在XML文件中是什么顺序排列的，那么通过CSS表现出来顺序不能改变。对于那些需要经常按不同元素排序的文件，我们就要用XSL。XSL是怎样工作的呢？XML文件在展开后是一种树状结构，称为“原始树”，XSL处理器（现在只有IE5支持XSL，在I

7、E5中的处理器叫：XSLStylesheetProcessor）从这个树状结构读取信息，根据XSL样式的指示对这个“原始树”进行排序、复制、过滤、删除、选择、运算等操作后产生另外一个“结果树”，然后在“结果树”中加入一些新的显示控制信息，如表格、其他文字、图形以及一些有关显示格式的信息。XSL处理器根据XSL样式表的指示读取XML文件中的信息，然后再重新组合后转换产生一个Well-Formed的HTML文件。浏览器显示HTML文件肯定是没问题的，这样，XML文件中的信息就会以一定的形式显示在我们面前了。图2同样，我们先来看一

8、个XSL的例子，再来分析它的结构和语法。XML源文件和XSL源文件如例2所示，显示效果如图3。可以看到，要想XML文件使用XSL来表现，在XML文件前面要加上一句：〈？xml-stylesheethref=“URL”type=“text/xsl”?〉，和引用CSS是一样的，只不过是指定ty