XML文件的顯示——CSS和XSL

發(fā)布時間：2008-06-07 閱讀數(shù)：次來源：網(wǎng)樂原科技

CSS（疊層樣式表）和XSL（可擴展樣式語言）都可以定義XML文件的顯示，這兩種方式有哪些不同以及它們在使用中的具體方法，我們將在本文給予介紹。

在XML文件中，使用的基本上是自定義的標記，顯然一個瀏覽器是無法理解這些標記的，現(xiàn)在，瀏覽器僅僅是作為一個XML文件的解析器——只要你的XML文件是Well-Formed的，那么它就將文件原封不動地給你顯示出來。在XML中內(nèi)容與表現(xiàn)形式是分開的，在一個XML的源文件中并沒有關于它表現(xiàn)形式的信息。XML的最大特點就是揭示了信息本身的含義，用于自動化的電子文檔交換是最優(yōu)的，如果一個XML文件僅僅用于交換信息，就無需考慮它的顯示問題。編輯XML文件，我們僅僅需要關注文件的內(nèi)容、信息的結(jié)構(gòu)，至于它怎么顯示，則交給CSS（疊層樣式表）和XSL（可擴展樣式語言）來完成。這就使得用戶可以根據(jù)需要來定義數(shù)據(jù)的表現(xiàn)形式。

■用CSS來表現(xiàn)XML

CSS在HTML中已經(jīng)有很好作用，在XML中，CSS同樣發(fā)揮了它強大的樣式表作用。在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中first.css這個文件。大家可以看到，在XML中的CSS和HTML中的CSS語法上實際是一樣的。都是通過一些標記來設置標記文字怎樣顯示。

對照表1和表2，來分析這個文件。在這個文件中，每一個區(qū)塊是針對XML文件中不同的標記來設定的，每個區(qū)塊用{}符號分割開。像第一個區(qū)塊，設置了title標記中文字的顏色（COLOR）、顯示狀態(tài)（是否分段：block或inline；隱藏不顯示出來：none）、字型（FONT-FAMILY）、大?。‵ONT-SIZE和FONT-WEIGH）、有無上/下劃線（TEXT- DECORATION）。其他區(qū)塊，大家可以對照表中的恍┏Ｓ檬糶岳捶治觥Ｎ頤強梢岳肅SS的各種屬性組合出豐富多彩的顯示效果。這和編程關系不大，因為語法太簡單了，關鍵看你的想像力了。

對于同一個XML文件，如果我們賦予它不同的CSS，那么它就有不同的顯示效果，如果你的網(wǎng)頁用XML來制作，那么為了變換網(wǎng)頁的樣子，就可以編輯多個CSS文件，隔段時間更換。只需要在XML文件的前面改變“URL”指定的CSS文件就可以。

■用XSL來表現(xiàn)XML

XSL（可擴展樣式語言）也是一種顯示XML文件的規(guī)范。和CSS不同的是：XSL是遵循XML的規(guī)范來制定的。也就是說，XSL文件本身符合XML的語法規(guī)定。XSL在排版樣式的功能上要比CSS強大。比如：CSS適用于那些元素順序不變的文件，它不能改變XML文件中元素的順序——元素在XML文件中是什么順序排列的，那么通過CSS表現(xiàn)出來順序不能改變。對于那些需要經(jīng)常按不同元素排序的文件，我們就要用XSL。

XSL是怎樣工作的呢？XML文件在展開后是一種樹狀結(jié)構(gòu)，稱為“原始樹”，XSL處理器（現(xiàn)在只有IE 5支持XSL，在IE 5中的處理器叫：XSL Stylesheet Processor）從這個樹狀結(jié)構(gòu)讀取信息，根據(jù)XSL樣式的指示對這個“原始樹”進行排序、復制、過濾、刪除、選擇、運算等操作后產(chǎn)生另外一個“結(jié)果樹”，然后在“結(jié)果樹”中加入一些新的顯示控制信息，如表格、其他文字、圖形以及一些有關顯示格式的信息。XSL處理器根據(jù)XSL樣式表的指示讀取XML文件中的信息，然后再重新組合后轉(zhuǎn)換產(chǎn)生一個Well-Formed 的HTML文件。瀏覽器顯示HTML文件肯定是沒問題的，這樣，XML文件中的信息就會以一定的形式顯示在我們面前了。

圖2

同樣，我們先來看一個XSL的例子，再來分析它的結(jié)構(gòu)和語法。XML源文件和XSL源文件如例2所示，顯示效果如圖3?？梢钥吹?，要想XML文件使用XSL來表現(xiàn)，在XML文件前面要加上一句：〈?xml-stylesheet href="URL" type="text/xsl" ?〉,和引用CSS是一樣的，只不過是指定type="text/xsl"。

編輯推薦閱讀

● 專題：WML語言全壘打
● XML與其相關技術

看看XSL文件，可以發(fā)現(xiàn)XSL文件的結(jié)構(gòu)和XML文件的結(jié)構(gòu)是一樣的，因為XSL的規(guī)則是根據(jù)XML的規(guī)則制定的。一個XSL文件也必須是Well-Foemed的，因為XSL文件中所用的標記都是W3C定義好的。所以，XSL文件就不需要DTD了。另外，可以看到在XSL文件中可以插入一些HTML的標記，來幫助XML文件的顯示，這些HTML的標記也必須是Well-Formed的，例如：必須要有正確的結(jié)束標記（不能像在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規(guī)范所在的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

4. xsl:for-each：將排版樣式應用到XML文件中相同的標記（類似于循環(huán)語句）。

屬性：select：設定從哪一個標記中讀取數(shù)據(jù)。

order-by：在讀取信息完成之后，設定依據(jù)什么標記來進行排序，值為某一特定標記，如在標記名前用“+”號表示是由大到小的排序，反之用“-”號。例：〈xsl:for-each select="data/book" order-by="-price"〉：因為在XML文件中有多個〈book〉標記，這里設定重復地從〈book〉標記下的子元素中讀取信息，將讀出來的信息按照價格從小到大進行排序顯示。

5. xsl:comment：在此元素中的內(nèi)容，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〉中的內(nèi)容才會被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標記，而且也可以建立新的標記和屬性，然后一起結(jié)合XML文件中的信息來顯示。其中，xsl:attribute是在標記中新增一個屬性，xsl:element是新建一個標記。它們有共同的屬性。

屬性：name：為新建的屬性指定屬性名。

例：假如我們沒有〈img〉這種顯示圖形文件的HTML標記，現(xiàn)在我們在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有的優(yōu)點，XSL都具備，而且在功能上也有比CSS更強的地方，所以我們在想要將XML文件內(nèi)容顯示出來的時候，最好優(yōu)先考慮使用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〉此書是著名計算機科學專家編著，

極具權(quán)威性。在書中又穿插許多精彩的例

子，所以可讀性又極強。

〈/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〉

**表1 常用的文字相關屬性**
屬性名稱	功能描述	設置值	例
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	大小寫轉(zhuǎn)換	capitalize、uppercase、lowercase	text-transform:uppercase
text-decoration	文字加線設置	underline、ouerline、line-through	text-decora：underline

**表2 常用的版面排列屬性**
屬性名稱	功能描述	設置值與單位
display	組件的顯示狀態(tài)	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