XML教程—CSS与XSL简述

本文探讨了XML如何分离内容与表现形式,并通过CSS和XSL两种样式表语言实现不同需求的表现形式。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

   我们非常清楚的是在XML中内容与表现形式是分开的。这就使得不同的用户可以根据他们自己的需要来定义数据的表现形式。在一个XML的源文件中并没有关于它表现形式的信息。这一点我们可以从下面例子中看出。
  
  例一:在HTML中的一段代码 
   
None.gif  <H1>Car Register</H1> 
None.gif   
None.gif  
<H2>Make: Saab 9000 </H2> 
None.gif   
None.gif  
<H2>Model: 1995</H2> 
None.gif   
None.gif  
<H2>Owner:</H2> 
None.gif   
None.gif  
<p>Kalle Karlsson 
None.gif   
None.gif    G?tgatan 1 
None.gif   
None.gif  11111 Stockholm 
None.gif   
None.gif  
</p> 
None.gif
   
  这是一段典型的HTML代码。在每一个tag(标签)中都含有表现形式的信息,而关于tag之间联系和结构信息却没有了。这事实上约束了HTML的发展。
  
  例二:在XML中的一段代码 
   
  
None.gif<Car Register> 
None.gif   
None.gif  
<Car> 
None.gif   
None.gif  
<Registration Number>ABC123 </Registration Number> 
None.gif   
None.gif  
<Make>Saab 9000</Make> 
None.gif   
None.gif  
<Model>1995 </Model> 
None.gif   
None.gif  
<Owner> 
None.gif   
None.gif  
<Name>Kalle Karlsson </Name> 
None.gif   
None.gif  
<Address>G?tgatan 1 </Address> 
None.gif   
None.gif  
<Zip code>11111 </Zip code> 
None.gif   
None.gif  
<City>Stockholm </City> 
None.gif   
None.gif  
</Owner> 
None.gif   
None.gif  
</Car> 
None.gif   
None.gif  
</Car Register> 
None.gif   

  在XML文件之中tag中的信息是非常纯的。它没有表现部分。所以说有人称XML为传输知识的语言。
  
  
  
  那么XML文件是怎样表现的呢?
  
  XML文件的所有表现信息多发放在了stylesheet(样式表)文件当中。stylesheet文件全权负责XML源文件的表现形式。所以说如果一个XML源文件对应不同的stylesheet文件它就会有不同的表现形式. 有了stylesheet文件我们可以对文件表现型始终的大小,颜色,空白作特定的规定。
  
  
  
  在这篇文章中我们要来讨论的CSS(Cascading Style Sheets 层叠样式表)和XSL(XML Style Language 可扩展类型语言)就是两种stylesheet(样式表)语言。大家会想为什么会同时有两种语言。这不是重复了吗?其实它们是互相补充,各有特色的。CSS可以展现HTML 和XML文件,而XSL可以展现XML和Transformation(转型语言)。由此可见它们各有所长。
  
  
  
  我们还是来看看例子吧:
  
  例三:一段CSS代码 
 
None.gif  
ExpandedBlockStart.gifContractedBlock.gif  H1 
{dot.gif}{ 
InBlock.gif   
InBlock.gif  font-size
: 12pt; 
InBlock.gif   
InBlock.gif  font-weight
: bold; 
InBlock.gif   
InBlock.gif  color
: blue; 
InBlock.gif   
ExpandedBlockEnd.gif  
}
 
   
  它规定了H1元素的字体大小,种类和颜色。当然CSS能做到的远不只这些。还有比如行距,空白大小等等。
  
  
  
  下面我们来看一个CSS结合XML源文件的例子。
  
  例四:一段XML源文件 
   
 
None.gif <?XML:stylesheet type="text/css" href="bach.css"?> 
None.gif   
None.gif  ARTICLE 
None.gif   
None.gif  
<HEADLINE>Fredrick the Great meets Bach</HEADLINE> 
None.gif   
None.gif  
<AUTHOR>Johann Nikolaus Forke</AUTHOR> 
None.gif   
None.gif  
<PARA> 
None.gif   
None.gif  One evening, just as he was getting his 
None.gif   
None.gif  
<INSTRUMENT>flute</INSTRUMENT>ready and his 
None.gif   
None.gif  musicians were assembled, an officer brought him a list of 
None.gif   
None.gif  the strangers who had arrived. 
None.gif   
None.gif  
</PARA> 
None.gif   
None.gif  
</ARTICLE> 
None.gif  
 
  例五:一段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中头两行规定了INSTRUMENT元素是实体的,而ARTICLE, HEADLINE, AUTHOR, PARA元素是虚体的。第三至第五行规定了HEADLINE元素的字体大小,AUTHOR元素是意大利字体,ARTICLE, HEADLINE, AUTHOR, PARA元素间空白有0.5em宽 在例四第一行,XML文件指明了它的stylesheet文件的类型与位置。这样CSS结合到了XML源文件上。
  
  
  
  但CSS与XSL相比,它有着一些不足。CSS适用于那些元素顺序不变的文件。对于那些需要经常按不同元素排序的文件,我们还是要用XSL。
  
  
  
  XSL是怎样工作的呢?
  
  XSL处理器把XML源文件通过XSL检验后产生一个HTML表现文件。这样XML源文件就在网络浏览器上有了表现。其实最终的目标并不只是产生HTML文件,而是可以各种各样的文件,比如Txt, Rtf. XML源文件中也有类似例四中的一行,
  
  比如是<?xml-stylesheet type="text/xsl" href="www.book.com/s1.xsl">用以指明了它的stylesheet文件的类型与位置。每一个XSL文件都包含了template rules(匹配模板规则)的集合。template rules包含有两个部分:Patterns和Actions。
  
  Patterns用以指出这个规则适用于那一个元素,Actions指出这个元素以及它的子元素要怎样展现。这样一来XML源文件中的结构树就被转换成了一个flow objects(流程产物)树。
  
  让我们再来看一个例子吧。
  
  例六:一段XSL代码。 
  
None.gif 
None.gif  
<?xml version="1.0"> 
None.gif   
None.gif  <HTML xmlns:xsl="http://www.w3.org/TR/WD-xsl"> 
None.gif   
None.gif  <BODY STYLE="font-family:Arial, helvetica, sans-serif; font-size:9.5pt;background-color:#FEEEEE"> 
None.gif   
None.gif  <xsl:for-each select="portfolio/stock"> 
None.gif   
None.gif  <DIV STYLE="background-color:teal; color:white; padding:4px"> 
None.gif   
None.gif  <SPAN STYLE="font-weight:bold; color:white"> 
None.gif   
None.gif  <xsl:value-of select="name"/></SPAN> 
None.gif   
None.gif  -<xsl:value-of select="price"/> 
None.gif   
None.gif  </DIV> 
None.gif   
None.gif  <DIV STYLE="margin-left:10px; margin-bottom:1em; font-size:9pt"> 
None.gif   
None.gif  <xsl:value-of select="description"/> 
None.gif   
None.gif  <SPAN STYLE="font-style:italic"> 
None.gif   
None.gif  (change:<xsl:value-of select="change"/> 
None.gif   
None.gif  </SPAN> 
None.gif   
None.gif  </DIV> 
None.gif   
None.gif  </xsl:for-each> 
None.gif   
None.gif  </BODY> 
None.gif   
None.gif  </HTML> 
None.gif  
 
  第二行是指明文件中标识的集合,又叫做Namespace(名域)。这可以使得同名标识不会冲突。
  
  值得一体的是,文件中还用到了选择语句(for-each select)在XML树结构中进行选择。
  
  相信大家读它不会遇到什么困难。 
  
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值