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 cellSpacing=0 cellPadding=0 width=550 border=0>
〈td〉男〈xsl:value-of /〉〈/td〉
〈/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 |
