CSS與XSL簡述
日期:2012/2/18 / 人氣:
我們非常清楚的是在XML中內(nèi)容與表現(xiàn)形式是分開的。這就使得不同的用戶可以根據(jù)他們自己的需要來定義數(shù)據(jù)的表現(xiàn)形式。在一個(gè)XML的源文件中并沒有關(guān)于它表現(xiàn)形式的信息。這一點(diǎn)我們可以從下面例子中看出。
佛山網(wǎng)站建設(shè)_佛山網(wǎng)站制作_佛山網(wǎng)站設(shè)計(jì)_佛山網(wǎng)站_佛山網(wǎng)頁設(shè)計(jì)_佛山網(wǎng)頁建設(shè)_佛山網(wǎng)頁制作
例一:在HTML中的一段代碼
<H1>Car Register</H1>
<H2>Make: Saab 9000 </H2>
<H2>Model: 1995</H2>
<H2>Owner:</H2>
<p>Kalle Karlsson
G?tgatan 1
11111 Stockholm
</p>
這是一段典型的HTML代碼。在每一個(gè)tag(標(biāo)簽)中都含有表現(xiàn)形式的信息,而關(guān)于tag之間聯(lián)系和結(jié)構(gòu)信息卻沒有了。這事實(shí)上約束了HTML的發(fā)展。
例二:在XML中的一段代碼
<Car Register>
<Car>
<Registration Number>ABC123 </Registration Number>
<Make>Saab 9000</Make>
<Model>1995 </Model>
<Owner>
<Name>Kalle Karlsson </Name>
<Address>G?tgatan 1 </Address>
<Zip code>11111 </Zip code>
<City>Stockholm </City>
</Owner>
</Car>
</Car Register>
在XML文件之中tag中的信息是非常純的。它沒有表現(xiàn)部分。所以說有人稱XML為傳輸知識的語言。
那么XML文件是怎樣表現(xiàn)的呢?
XML文件的所有表現(xiàn)信息多發(fā)放在了stylesheet(樣式表)文件當(dāng)中。stylesheet文件全權(quán)負(fù)責(zé)XML源文件的表現(xiàn)形式。所以說如果一個(gè)XML源文件對應(yīng)不同的stylesheet文件它就會(huì)有不同的表現(xiàn)形式. 有了stylesheet文件我們可以對文件表現(xiàn)型始終的大小,顏色,空白作特定的規(guī)定。
在這篇文章中我們要來討論的CSS(Cascading Style Sheets 層疊樣式表)和XSL(XML Style Language 可擴(kuò)展類型語言)就是兩種stylesheet(樣式表)語言。大家會(huì)想為什么會(huì)同時(shí)有兩種語言。這不是重復(fù)了嗎?其實(shí)它們是互相補(bǔ)充,各有特色的。CSS可以展現(xiàn)HTML 和XML文件,而XSL可以展現(xiàn)XML和Transformation(轉(zhuǎn)型語言)。由此可見它們各有所長。
我們還是來看看例子吧:
例三:一段CSS代碼
H1 {
font-size: 12pt;
font-weight: bold;
color: blue;
}
它規(guī)定了H1元素的字體大小,種類和顏色。當(dāng)然CSS能做到的遠(yuǎn)不只這些。還有比如行距,空白大小等等。
下面我們來看一個(gè)CSS結(jié)合XML源文件的例子。
例四:一段XML源文件
<?XML:stylesheet type="text/css" ?>
ARTICLE
<HEADLINE>Fredrick the Great meets Bach</HEADLINE>
<AUTHOR>Johann Nikolaus Forke</AUTHOR>
<PARA>
One evening, just as he was getting his
<INSTRUMENT>flute</INSTRUMENT>ready and his
musicians were assembled, an officer brought him a list of
the strangers who had arrived.
</PARA>
</ARTICLE>
例五:一段XSL代碼,名為bach.css
INSTRUMENT {display: inline}
ARTICLE, HEADLINE, AUTHOR, PARA {display: block}
HEADLINE {font-size: 1.3em}
AUTHOR {font-style: italic}
ARTICLE, HEADLINE, AUTHOR, PARA {margin: 0.5em}
CSS中頭兩行規(guī)定了INSTRUMENT元素是實(shí)體的,而ARTICLE, HEADLINE, AUTHOR, PARA元素是虛體的。第三至第五行規(guī)定了HEADLINE元素的字體大小,AUTHOR元素是意大利字體,ARTICLE, HEADLINE, AUTHOR, PARA元素間空白有0.5em寬 在例四第一行,XML文件指明了它的stylesheet文件的類型與位置。這樣CSS結(jié)合到了XML源文件上。
但CSS與XSL相比,它有著一些不足。CSS適用于那些元素順序不變的文件。對于那些需要經(jīng)常按不同元素排序的文件,我們還是要用XSL。
XSL是怎樣工作的呢?
XSL處理器把XML源文件通過XSL檢驗(yàn)后產(chǎn)生一個(gè)HTML表現(xiàn)文件。這樣XML源文件就在網(wǎng)絡(luò)瀏覽器上有了表現(xiàn)。其實(shí)最終的目標(biāo)并不只是產(chǎn)生HTML文件,而是可以各種各樣的文件,比如Txt, Rtf. XML源文件中也有類似例四中的一行,
比如是<?xml-stylesheet type="text/xsl" >用以指明了它的stylesheet文件的類型與位置。每一個(gè)XSL文件都包含了template rules(匹配模板規(guī)則)的集合。template rules包含有兩個(gè)部分:Patterns和Actions。
Patterns用以指出這個(gè)規(guī)則適用于那一個(gè)元素,Actions指出這個(gè)元素以及它的子元素要怎樣展現(xiàn)。這樣一來XML源文件中的結(jié)構(gòu)樹就被轉(zhuǎn)換成了一個(gè)flow objects(流程產(chǎn)物)樹。
讓我們再來看一個(gè)例子吧。
例六:一段XSL代碼。
<?xml version="1.0">
<HTML xmlns:xsl="">
<BODY STYLE="font-family:Arial, helvetica, sans-serif; font-size:9.5pt;background-color:#FEEEEE">
<xsl:for-each select="portfolio/stock">
<DIV STYLE="background-color:teal; color:white; padding:4px">
<SPAN STYLE="font-weight:bold; color:white">
<xsl:value-of select="name"/></SPAN>
-<xsl:value-of select="price"/>
</DIV>
<DIV STYLE="margin-left:10px; margin-bottom:1em; font-size:9pt">
<xsl:value-of select="description"/>
<SPAN STYLE="font-style:italic">
(change:<xsl:value-of select="change"/>
</SPAN>
</DIV>
</xsl:for-each>
</BODY>
</HTML>
第二行是指明文件中標(biāo)識的集合,又叫做Namespace(名域)。這可以使得同名標(biāo)識不會(huì)沖突。
值得一體的是,文件中還用到了選擇語句(for-each select)在XML樹結(jié)構(gòu)中進(jìn)行選擇。
相信大家讀它不會(huì)遇到什么困難。
作者:朋友圈科技
相關(guān)內(nèi)容 Related
- 為什么響應(yīng)式設(shè)計(jì)需要媒體查詢2016/8/5
- 虛擬主機(jī)被搜索引擎爬蟲訪問耗費(fèi)大量流量解決方法2016/8/3
- 網(wǎng)站建設(shè)中如何創(chuàng)建完美的顏色組合2016/8/1
- 什么是長尾關(guān)鍵詞?2016/8/1
- 建設(shè)企業(yè)或個(gè)人網(wǎng)站的好處2016/7/8
- 前端開發(fā)者需要知道的常識2016/7/6
- 12種方法為您拓展業(yè)務(wù)通道2016/7/27
- SEO優(yōu)化的三大技巧2016/7/24
- 10的方法來提高你的網(wǎng)站設(shè)計(jì)2016/7/24
- 網(wǎng)站統(tǒng)計(jì)用哪個(gè)比較好,百度?cnzz?2016/7/21