XML教程—CSS与XSL简述_Web开发_学习笔记★闵涛★计算机学习电脑编程软硬件技巧


	转至繁体中文版	\| 网站首页 \| 图文教程 \| 资源下载 \| 站长博客 \| 图片素材 \| 武汉seo \| 武汉网站优化 \|

XML教程—CSS与XSL简述

作者：闵涛文章来源：闵涛的学习笔记点击数：783 更新时间：2009/4/23 11:18:14

     我们非常清楚的是在XML中内容与表现形式是分开的。这就使得不同的用户可以根据他们自己的需要来定义数据的表现形式。在一个XML的源文件中并没有关于它表现形式的信息。这一点我们可以从下面例子中看出。

  例一：在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代码。在每一个tag(标签)中都含有表现形式的信息，而关于tag之间联系和结构信息却没有了。这事实上约束了HTML的发展。

  例二：在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中的信息是非常纯的。它没有表现部分。所以说有人称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代码

  H1 {

  font-size: 12pt;

  font-weight: bold;

  color: blue;

  }

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



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

  例四：一段XML源文件

  <?XML:stylesheet type="text/css" href="bach.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中头两行规定了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代码。

  <?xml version="1.0">

  <HTML xmlns:xsl="http://www.w3.org/TR/WD-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>

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

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

  相信大家读它不会遇到什么困难。

[Web开发]css ul li 不换行  [网页制作]如何正确的理解CSS的float浮动属性？
[网页制作]CSS 3 选择器解释  [网页制作]CSS Image Maps—图像地图
[网页制作]一款DIV+CSS导航条效果  [网页制作]xml css htc 的综合运用
[网页制作]用GoLive实现CSS+DIV之二  [网页制作]免费CSS布局和模板大集合！
[网页制作]DIV+CSS网页布局常用的方法与技巧  [网页制作]初学者来看：网页CSS样式表设计十条技巧

教程录入：mintao 责任编辑：mintao

上一篇教程：在.NETFramework中表示XML的最佳做法

下一篇教程： XML（可扩展标识语言）的产生

【字体：小大】【发表评论】【加入收藏】【告诉好友】【打印此文】【关闭窗口】

注：本站部分文章源于互联网，版权归原作者所有！如有侵权，请原作者与本站联系，本站将立即删除！本站文章除特别注明外均可转载，但需注明出处！ [MinTao学以致用网]

　网友评论：（只显示最新10条。评论内容只代表网友观点，与本站立场无关！）

同类栏目

· Web开发  · 网页制作
· 平面设计  · 网站运营
· 网站推广  · 搜索优化
· 建站心得  · 站长故事
· 互联动态

热门推荐

没有教程

赞助链接

闵涛博文

500 - 内部服务器错误。

您查找的资源存在问题，因而无法显示。

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18

闵涛站盟:医药大全-武穴网。A打造B、C、D……