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,这就是我们下面要讲述的专题。
|