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中first.css這個文件。大家可以看到，在XML中的CSS和HTML中的CSS語法上實際是一樣的。都是通過一些標記來設置標記文字怎樣顯示。?

　　對照表1和表2，來分析這個文件。在這個文件中，每一個區塊是針對XML文件中不同的標記來設定的，每個區塊用{}符號分割開。像第一個區塊，設置了title標記中文字的顏色（COLOR）、顯示狀態（是否分段：block或inline；隱藏不顯示出來：none）、字型（FONT-FAMILY）、大小（FONT-SIZE和FONT-WEIGH）、有無上/下劃線（TEXT-?DECORATION）。其他區塊，大家可以對照表中的一些常用屬性來分析。我們可以利用CSS的各種屬性組合出豐富多彩的顯示效果。這和編程關系不大，因為語法太簡單了，關鍵看你的想像力了。?

　　對于同一個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的例子，再來分析它的結構和語法。XML源文件和XSL源文件如例2所示，顯示效果如圖3。可以看到，要想XML文件使用XSL來表現，在XML文件前面要加上一句：〈?xml-stylesheet?href="URL"?type="text/xsl"??〉,和引用CSS是一樣的，只不過是指定type="text/xsl"。?

　　看看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〉標記中將信息讀出來。

　　圖3?

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

　　屬性：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〉?

表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?大小寫轉換?capitalize、uppercase、lowercase?text-transform:uppercase?
text-decoration?文字加線設置?underline、ouerline、line-through?text-decora：underline?



表2?常用的版面排列屬性?屬性名稱?功能描述?設置值與單位?
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?