分享
 
 
 

使用CSS修饰XML文件

王朝html/css/js·作者佚名  2006-12-16
窄屏简体版  字體: |||超大  

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

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
2023年上半年GDP全球前十五强
 百态   2023-10-24
美众议院议长启动对拜登的弹劾调查
 百态   2023-09-13
上海、济南、武汉等多地出现不明坠落物
 探索   2023-09-06
印度或要将国名改为“巴拉特”
 百态   2023-09-06
男子为女友送行,买票不登机被捕
 百态   2023-08-20
手机地震预警功能怎么开?
 干货   2023-08-06
女子4年卖2套房花700多万做美容:不但没变美脸,面部还出现变形
 百态   2023-08-04
住户一楼被水淹 还冲来8头猪
 百态   2023-07-31
女子体内爬出大量瓜子状活虫
 百态   2023-07-25
地球连续35年收到神秘规律性信号,网友:不要回答!
 探索   2023-07-21
全球镓价格本周大涨27%
 探索   2023-07-09
钱都流向了那些不缺钱的人,苦都留给了能吃苦的人
 探索   2023-07-02
倩女手游刀客魅者强控制(强混乱强眩晕强睡眠)和对应控制抗性的关系
 百态   2020-08-20
美国5月9日最新疫情:美国确诊人数突破131万
 百态   2020-05-09
荷兰政府宣布将集体辞职
 干货   2020-04-30
倩女幽魂手游师徒任务情义春秋猜成语答案逍遥观:鹏程万里
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案神机营:射石饮羽
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案昆仑山:拔刀相助
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案天工阁:鬼斧神工
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案丝路古道:单枪匹马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:与虎谋皮
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:李代桃僵
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案镇郊荒野:指鹿为马
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:小鸟依人
 干货   2019-11-12
倩女幽魂手游师徒任务情义春秋猜成语答案金陵:千金买邻
 干货   2019-11-12
 
推荐阅读
 
 
 
>>返回首頁<<
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有