×

关注微信公众号

免备案网站空间虚拟主机双线空间域名查询PS数码后期
photoshop互助课堂数百G视频教程下载英语培训机构初中英语如何学随时随地聆听大师开讲/课堂
酷素材!视频教程打包下手绘教程抠图教程路径专辑photoshop cs3视频教程
楼主: 寅生

CSS与XSL简述

[复制链接]
发表于 2006-6-29 07:55:46 | 显示全部楼层 |阅读模式
我们非常清楚的是在XML中内容与表现形式是分开的。这就使得不同的用户可以根据他们自己的需要来定义数据的表现形式。在一个XML的源文件中并没有关于它表现形式的信息。这一点我们可以从下面例子中看出。

例一:在HTML中的一段代码

  1. <H1>Car Register</H1>

  2. <H2>Make: Saab 9000 </H2>

  3. <H2>Model: 1995</H2>

  4. <H2>Owner:</H2>

  5. <p>Kalle Karlsson

  6.   G?tgatan 1

  7. 11111 Stockholm

  8. </p>
复制代码

这是一段典型的HTML代码。在每一个tag(标签)中都含有表现形式的信息,而关于tag之间联系和结构信息却没有了。这事实上约束了HTML的发展。

例二:在XML中的一段代码

  1. <Car Register>

  2. <Car>

  3. <Registration Number>ABC123 </Registration Number>

  4. <Make>Saab 9000</Make>

  5. <Model>1995 </Model>

  6. <Owner>

  7. <Name>Kalle Karlsson </Name>

  8. <Address>G?tgatan 1 </Address>

  9. <Zip code>11111 </Zip code>

  10. <City>Stockholm </City>

  11. </Owner>

  12. </Car>

  13. </Car Register>
复制代码


在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代码

  1. H1 {

  2. font-size: 12pt;

  3. font-weight: bold;

  4. color: blue;

  5. }
复制代码


它规定了H1元素的字体大小,种类和颜色。当然CSS能做到的远不只这些。还有比如行距,空白大小等等。



下面我们来看一个CSS结合XML源文件的例子。

例四:一段XML源文件

  1. <?XML:stylesheet type="text/css" href="bach.css"?>

  2. ARTICLE

  3. <HEADLINE>Fredrick the Great meets Bach</HEADLINE>

  4. <AUTHOR>Johann Nikolaus Forke</AUTHOR>

  5. <PARA>

  6. One evening, just as he was getting his

  7. <INSTRUMENT>flute</INSTRUMENT>ready and his

  8. musicians were assembled, an officer brought him a list of

  9. the strangers who had arrived.

  10. </PARA>

  11. </ARTICLE>
复制代码


例五:一段XSL代码,名为bach.css

  1. INSTRUMENT {display: inline}

  2. ARTICLE, HEADLINE, AUTHOR, PARA {display: block}

  3. HEADLINE {font-size: 1.3em}

  4. AUTHOR {font-style: italic}

  5. 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.jcwcn.com/s1.xsl">用以指明了它的stylesheet文件的类型与位置。每一个XSL文件都包含了template rules(匹配模板规则)的集合。template rules包含有两个部分:Patterns和Actions。

Patterns用以指出这个规则适用于那一个元素,Actions指出这个元素以及它的子元素要怎样展现。这样一来XML源文件中的结构树就被转换成了一个flow objects(流程产物)树。

让我们再来看一个例子吧。

例六:一段XSL代码。

  1. <?xml version="1.0">

  2. <HTML xmlns:xsl="http://www.w3.org/TR/WD-xsl">

  3. <BODY STYLE="font-family:Arial, helvetica, sans-serif; font-size:9.5pt;background-color:#FEEEEE">

  4. <xsl:for-each select="portfolio/stock">

  5. <DIV STYLE="background-color:teal; color:white; padding:4px">

  6. <SPAN STYLE="font-weight:bold; color:white">

  7. <xsl:value-of select="name"/></SPAN>

  8. -<xsl:value-of select="price"/>

  9. </DIV>

  10. <DIV STYLE="margin-left:10px; margin-bottom:1em; font-size:9pt">

  11. <xsl:value-of select="description"/>

  12. <SPAN STYLE="font-style:italic">

  13. (change:<xsl:value-of select="change"/>

  14. </SPAN>

  15. </DIV>

  16. </xsl:for-each>

  17. </BODY>

  18. </HTML>
复制代码


第二行是指明文件中标识的集合,又叫做Namespace(名域)。这可以使得同名标识不会冲突。

值得一体的是,文件中还用到了选择语句(for-each select)在XML树结构中进行选择。

相信大家读它不会遇到什么困难。
发表于 2006-6-29 09:42:48 | 显示全部楼层
似乎明白了一点,不错
发表于 2006-6-29 13:23:30 | 显示全部楼层
天啊。..............
 楼主| 发表于 2006-6-29 18:34:01 | 显示全部楼层
原帖由 riechie 于 2006-6-29 01:23 PM 发表
天啊。..............


咋的啦,这么大动静
发表于 2006-7-7 23:38:05 | 显示全部楼层
吧老技术弄清楚先
发表于 2006-7-13 00:10:53 | 显示全部楼层
发自内脏说:好-很好-非常好
发表于 2017-12-18 16:51:48 | 显示全部楼层
难得一见的好帖
回复 支持 反对

使用道具 举报

发表于 2017-12-18 16:33:50 | 显示全部楼层
说的非常好
回复 支持 反对

使用道具 举报

发表于 2017-12-18 16:00:05 | 显示全部楼层
LZ真是人才
回复 支持 反对

使用道具 举报

发表于 2017-12-18 16:29:15 | 显示全部楼层
好帖子要收藏
回复 支持 反对

使用道具 举报

发表于 2017-12-18 15:56:34 | 显示全部楼层
果断收藏了
回复 支持 反对

使用道具 举报

发表于 2018-9-24 21:28:23 | 显示全部楼层
很不错。。。
回复 支持 反对

使用道具 举报

发表于 2018-9-24 21:25:08 | 显示全部楼层
好帖就是要顶
回复 支持 反对

使用道具 举报

发表于 2018-9-24 21:08:39 | 显示全部楼层
真心顶。。。。
回复 支持 反对

使用道具 举报

发表于 2018-9-24 21:19:07 | 显示全部楼层
学习了。。。
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | [免费注册]

本版积分规则