使用CSS修饰XML文件

使用CSS修饰XML文件

通俗一点来说，XSL是XML的原配夫人，而CSS只能算是小妾的角色。但是CSS依然有它的用武之地，下面是通过一个具体的例子来说明CSS在XML中的应用。

做菜先要有原料，这原料就是XML代码，比如我们用XML代码写一封求爱信，把它保存为hzhLove.xml。

　　＜?xml version="1.0" encoding="GB2312"?＞

　　＜?xml-stylesheet type="text/css" href="hzhLove.css" ?＞

　　＜!--DOCTYPE loveletter SYSTEM "hzhLove.dtd" --＞

　　＜loveletter＞

　　＜receiver＞仪琳姑娘＜/receiver＞

　　＜senddate＞2000年1月1日＜/senddate＞

　　＜sendreason＞再一次阅读了金先生的笑傲江湖＜/sendreason＞

　　＜topic＞我和仪琳有个约会＜/topic＞

　　＜content＞

　　＜para＞

　　＜mark＞1＜/mark＞

　　＜title＞引言＜/title＞

　　＜soul＞表示对仪琳产生相思的原因＜/soul＞

　　＜keyword＞眼睛、鼻子、头发、三围、气质＜/keyword＞

　　＜/para＞

　　＜para＞

　　＜mark＞2＜/mark＞

　　＜title＞论述＜/title＞

　　＜soul＞列举所有酸不垃圾的话直到自己的胃不能承受＜/soul＞

　　＜keyword＞朝思暮想、朝三暮四、聊胜于无、生生世世、执子之手＜/keyword＞

　　＜/para＞

　　＜para＞

　　＜mark＞3＜/mark＞

　　＜title＞结论

　　＜soul＞没有你我的世界会有所不同，实际上原因是要花费时间去追别的女孩＜/soul＞

　　＜keyword＞女朋友、老婆、情人、一辈子＜/keyword＞

　　＜/para＞

　　＜/content＞

　　＜reference＞

　　＜article＞追女孩十大秘技＜/article＞

　　＜article＞网上求友大法＜/article＞

　　＜article＞三心二意追女法＜/article＞

　　＜/reference＞

　　＜/loveletter＞
　　
注意第二行代码＜?xml-stylesheet type="text/css" href="hzhLove.css"?＞，它表示引用的CSS的名称hzhLove.css，hzhLove.css的作用就是对各个标记的显示方式进行定义：

　　比如 receiver

　　{

　　　　margin-bottom: 10pt;

　　　　margin-left: 20;

　　　　font-family : "宋体";

　　　　font-size : 22pt;

　　　　display: block;

　　　}
　　
就表示对标记receiver的显示方式的设定。实际上，CSS在HTML网页设计中的地位是很重要的，它为HTML网页提供了一种聪明的、先进的格式化方法。你可以定义诸如位置、颜色、背景、边空、字体、排版格式等等。

CSS基本格式

定义CSS的基本格式如下：

Selector {property:value; property:value; ...}

下面对这些关键字逐一进行说明：

Selector： 选择符，被施加样式的元素，可以是标记（tag）、类(class)、标识(id)等。 在上面的例子中receiver就是一个Selector。

Property： 样式属性，可以是颜色、字体、背景等等。比如上面例子中的"display"，"font-size"等等。

value： 样式属性取值，决定样式结果。 比如我们取font-size的值

为22pt。注意有些属性的取值是一个枚举值，也就是说系统列出了所有你可以取的值，你从中选择一个就是了。比如属性"display",可以取的值有：block,table,table-caption,table-row, table-cell,listitem等等。选择一个你认为合适的，作为一个Selector的属性"dispaly"的值。

如果我们要把para以列表形式显示的话，并对receive,senddate,sendreason,topic等元素进行不同的设置的话，完整的hzhLove.css见下面：

　　receiver

　　　{

　　　　margin-bottom: 10pt;

　　　　margin-left: 20;

　　　　font-family : "宋体";

　　　　font-size : 22pt;

　　　　display: block;

　　　}
　　senddate

　　　{

　　　　margin-bottom: 10pt;

　　　　margin-left: 20;

　　　　font-family : "宋体";

　　　　font-size : 8pt;

　　　　display: block;

　　　}
　　sendreason

　　　{

　　　　margin-bottom: 10pt;

　　　　margin-left: 20;

　　　　font-family : "黑体";

　　　　font-size : 10pt;

　　　　display: block;

　　　}
　　topic

　　　{

　　　　margin-bottom: 10pt;

　　　　margin-left: 20;

　　　　font-family : "仿宋体";

　　　　font-size : 10pt;

　　　　display: block;

　　　}
　　content

　　　{

　　　　display: table-caption;

　　　　padding:25px;

　　　}
　　para

　　　{

　　　　display: table-row;

　　　}
　　mark,title,soul,keyword

　　　{

　　　　display:table-cell;

　　　　padding:5px;

　　　}
　　mark

　　　{

　　　　color:red;

　　　　font-weight:bold;

　　　}
　　title,soul,keyword

　　　{

　　　　color:black;

　　　}
　　article

　　　{

　　　　display: block;

　　　}
　　
把hzhLove.xml和hzhLove.css放在同一个目录下，用浏览器NetScape的升级版本Mozilla观看hzhLove.xml文档你就会得到定制的显示效果，而不是死板的一棵树状的表示。这里需要注意的一点是在IE对CSS2的支持不完全，而且不支持用中文作为CSS的标记的名称，也就是说IE对XML的CSS支持还不是很好，所以你用IE浏览器的话，是不会看到你所希望的定制效果的，我们只好等待新的IE6.0或者是改用其他对CSS支持良好的浏览器（比如大名鼎鼎的NetScape）。当然如果你非用IE的话，一个解决方法就是不用CSS来装饰XML，改用XSL，这就是我们下面要讲述的专题。