XML与CSS

我们可以在IE中查看XML文件中的内容，内容的显示和其原始格式一样，是一种层次结构，对于数据量比较大，结构比较复杂的XML文件来说，这种查看方式很不人性化。如果需要按照某种格式要求来显示XML中的数据，我们该怎么办呢？有一种方法，就是为其编写一支HTML文件，利用XML数据岛将XML中的数据引入到HTML中，用户透过HTML文件来查看XML中的内容。这种方法有个不足之处，就是如果用户还是直接使用IE打开XML文件，那么看到的还是XML中原始的格式。那么有没有什么办法可以让用户直接打开XML文件，看到的是符合我们要求的格式呢？答案是肯定的，那就是使用XML配合CSS（层叠样式表）。

熟悉HTML的朋友对CSS应该都不会陌生了，现在好多的网站都是使用HTML＋CSS在对页面进行框架设计，这样不必修改HTML文件，只要配合不同的CSS文件，就可以得到不同的页面布局。同样，CSS也适用与XML文件。

以前写CSS中的选择器（如果对这个概念不熟悉，可以先查看一些CSS相关文档）往往是HTML中的标签，如Table、TR、TD、Div、H2、Span等等等等。如果想让CSS配合XML，就需要把选择器改成XML文件中的结点。有这样一支XML文件：

<?xmlversion="1.0"encoding="gb2312"?>
<books>
<bookid="0001"bookcategory="文艺"amount="150"remain="80"discount="8.7">
<title>三国演义</title>
<author>罗贯中</author>
<publisher>文艺出版社</publisher>
<isbn>0-765-58007-8</isbn>
<price>80</price>
</book>
<bookid="0002"bookcategory="文艺"amount="100"remain="70"discount="9.8">
<title>红楼梦</title>
<author>曹雪芹</author>
<publisher>三秦出版社</publisher>
<isbn>0-765-58007-9</isbn>
<price>22</price>
</book>
<bookid="0003"bookcategory="文艺"amount="120"remain="60"discount="8.5">
<title>西游记(上下册)</title>
<author>吴承恩</author>
<publisher>人民文学出版社</publisher>
<isbn>0-765-58007-3</isbn>
<price>40.12</price>
</book>
</books>

里面存放了一些图书信息，每本书都有title、author、isbn等信息，我们想让书名（title）以粗体显示，我们需要在CSS文件中加入：

title{...}{
font-weight:blod;
}

 

“title”正是XML文件中书名结点元素名称。CSS文件写好了，XML怎么知道要使用CSS来显示自己的数据呢？和HTML一样，我们需要在XML文件中加入对CSS文件的引用。XML引用CSS文件的方式在根结点之前加

<?xml-stylesheettype="text/css"href="Test07.css"?>

大功告成了！！！用户只需双击XML文件，即可以IE中看到按照引用的CSS文件中的样式显示的数据了。

以上只是一个简单的例子，目的在于说明如何使用CSS定义XML的显示格式。大家可以此为鉴，写出更加丰富漂亮的CSS。

版权声明：本文为博主原创文章，未经博主允许不得转载。