CSS（疊層樣式表）和XSL（可擴(kuò)展樣式語(yǔ)言）都可以定義XML文件的顯示，這兩種方式有哪些不同以及它們?cè)谑褂弥械木唧w方法，我們將在本文給予介紹。?

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

　　■用CSS來(lái)表現(xiàn)XML?
　　CSS在HTML中已經(jīng)有很好作用，在XML中，CSS同樣發(fā)揮了它強(qiáng)大的樣式表作用。在XML中的CSS和HTML中的CSS差不多。目前的版本是CSS?2.0。?

　　我們先來(lái)看一段CSS的代碼??例1中的first.css。它是為例1中2.xml這個(gè)XML文件所作的CSS文件。?

　　在2.xml這個(gè)XML文件的源文件中，有一行：〈?xml-stylesheet?href="first.css"?type="text/css"?〉，它指明這個(gè)XML文件在顯示的時(shí)候引用CSS文件，具體的語(yǔ)法如下：〈?xml-stylesheet?href="URL"?type="text/css"?〉?其中，xml-stylesheet是關(guān)鍵字，表明引用樣式表設(shè)定；href="URL"用來(lái)指定樣式表所在的位置，在例1中，因?yàn)閒irst.css和2.xml在同一個(gè)目錄下，所以可以直接寫(xiě)出它的名稱(chēng)，是相對(duì)地址；type="text/css"表示該樣式表是CSS的樣式表。應(yīng)用CSS前，瀏覽器顯示如圖1，應(yīng)用了樣式表后，顯示效果如圖2所示。?

　　下面我們來(lái)分析例1中first.css這個(gè)文件。大家可以看到，在XML中的CSS和HTML中的CSS語(yǔ)法上實(shí)際是一樣的。都是通過(guò)一些標(biāo)記來(lái)設(shè)置標(biāo)記文字怎樣顯示。?

　　對(duì)照表1和表2，來(lái)分析這個(gè)文件。在這個(gè)文件中，每一個(gè)區(qū)塊是針對(duì)XML文件中不同的標(biāo)記來(lái)設(shè)定的，每個(gè)區(qū)塊用{}符號(hào)分割開(kāi)。像第一個(gè)區(qū)塊，設(shè)置了title標(biāo)記中文字的顏色（COLOR）、顯示狀態(tài)（是否分段：block或inline；隱藏不顯示出來(lái)：none）、字型（FONT-FAMILY）、大小（FONT-SIZE和FONT-WEIGH）、有無(wú)上/下劃線（TEXT-?DECORATION）。其他區(qū)塊，大家可以對(duì)照表中的一些常用屬性來(lái)分析。我們可以利用CSS的各種屬性組合出豐富多彩的顯示效果。這和編程關(guān)系不大，因?yàn)檎Z(yǔ)法太簡(jiǎn)單了，關(guān)鍵看你的想像力了。?

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

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

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


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

　　看看XSL文件，可以發(fā)現(xiàn)XSL文件的結(jié)構(gòu)和XML文件的結(jié)構(gòu)是一樣的，因?yàn)閄SL的規(guī)則是根據(jù)XML的規(guī)則制定的。一個(gè)XSL文件也必須是Well-Foemed的，因?yàn)閄SL文件中所用的標(biāo)記都是W3C定義好的。所以，XSL文件就不需要DTD了。另外，可以看到在XSL文件中可以插入一些HTML的標(biāo)記，來(lái)幫助XML文件的顯示，這些HTML的標(biāo)記也必須是Well-Formed的，例如：必須要有正確的結(jié)束標(biāo)記（不能像在HTML文件中那樣可以偷懶了）。?

　　XSL文件本身即是一份?XML文件，所以在XSL文件的開(kāi)頭，一樣有和XML文件相同的聲明。W3C為XSL定義了很多標(biāo)記（元素），XSL文件就是這些標(biāo)記和HTML標(biāo)記的組合。在XSL文件中，必須有：〈xsl:stylesheet?xmlns:xsl="http://www.w3.org/TR/WD-xsl"〉。?

　　其中，xsl:stylesheet是XSL文件的根元素，在根元素中包含了所有的排版樣式，樣式表就是由這些排版樣式組合成的；xmlns:xsl="http://www.w3.org/TR/WD-xsl"這一句主要用來(lái)說(shuō)明該XSL樣式表是使用W3C所制定的XSL，設(shè)定值就是XSL規(guī)范所在的URL地址。?

　　XSL文件中，除HTML標(biāo)記外，其他就是XSL自己的標(biāo)記了。標(biāo)記有不同的功能。下面介紹XSL中各種可用的標(biāo)記，大家可以參照它們的功能說(shuō)明與使用舉例，來(lái)看看例3中XSL的源文件。?

　　1.?xsl:stylesheet：作為XSL樣式表中的根元素，在每個(gè)XSL文件中都必須有。?

　　屬性：default-space：決定是否保留XML文件中的空白，僅當(dāng)值為“default”時(shí)保留。?

　　indent-result：決定是否保留XSL文件中的空白，值為“yes”時(shí)保留。?

　　language：設(shè)定在XSL文件中使用的腳本語(yǔ)言。?

　　例：〈xsl:stylesheet?default-space="default"〉?

　　2.?xsl:template：指定XML文件中的特定標(biāo)記來(lái)定義排版樣式。?

　　屬性：language：指定使用哪種腳本語(yǔ)言。?

　　match：設(shè)定從XML文件中哪個(gè)標(biāo)記開(kāi)始來(lái)讀取信息，如果值為“/”那么表示從XML文件的根元素開(kāi)始讀取信息。?

　　例：〈xsl:template?mach="data/book"〉：表示從XML文件中的〈book〉標(biāo)記開(kāi)始讀取信息。?

　　3.?xsl:value-of：從XML文件中的特定標(biāo)記中將信息讀出來(lái)。屬性：select：設(shè)定讀取哪一個(gè)標(biāo)記中的信息。?

　　例：〈xsl:template?select="title"〉：表示要從〈title〉標(biāo)記中將信息讀出來(lái)。

　　圖3?

　　4.?xsl:for-each：將排版樣式應(yīng)用到XML文件中相同的標(biāo)記（類(lèi)似于循環(huán)語(yǔ)句）。?

　　屬性：select：設(shè)定從哪一個(gè)標(biāo)記中讀取數(shù)據(jù)。?

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

　　5.?xsl:comment：在此元素中的內(nèi)容，XSL將它作為注釋信息，并不顯示在瀏覽器中。?

　　6.?xsl:apply-templates：指示XSL處理器在該XSL樣式表中尋找合適的〈xsl:template〉中設(shè)定的樣式來(lái)用。?

　　屬性：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文件中拷貝標(biāo)記中的信息到輸出的文件中。無(wú)屬性。?

　　例：.......?

　　〈xsl:template〉?

　　?〈xsl:copy〉?

　　〈xsl:value-of?/〉?

　　?〈/xsl:copy〉?

　　?〈/xsl:template〉?

　　...........?

　　此例首先使用〈xsl:copy〉將XML文件中的非標(biāo)記的信息全部讀取出來(lái)，然后通過(guò)〈xsl:value-of?/〉將這些復(fù)制的信息顯示出來(lái)。?

　　8.?xsl:if：與一般程序中的If...Then類(lèi)似。?

　　屬性：script：設(shè)定script程序所表達(dá)的式子。?

　　language：設(shè)定使用哪種腳本語(yǔ)言。?

　　test：設(shè)定條件的敘述表達(dá)式。只有當(dāng)script屬性的設(shè)定值傳回“true”時(shí)（或test屬性設(shè)置的條件成立），〈xsl:if〉中的內(nèi)容才會(huì)被XSL處理器處理。?

　　例：〈xsl:if?test=".[@sex='男']"〉?

　　?〈td〉男〈xsl:value-of?/〉〈/td〉?

　　〈/xsl:if〉?

　　9.?xsl:choose、xsl:when、xsl:otherwise：這三個(gè)元素是用來(lái)設(shè)定較為復(fù)雜的條件式，一般共同配合使用。其中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：可以在標(biāo)記中附加一個(gè)屬性名稱(chēng)或新建一個(gè)標(biāo)記。XSL樣式表不但可以引用HTML標(biāo)記，而且也可以建立新的標(biāo)記和屬性，然后一起結(jié)合XML文件中的信息來(lái)顯示。其中，xsl:attribute是在標(biāo)記中新增一個(gè)屬性，xsl:element是新建一個(gè)標(biāo)記。它們有共同的屬性。?

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

　　例：假如我們沒(méi)有〈img〉這種顯示圖形文件的HTML標(biāo)記，現(xiàn)在我們?cè)赬SL文件中要新增一個(gè)這樣的標(biāo)記，名為〈img〉，具有src屬性。?

　　〈xsl:template?match="image"〉?

　　〈xsl:element?name="img"〉?

　　?〈xsl:attribute?name="src"〉?

　　?〈xsl:value-of?/〉?

　　?〈/xsl:attribute〉?

　　?〈/xsl:element〉?

　　XSL是顯示XML文件的最好的方法，因?yàn)樗蟈ML文件的標(biāo)準(zhǔn)，一切XML有的優(yōu)點(diǎn)，XSL都具備，而且在功能上也有比CSS更強(qiáng)的地方，所以我們?cè)谙胍獙ML文件內(nèi)容顯示出來(lái)的時(shí)候，最好優(yōu)先考慮使用XSL??為了將來(lái)的擴(kuò)展。?

　　例2?2.xml源文件?

　　〈?xml?version="1.0"?encoding="GB2312"??〉?

　　〈?xml-stylesheet?href="first.xsl"?type="text/xsl"??〉?

　　〈data〉?

　　〈book〉?

　　〈title〉XML入門(mén)精解〈/title〉?

　　〈author〉張三〈/author〉?

　　〈price?unit="人民幣"〉20.00〈/price〉?

　　〈/book〉?

　　〈book〉?

　　〈title〉XML語(yǔ)法〈/title〉?

　　〈!--?即將出版?--〉?

　　〈author〉李四〈/author〉?

　　〈price?unit="人民幣"〉18.00〈/price〉?

　　〈memo〉此書(shū)是著名計(jì)算機(jī)科學(xué)專(zhuān)家編著，極具權(quán)威性。在書(shū)中又穿插許多精彩的例子，所以可讀性又極強(qiáng)。〈/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〉書(shū)籍信息〈/h2〉〈/center〉?

　　〈div?align="center"〉〈center〉?

　　〈table?border="1"?cellpadding="5"?bgcolor="#4EB7DE"〉?

　　?〈tr〉?

　　?〈th〉書(shū)名〈/th〉〈th〉作者〈/th〉〈th〉價(jià)格(人民幣)〈/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?常用的文字相關(guān)屬性?屬性名稱(chēng)?功能描述?設(shè)置值?例?
color?文字的顏色?顏色的英文名或十六進(jìn)制的rgb色?color:red?color:#f00f01?
font-family?文字字型?字型名稱(chēng)?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?文字粗細(xì)?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（點(diǎn)）in（英寸）cm（厘米）px（像素）?text-indent:20pt??
text-transform?大小寫(xiě)轉(zhuǎn)換?capitalize、uppercase、lowercase?text-transform:uppercase?
text-decoration?文字加線設(shè)置?underline、ouerline、line-through?text-decora：underline?



表2?常用的版面排列屬性?屬性名稱(chēng)?功能描述?設(shè)置值與單位?
display?組件的顯示狀態(tài)?none、block、inline?
width?組件的寬度?pt、in、cm、px?
background-color?組件的背景顏色?顏色英文名或十六進(jìn)制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?方形邊框的顏色?顏色的英文名或十六進(jìn)制rgb?
border-wide?方形邊框的寬度?thin?、medium、thick、pt、in、cm、px?
border-style?方形邊框的樣式?none、dotted、solid、double?