.NET开发：XML文件的显示——CSS和XSL
热点排行
XML文件的显示——CSS和XSL
类别：.NET开发 点击：0 评论：0
推荐：
CSS（叠层样式表）和XSL（可扩展样式语言）都可以定义XML文件的显示，这两种方式有哪些不同以及它们在使用中的具体方法，我们将在本文给予介绍。
在XML文件中，使用的基本上是自定义的标记，显然一个浏览器是无法理解这些标记的，现在，浏览器仅仅是作为一个XML文件的解析器——只要你的XML文件是Well-Formed的，那么它就将文件原封不动地给你显示出来。在XML中内容与表现形式是分开的，在一个XML的源文件中并没有关于它表现形式的信息。XML的最大特点就是揭示了信息本身的含义，用于自动化的电子文档交换是最优的，如果一个XML文件仅仅用于交换信息，就无需考虑它的显示问题。编辑XML文件，我们仅仅需要关注文件的内容、信息的结构，至于它怎么显示，则交给CSS（叠层样式表）和XSL（可扩展样式语言）来完成。这就使得用户可以根据需要来定义数据的表现形式。
■用CSS来表现XML
CSS在HTML中已经有很好作用，在XML中，CSS同样发挥了它强大的样式表作用。在XML中的CSS和HTML中的CSS差不多。目前的版本是CSS 2.0。
我们先来看一段CSS的代码——例1中的first.css。它是为例1中2.xml这个XML文件所作的CSS文件。
在2.xml这个XML文件的源文件中，有一行：〈?xml-stylesheet href="first.css" type="text/css"?〉，它指明这个XML文件在显示的时候引用CSS文件，具体的语法如下：〈?xml-stylesheet href="URL" type="text/css"?〉 其中，xml-stylesheet是关键字，表明引用样式表设定；href="URL"用来指定样式表所在的位置，在例1中，因为first.css和2.xml在同一个目录下，所以可以直接写出它的名称，是相对地址；type="text/css"表示该样式表是CSS的样式表。应用CSS前，浏览器显示如图1，应用了样式表后，显示效果如图2所示。
对照表1和表2，来分析这个文件。在这个文件中，每一个区块是针对XML文件中不同的标记来设定的，每个区块用{}符号分割开。像第一个区块，设置了title标记中文字的颜色（COLOR）、显示状态（是否分段：block或inline；隐藏不显示出来：none）、字型（FONT-FAMILY）、大小（FONT-SIZE和FONT-WEIGH）、有无上/下划线（TEXT- DECORATION）。其他区块，大家可以对照表中的恍┏Ｓ檬粜岳捶治觥Ｎ颐强梢岳肅SS的各种属性组合出丰富多彩的显示效果。这和编程关系不大，因为语法太简单了，关键看你的想像力了。
对于同一个XML文件，如果我们赋予它不同的CSS，那么它就有不同的显示效果，如果你的网页用XML来制作，那么为了变换网页的样子，就可以编辑多个CSS文件，隔段时间更换。只需要在XML文件的前面改变“URL”指定的CSS文件就可以。
■用XSL来表现XML
XSL（可扩展样式语言）也是一种显示XML文件的规范。和CSS不同的是：XSL是遵循XML的规范来制定的。也就是说，XSL文件本身符合XML的语法规定。XSL在排版样式的功能上要比CSS强大。比如：CSS适用于那些元素顺序不变的文件，它不能改变XML文件中元素的顺序——元素在XML文件中是什么顺序排列的，那么通过CSS表现出来顺序不能改变。对于那些需要经常按不同元素排序的文件，我们就要用XSL。
XSL是怎样工作的呢？XML文件在展开后是一种树状结构，称为“原始树”，XSL处理器（现在只有IE 5支持XSL，在IE 5中的处理器叫：XSL Stylesheet Processor）从这个树状结构读取信息，根据XSL样式的指示对这个“原始树”进行排序、复制、过滤、删除、选择、运算等操作后产生另外一个“结果树”，然后在“结果树”中加入一些新的显示控制信息，如表格、其他文字、图形以及一些有关显示格式的信息。XSL处理器根据XSL样式表的指示读取XML文件中的信息，然后再重新组合后转换产生一个Well-Formed 的HTML文件。浏览器显示HTML文件肯定是没问题的，这样，XML文件中的信息就会以一定的形式显示在我们面前了。
看看XSL文件，可以发现XSL文件的结构和XML文件的结构是一样的，因为XSL的规则是根据XML的规则制定的。一个XSL文件也必须是Well-Foemed的，因为XSL文件中所用的标记都是W3C定义好的。所以，XSL文件就不需要DTD了。另外，可以看到在XSL文件中可以插入一些HTML的标记，来帮助XML文件的显示，这些HTML的标记也必须是Well-Formed的，例如：必须要有正确的结束标记（不能像在HTML文件中那样可以偷懒了）。
XSL文件本身即是一份 XML文件，所以在XSL文件的开头，一样有和XML文件相同的声明。W3C为XSL定义了很多标记（元素），XSL文件就是这些标记和HTML标记的组合。在XSL文件中，必须有：〈xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"〉。
其中，xsl:stylesheet是XSL文件的根元素，在根元素中包含了所有的排版样式，样式表就是由这些排版样式组合成的；xmlns:xsl="http://www.w3.org/TR/WD-xsl"这一句主要用来说明该XSL样式表是使用W3C所制定的XSL，设定值就是XSL规范所在的URL地址。
XSL文件中，除HTML标记外，其他就是XSL自己的标记了。标记有不同的功能。下面介绍XSL中各种可用的标记，大家可以参照它们的功能说明与使用举例，来看看例3中XSL的源文件。
1. xsl:stylesheet：作为XSL样式表中的根元素，在每个XSL文件中都必须有。
属性：default-space：决定是否保留XML文件中的空白，仅当值为“default”时保留。
indent-result：决定是否保留XSL文件中的空白，值为“yes”时保留。
language：设定在XSL文件中使用的脚本语言。
例：〈xsl:stylesheet default-space="default"〉
2. xsl:template：指定XML文件中的特定标记来定义排版样式。
属性：language：指定使用哪种脚本语言。
match：设定从XML文件中哪个标记开始来读取信息，如果值为“/”那么表示从XML文件的根元素开始读取信息。
例：〈xsl:template mach="data/book"〉：表示从XML文件中的〈book〉标记开始读取信息。
3. xsl:value-of：从XML文件中的特定标记中将信息读出来。属性：select：设定读取哪一个标记中的信息。
例：〈xsl:template select="title"〉：表示要从〈title〉标记中将信息读出来。
属性：select：设定从哪一个标记中读取数据。
order-by：在读取信息完成之后，设定依据什么标记来进行排序，值为某一特定标记，如在标记名前用“+”号表示是由大到小的排序，反之用“-”号。例：〈xsl:for-each select="data/book" order-by="-price"〉：因为在XML文件中有多个〈book〉标记，这里设定重复地从〈book〉标记下的子元素中读取信息，将读出来的信息按照价格从小到大进行排序显示。
5. xsl:comment：在此元素中的内容，XSL将它作为注释信息，并不显示在浏览器中。
6. xsl:apply-templates：指示XSL处理器在该XSL样式表中寻找合适的〈xsl:template〉中设定的样式来用。
属性：order-by和select：同xsl:for-each中的属性一样。
例：.......
7. xsl:copy：从XML文件中拷贝标记中的信息到输出的文件中。无属性。
例：.......
此例首先使用〈xsl:copy〉将XML文件中的非标记的信息全部读取出来，然后通过〈xsl:value-of /〉将这些复制的信息显示出来。
8. xsl:if：与一般程序中的If...Then类似。
属性：script：设定script程序所表达的式子。
language：设定使用哪种脚本语言。
test：设定条件的叙述表达式。只有当script属性的设定值传回“true”时（或test属性设置的条件成立），〈xsl:if〉中的内容才会被XSL处理器处理。
例：
9. xsl:choose、xsl:when、xsl:otherwise：这三个元素是用来设定较为复杂的条件式，一般共同配合使用。其中xsl:when有script、language、test三种属性，与前面xsl:if中的属性含义是一样的。
例：
10.xsl:attribute和xsl:element：可以在标记中附加一个属性名称或新建一个标记。XSL样式表不但可以引用HTML标记，而且也可以建立新的标记和属性，然后一起结合XML文件中的信息来显示。其中，xsl:attribute是在标记中新增一个属性，xsl:element是新建一个标记。它们有共同的属性。
属性：name：为新建的属性指定属性名。
例：假如我们没有〈img〉这种显示图形文件的HTML标记，现在我们在XSL文件中要新增一个这样的标记，名为〈img〉，具有src属性。
XSL是显示XML文件的最好的方法，因为它符合XML文件的标准，一切XML有的优点，XSL都具备，而且在功能上也有比CSS更强的地方，所以我们在想要将XML文件内容显示出来的时候，最好优先考虑使用XSL——为了将来的扩展。
例2 2.xml源文件
在XML文件中，使用的基本上是自定义的标记，显然一个浏览器是无法理解这些标记的，现在，浏览器仅仅是作为一个XML文件的解析器——只要你的XML文件是Well-Formed的，那么它就将文件原封不动地给你显示出来。在XML中内容与表现形式是分开的，在一个XML的源文件中并没有关于它表现形式的信息。XML的最大特点就是揭示了信息本身的含义，用于自动化的电子文档交换是最优的，如果一个XML文件仅仅用于交换信息，就无需考虑它的显示问题。编辑XML文件，我们仅仅需要关注文件的内容、信息的结构，至于它怎么显示，则交给CSS（叠层样式表）和XSL（可扩展样式语言）来完成。这就使得用户可以根据需要来定义数据的表现形式。
■用CSS来表现XML
CSS在HTML中已经有很好作用，在XML中，CSS同样发挥了它强大的样式表作用。在XML中的CSS和HTML中的CSS差不多。目前的版本是CSS 2.0。
我们先来看一段CSS的代码——例1中的first.css。它是为例1中2.xml这个XML文件所作的CSS文件。
在2.xml这个XML文件的源文件中，有一行：〈?xml-stylesheet href="first.css" type="text/css"?〉，它指明这个XML文件在显示的时候引用CSS文件，具体的语法如下：〈?xml-stylesheet href="URL" type="text/css"?〉 其中，xml-stylesheet是关键字，表明引用样式表设定；href="URL"用来指定样式表所在的位置，在例1中，因为first.css和2.xml在同一个目录下，所以可以直接写出它的名称，是相对地址；type="text/css"表示该样式表是CSS的样式表。应用CSS前，浏览器显示如图1，应用了样式表后，显示效果如图2所示。
图1
对照表1和表2，来分析这个文件。在这个文件中，每一个区块是针对XML文件中不同的标记来设定的，每个区块用{}符号分割开。像第一个区块，设置了title标记中文字的颜色（COLOR）、显示状态（是否分段：block或inline；隐藏不显示出来：none）、字型（FONT-FAMILY）、大小（FONT-SIZE和FONT-WEIGH）、有无上/下划线（TEXT- DECORATION）。其他区块，大家可以对照表中的恍┏Ｓ檬粜岳捶治觥Ｎ颐强梢岳肅SS的各种属性组合出丰富多彩的显示效果。这和编程关系不大，因为语法太简单了，关键看你的想像力了。
对于同一个XML文件，如果我们赋予它不同的CSS，那么它就有不同的显示效果，如果你的网页用XML来制作，那么为了变换网页的样子，就可以编辑多个CSS文件，隔段时间更换。只需要在XML文件的前面改变“URL”指定的CSS文件就可以。
■用XSL来表现XML
XSL（可扩展样式语言）也是一种显示XML文件的规范。和CSS不同的是：XSL是遵循XML的规范来制定的。也就是说，XSL文件本身符合XML的语法规定。XSL在排版样式的功能上要比CSS强大。比如：CSS适用于那些元素顺序不变的文件，它不能改变XML文件中元素的顺序——元素在XML文件中是什么顺序排列的，那么通过CSS表现出来顺序不能改变。对于那些需要经常按不同元素排序的文件，我们就要用XSL。
XSL是怎样工作的呢？XML文件在展开后是一种树状结构，称为“原始树”，XSL处理器（现在只有IE 5支持XSL，在IE 5中的处理器叫：XSL Stylesheet Processor）从这个树状结构读取信息，根据XSL样式的指示对这个“原始树”进行排序、复制、过滤、删除、选择、运算等操作后产生另外一个“结果树”，然后在“结果树”中加入一些新的显示控制信息，如表格、其他文字、图形以及一些有关显示格式的信息。XSL处理器根据XSL样式表的指示读取XML文件中的信息，然后再重新组合后转换产生一个Well-Formed 的HTML文件。浏览器显示HTML文件肯定是没问题的，这样，XML文件中的信息就会以一定的形式显示在我们面前了。
图2
| 编辑推荐阅读 |
| ● 专题：WML语言全垒打 ● XML与其相关技术 |
XSL文件本身即是一份 XML文件，所以在XSL文件的开头，一样有和XML文件相同的声明。W3C为XSL定义了很多标记（元素），XSL文件就是这些标记和HTML标记的组合。在XSL文件中，必须有：〈xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"〉。
其中，xsl:stylesheet是XSL文件的根元素，在根元素中包含了所有的排版样式，样式表就是由这些排版样式组合成的；xmlns:xsl="http://www.w3.org/TR/WD-xsl"这一句主要用来说明该XSL样式表是使用W3C所制定的XSL，设定值就是XSL规范所在的URL地址。
XSL文件中，除HTML标记外，其他就是XSL自己的标记了。标记有不同的功能。下面介绍XSL中各种可用的标记，大家可以参照它们的功能说明与使用举例，来看看例3中XSL的源文件。
1. xsl:stylesheet：作为XSL样式表中的根元素，在每个XSL文件中都必须有。
属性：default-space：决定是否保留XML文件中的空白，仅当值为“default”时保留。
indent-result：决定是否保留XSL文件中的空白，值为“yes”时保留。
language：设定在XSL文件中使用的脚本语言。
例：〈xsl:stylesheet default-space="default"〉
2. xsl:template：指定XML文件中的特定标记来定义排版样式。
属性：language：指定使用哪种脚本语言。
match：设定从XML文件中哪个标记开始来读取信息，如果值为“/”那么表示从XML文件的根元素开始读取信息。
例：〈xsl:template mach="data/book"〉：表示从XML文件中的〈book〉标记开始读取信息。
3. xsl:value-of：从XML文件中的特定标记中将信息读出来。属性：select：设定读取哪一个标记中的信息。
例：〈xsl:template select="title"〉：表示要从〈title〉标记中将信息读出来。
图3
属性：select：设定从哪一个标记中读取数据。
order-by：在读取信息完成之后，设定依据什么标记来进行排序，值为某一特定标记，如在标记名前用“+”号表示是由大到小的排序，反之用“-”号。例：〈xsl:for-each select="data/book" order-by="-price"〉：因为在XML文件中有多个〈book〉标记，这里设定重复地从〈book〉标记下的子元素中读取信息，将读出来的信息按照价格从小到大进行排序显示。
5. xsl:comment：在此元素中的内容，XSL将它作为注释信息，并不显示在浏览器中。
6. xsl:apply-templates：指示XSL处理器在该XSL样式表中寻找合适的〈xsl:template〉中设定的样式来用。
属性：order-by和select：同xsl:for-each中的属性一样。
例：.......
| 〈tr〉〈xsl:apply-templates/〉〈/tr〉 .......... 〈xsl:template match="book"〉 〈td〉〈xsl:value-of select="author"/〉〈/td〉 〈/xsl:template〉 ......... |
7. xsl:copy：从XML文件中拷贝标记中的信息到输出的文件中。无属性。
例：.......
| 〈xsl:template〉 〈xsl:copy〉 〈xsl:value-of /〉 〈/xsl:copy〉 〈/xsl:template〉 ........... |
此例首先使用〈xsl:copy〉将XML文件中的非标记的信息全部读取出来，然后通过〈xsl:value-of /〉将这些复制的信息显示出来。
8. xsl:if：与一般程序中的If...Then类似。
属性：script：设定script程序所表达的式子。
language：设定使用哪种脚本语言。
test：设定条件的叙述表达式。只有当script属性的设定值传回“true”时（或test属性设置的条件成立），〈xsl:if〉中的内容才会被XSL处理器处理。
例：
| 〈xsl:if test=".[@sex='男']"〉 〈td〉男〈xsl:value-of /〉〈/td〉 〈/xsl:if〉 |
9. xsl:choose、xsl:when、xsl:otherwise：这三个元素是用来设定较为复杂的条件式，一般共同配合使用。其中xsl:when有script、language、test三种属性，与前面xsl:if中的属性含义是一样的。
例：
| 〈xsl:choose〉 〈xsl:when test="wife"〉 〈td〉妻〈xsl:value-of /〉〈/td〉 〈/xsl:when〉 〈xsl:when test="husband"〉 〈td〉夫〈xsl:value-of /〉〈/td〉 〈/xsl:when〉 〈xsl:otherwise〉 〈td〉未婚〈/td〉 〈/xsl:otherwise〉 〈/xsl:choose〉 |
10.xsl:attribute和xsl:element：可以在标记中附加一个属性名称或新建一个标记。XSL样式表不但可以引用HTML标记，而且也可以建立新的标记和属性，然后一起结合XML文件中的信息来显示。其中，xsl:attribute是在标记中新增一个属性，xsl:element是新建一个标记。它们有共同的属性。
属性：name：为新建的属性指定属性名。
例：假如我们没有〈img〉这种显示图形文件的HTML标记，现在我们在XSL文件中要新增一个这样的标记，名为〈img〉，具有src属性。
| 〈xsl:template match="image"〉 〈xsl:element name="img"〉 〈xsl:attribute name="src"〉 〈xsl:value-of /〉 〈/xsl:attribute〉 〈/xsl:element〉 |
XSL是显示XML文件的最好的方法，因为它符合XML文件的标准，一切XML有的优点，XSL都具备，而且在功能上也有比CSS更强的地方，所以我们在想要将XML文件内容显示出来的时候，最好优先考虑使用XSL——为了将来的扩展。
例2 2.xml源文件
| 〈?xml version="1.0" encoding="GB2312" ?〉 〈?xml-stylesheet href="first.xsl" type="text/xsl" ?〉 〈data〉 〈book〉 〈title〉XML入门精解〈/title〉 〈author〉张三〈/author〉 〈price unit="人民币"〉20.00〈/price〉 〈/book〉 〈book〉 〈title〉XML语法〈/title〉 〈!-- 即将出版 --〉 〈author〉李四〈/author〉 〈price unit="人民币"〉18.00〈/price〉 〈memo〉此书是著名计算机科学专家编著， 极具权威性。在书中又穿插许多精彩的例 子，所以可读性又极强。 〈/memo〉 〈/book〉 〈/data〉 First.xsl源文件 〈?xml version="1.0" encoding="GB2312" ?〉 〈xsl:stylesheet xmlns:xsl="http://www.w3.org/TR/WD-xsl"〉 〈xsl:template match="/"〉 〈html〉〈body〉 〈center〉〈h2〉书籍信息〈/h2〉〈/center〉 〈div align="center"〉〈center〉 〈table border="1" cellpadding="5" bgcolor="#4EB7DE"〉 〈tr〉 〈th〉书名〈/th〉〈th〉作者〈/th〉〈th〉价格(人民币)〈/th〉 〈th〉备注〈/th〉 〈/tr〉 〈xsl:for-each select="data/book" order-by="title"〉 〈tr〉 〈td〉〈xsl:value-of select="title"/〉〈/td〉 〈td〉〈xsl:value-of select="author"/〉〈/td〉 〈td〉〈xsl:value-of select="price"/〉〈/td〉 〈td width="150"〉〈xsl:value-of select="memo"/〉〈/td〉 〈/tr〉 〈/xsl:for-each〉 〈/table〉 〈/center〉〈/div〉 〈/body〉〈/html〉 〈/xsl:template〉 〈/xsl:stylesheet〉 |
|
属性名称 |
功能描述 |
设置值 |
例 |
|
color |
文字的颜色 |
颜色的英文名或十六进制的rgb色 |
color:red color:#f00f01 |
|
font-family |
文字字型 |
字型名称 |
font-family:宋体 |
|
font-size |
文字大小 |
pt、in、cm、px、xx-small、x-small、small、medium、large、x-large、xx-large |
font-size:x-large font-size:1cm |
|
font-weight |
文字粗细 |
extra-light、light、demi-light、medium、demi-bold、bold、extra-bold |
font-weight:light |
|
font-style |
字型样式 |
normal、italic |
font-style:italic |
|
text-align |
文字位置 |
center、right、left |
text-align:left |
|
text-indent |
文字缩排 |
pt（点）in（英寸）cm（厘米）px（像素） |
text-indent:20pt |
|
text-transform |
大小写转换 |
capitalize、uppercase、lowercase |
text-transform:uppercase |
|
text-decoration |
文字加线设置 |
underline、ouerline、line-through |
text-decora：underline |
|
属性名称 |
功能描述 |
设置值与单位 |
|
display |
组件的显示状态 |
none、block、inline |
|
width |
组件的宽度 |
pt、in、cm、px |
|
background-color |
组件的背景颜色 |
颜色英文名或十六进制rgb |
|
padding |
组件与四边的距离 |
pt、in、cm、px |
|
padding-left |
组件与左边的距离 |
pt、in、cm、px |
|
padding-right |
组件与右边的距离 |
pt、in、cm、px |
|
padding-top |
组件与上边的距离 |
pt、in、cm、px |
|
padding-bottom |
组件与下边的距离 |
pt、in、cm、px |
|
border |
方形边框 |
|
|
border-left |
方形的左边框 |
|
|
border-right |
方形的左边框 |
|
|
border-top |
方形的上边框 |
|
|
border-bottom |
方形的下边框 |
|
|
border-color |
方形边框的颜色 |
颜色的英文名或十六进制rgb |
|
border-wide |
方形边框的宽度 |
thin 、medium、thick、pt、in、cm、px |
|
border-style |
方形边框的样式 |
none、dotted、solid、double |
本文地址：http://com.8s8s.com/it/it44702.htm