设为首页
加入收藏
站内地图
旧版入口
当前位置：首页 > 站长学院 > 网络编程 > XML

使用CSS修饰XML文件

作者：佚名 出处：网络转载 时间：07-26 点击：

内容载入中...
通俗一点来说，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，这就是我们下面要讲述的专题。
收藏本文：
【大 中 小】【打印页面】【推荐给朋友】【关闭窗口】
>> 下一篇 ：XSL语法介绍

站长学院

推荐信息