网站建设_网站制作_SEO优化推广_百度推广开户_朋友圈网络科技

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ì)遇到什么困難。

作者:朋友圈科技


Go To Top 回頂部
主站蜘蛛池模板: 穿线管|波纹穿线管|包塑金属软管|蛇皮管?闵彬专注弱电工程? | 杭州营业执照代办-公司变更价格-许可证办理流程_杭州福道财务管理咨询有限公司 | 新疆系统集成_新疆系统集成公司_系统集成项目-新疆利成科技 | 聚氨酯复合板保温板厂家_廊坊华宇创新科技有限公司 | 石牌坊价格石牌坊雕刻制作_石雕牌坊牌楼石栏杆厂家_山东嘉祥石雕有限公司 | 锂电混合机-新能源混合机-正极材料混料机-高镍,三元材料混料机-负极,包覆混合机-贝尔专业混合混料搅拌机械系统设备厂家 | 螺旋叶片_螺旋叶片成型机_绞龙叶片_莱州源泽机械制造有限公司 | 硬齿面减速机[型号全],ZQ减速机-淄博久增机械 | 旗帜网络笔记-免费领取《旗帜网络笔记》电子书 | 上海防爆真空干燥箱-上海防爆冷库-上海防爆冷柜?-上海浦下防爆设备厂家? | 物流公司电话|附近物流公司电话上门取货 | 硅PU球场、篮球场地面施工「水性、环保、弹性」硅PU材料生产厂家-广东中星体育公司 | 螺杆式冷水机-低温冷水机厂家-冷冻机-风冷式-水冷式冷水机-上海祝松机械有限公司 | 耐驰泵阀管件制造-耐驰泵阀科技(天津)有限公司 | 铸钢件厂家-铸钢齿轮-减速机厂家-淄博凯振机械有限公司 | 同步带轮_同步带_同步轮_iHF合发齿轮厂家-深圳市合发齿轮机械有限公司 | 在线浊度仪_悬浮物污泥浓度计_超声波泥位计_污泥界面仪_泥水界面仪-无锡蓝拓仪表科技有限公司 | 电子万能试验机_液压拉力试验机_冲击疲劳试验机_材料试验机厂家-济南众标仪器设备有限公司 | 针焰试验仪,灼热丝试验仪,漏电起痕试验仪,水平垂直燃烧试验仪 - 苏州亚诺天下仪器有限公司 | 安规_综合测试仪,电器安全性能综合测试仪,低压母线槽安规综合测试仪-青岛合众电子有限公司 | 万家财经_财经新闻_在线财经资讯网 | 化妆品加工厂-化妆品加工-化妆品代加工-面膜加工-广东欧泉生化科技有限公司 | 广州番禺搬家公司_天河黄埔搬家公司_企业工厂搬迁_日式搬家_广州搬家公司_厚道搬迁搬家公司 | 免联考国际MBA_在职MBA报考条件/科目/排名-MBA信息网 | 真空乳化机-灌装封尾机-首页-温州精灌| 非标压力容器_碳钢储罐_不锈钢_搪玻璃反应釜厂家-山东首丰智能环保装备有限公司 | 肉嫩度仪-凝胶测试仪-国产质构仪-气味分析仪-上海保圣实业发展有限公司|总部 | 400电话_400电话申请_888元包年_400电话办理服务中心_400VIP网 | 山东锐智科电检测仪器有限公司_超声波测厚仪,涂层测厚仪,里氏硬度计,电火花检漏仪,地下管线探测仪 | 尼龙PA610树脂,尼龙PA612树脂,尼龙PA1010树脂,透明尼龙-谷骐科技【官网】 | 托利多电子平台秤-高精度接线盒-托利多高精度电子秤|百科 | 碳化硅,氮化硅,冰晶石,绢云母,氟化铝,白刚玉,棕刚玉,石墨,铝粉,铁粉,金属硅粉,金属铝粉,氧化铝粉,硅微粉,蓝晶石,红柱石,莫来石,粉煤灰,三聚磷酸钠,六偏磷酸钠,硫酸镁-皓泉新材料 | 玉米深加工机械,玉米加工设备,玉米加工机械等玉米深加工设备制造商-河南成立粮油机械有限公司 | 电镀整流器_微弧氧化电源_高频电解电源_微弧氧化设备厂家_深圳开瑞节能 | 石英陶瓷,石英坩埚,二氧化硅陶瓷-淄博百特高新材料有限公司 | 周口风机|周风风机|河南省周口通用风机厂| 传递窗_超净|洁净工作台_高效过滤器-传递窗厂家广州梓净公司 | Akribis直线电机_直线模组_力矩电机_直线电机平台|雅科贝思Akribis-杭州摩森机电科技有限公司 | 博客-悦享汽车品质生活 | 气弹簧定制-气动杆-可控气弹簧-不锈钢阻尼器-工业气弹簧-可调节气弹簧厂家-常州巨腾气弹簧供应商 | 成都APP开发-成都App定制-成都app开发公司-【未来久】 |