通俗一点来说,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,这就是我们下面要讲述的专题。