css|xml
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
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 |