使用CSS格式化显示XML文件

1、使用CSS格式化显示XML文件 第第5章章 使用使用CSS格式化显示格式化显示 XML 5.1 CSS技术简介 5.2 XML与CSS结合的方式 5.3 CSS格式化XML XML是一种数据存储语言，没有任何数据显示样式。 因此，浏览器不能直接显示其中的文本数据，如果想让浏 览器只显示其中的数据，就需要借助于其它方法。本章主 要介绍CSS技术及CSS与XML的结合应用。 使用CSS格式化显示XML文件 CSS（Cascading Style Sheet，层叠样式表）是由W3C在1996年正 式推出的，最初的版本是CSS1。1998年W3C又正式推出了CSS2，现 在正在使用的是CSS2.1。C

2、SS3现在还处于开发中。CSS是一种样式控 制语言，用来设置字体样式等内容，最初是为弥补HTML的不足而出 现的。后来，又应用在XML，用来格式化XML数据内容。CSS就是 一组规则的集合。 5.1 CSS技术简介技术简介 CSS语法非常简单，组成CSS语法的元素只有CSS选择符与CSS属 性。每个CSS选择符由一个或多个CSS属性组成。基本格式如下： 选择符属性:属性值 使用CSS格式化显示XML文件 5.2 XML与与CSS结合的方式结合的方式 5.2.2 将样式语句嵌入到XML文件 5.2.1 调用独立样式文件 5.2.3 混合方法指定样式 5.2.4 使用多个样式文件 使用CSS格式化

3、显示XML文件 一个独立的CSS样式文件是一个文本文件，扩展名是“.css”，可 以用记事本编辑。将XML文件和独立的CSS文件结合的方法是在 XML文件中加入下面一条处理指令： 调用独立样式文件调用独立样式文件 CSS文件的URI必须是一个有效的资源。如果CSS文件与XML 文件位于同一目录下，CSS文件的URI可以是CSS文件名，否则必须 是CSS文件的路径。 使用CSS格式化显示XML文件 将样式语句嵌入到将样式语句嵌入到XML文件文件 (1)(1) CSS语句还可以直接写在XML文件内部。例如: persion display:block; font-size:25pt; color:

4、red; 使用CSS格式化显示XML文件 将样式语句嵌入到将样式语句嵌入到XML文件文件 (2)(2) 另外还有一种方法，在标记内使用“style”属性来定义样式，例如: xiaoli male 25 xiaowang female 24 说明：这种方法可以灵活地设置各标记的样式，但会使 XML文件变得不够简洁，不建议使用。 使用CSS格式化显示XML文件 混合方法指定样式混合方法指定样式 综合应用内部CSS样式和外部CSS样式。例如： persion display:block; font-size:20pt; color:red; /省略的XML代码 说明：如果内部样式表和外部样式表之间发

5、生冲突，则以内 部的样式为准。 使用CSS格式化显示XML文件 使用多个样式文件使用多个样式文件 一个XML文件也可以同时调用多个样式表文件。例如： 说明：一个XML文件同时引用多个外部样式表文件时，如果样式表文 件中的内容发生冲突，则以声明靠后的样式表文件中所定义 的样式为准。 使用CSS格式化显示XML文件 5.3 CSS格式化格式化XML文件文件 5.3.1 定义样式 5.3.2 文本显示方式设置 5.3.7 环绕文本 5.3.3 文本属性设置 5.3.4 设置元素 5.3.5 元素定位显示 5.3.6 图片设置 使用CSS格式化显示XML文件 定义样式定义样式 CSS语法简单，一个标记

6、内容的样式的定义由选择符、属性和属 性值组成。 选择符属性:属性值 为XML定义样式时，选择符通常是“标记的名称”，这样，所 有同名的标记都具有相同的显示样式。如果对于相同名称的标记想 使用不同的显示样式，则选择符可以是“#”加该名称的ID属性值。 如果想对不同名称的标记使用相同的样式，则选择符可以是点号“.” 加标记的CLASS属性值。 使用CSS格式化显示XML文件 文本显示方式设置文本显示方式设置 （1） 文本显示方式是指文本内容在浏览器中以何种形式来显示。文 本的显示方式有4种方式：块显示方式、行显示方式、列表显示方式 和不显示方式，通过display属性来设置。 q 块显示方式 块显

7、示方式是指文本内容以块的方式来显示，块的大小取决于文 本内容的大小，文本内容默认为左对齐。定义块显示方式是将display 属性的值指定为block。还可以通过position、width和height属性值设 置块的大小。 例如，有下面的XML文件： 使用CSS格式化显示XML文件 文本显示方式设置文本显示方式设置 （2） 水浒传 施耐庵 52.30 全书以描写农民战争为主要题材，塑造了李逵、 武松、林冲、鲁智深等梁山英雄，揭示了当时的 社会矛盾。故事曲折、语言生动、人物性格鲜明， 具有很高的艺术成就。 使用CSS格式化显示XML文件 文本显示方式设置文本显示方式设置 （3） 将其设置成块显

8、示方式，CSS文件代码如下 ： title display:block; background-color:yellow; authordisplay:block; background-color:cyan; price display:block; background-color:yellow; discretiondisplay:block;background-color:cyan; position:absolute;width:300px;height:60px; 用IE浏览器打开XML文件，得到的结果如图所示： 使用CSS格式化显示XML文件 文本显示方式设置文本显示方式设置

9、（4） q 行显示方式 行显示方式是指文本内容以行的方式来显示，各标记内容按先后 顺序首尾相连。行显示将display属性值设置为line。例如： title display:line; author display:line; price display:line; discretiondisplay:line; 用IE浏览器打开前面的XML文件，得到的结果如图所示： 使用CSS格式化显示XML文件 文本显示方式设置文本显示方式设置 （5） q 列表显示方式 列表显示方式是指文本内容在浏览器中以列表的方式显示，通过 将display属性值指定为list-item来实现。例如： book di

10、splay:list-item; list-style-type:square; margin-left:100px; author display:list-item; list-style-type:circle; margin-left:110px; price display:list-item; list-style-type:circle; margin-left:110px; discretiondisplay:list-item; list-style-type:circle; margin-left:110px; 用IE浏览器打开XML文件，得到的结果如图所示： 使用CSS格

11、式化显示XML文件 文本显示方式设置文本显示方式设置 （6） q 列表显示方式 在列表显示方式中，list-style-type属性用来指定项目符号的外观， 可取的值有: disc - 圆盘 circle - 圆圈 square - 方块 decimal - 十进制数 lower-roman - 小写的罗马数字 upper-roman - 大写的罗马数字 lower-alpha - 小写英文字母 upper-alpha - 大写英文字母 none - 无符号 使用CSS格式化显示XML文件 文本属性设置（文本属性设置（1 1） 文本属性设置包括：文字的属性设置和文本样式设置 。 q 文字的属性

12、设置 文本属性包括文字大小、字体、颜色等。下面详细介绍各个 有关的属性。 （1）设置文字的大小 设置文字的大小通过font-size属性来完成。属性值是一个具 体的数值，单位为pt，pt的中文译为磅或点，用来表示文字的大 小。其他的单位还有px、cm或mm。例如： font-size:15pt; 使用CSS格式化显示XML文件 文本属性设置（文本属性设置（2 2） （2）设置文字的颜色和背景色 设置文字的颜色通过设置color属性来完成。它的属性值可以 为颜色的英文名称，也可以是颜色的16进制RGB的值。例如 ： color:green; color:#00ff00; （3）设置文字的字体 设

13、置文字的字体使用属性font-family，属性值是系统的字体 名称，如果名称中含有空格，需要用双引号括起来。为了防止用 户缺少某种字体，font-family属性的值最好列出多个字体，用逗 号分隔。在显示的时候，浏览器会从前向后依次匹配用户已安装 的字体，并以该字体显示。例如 ： font-family:”Time New Romar” font-family:arial,”Time New Romar”,sans-serif 使用CSS格式化显示XML文件 文本属性设置（文本属性设置（3 3） （4）其它文字样式设置 其它的文字样式的属性还包括：font-style、font-weight

14、和 font-variant。 font-style属性用来表示文字是否使用斜体，属性值可以是 normal（不使用斜体）或italic（使用斜体）。 font-weight属性用来表示文字的粗细，属性的值可以是extra- light、lighter、light、normal、bold、bolder或extra-bold，上面的顺序 由细到粗。font-weight属性值还可以是具体的数值，数值越大文字越 粗。 font-variant属性用来表示是否使用小型的大写字母来显示。属 性值可以是normal或small-caps。 使用CSS格式化显示XML文件 文本属性设置（文本属性设置（4

15、4） q 文本样式设置 文本样式指的是一段文字的样式，与之相关的书信包括：text- align、vertical-align、line-height、text-transform、text-decoration和 text-indent。 （1）text-align属性用来设置文本的对齐方式，该属性的值可以 为：left、right、center或justify。 （2）vertical-align属性用来设置文本 垂直对齐方式，属性的值 可以为：baseline、sub、super、top、text-top、middle、bottom或text- bottom。 （3）line-heigh

16、t属性用来设置文本的行间距，属性值是一个具体 的数值。 使用CSS格式化显示XML文件 文本属性设置（文本属性设置（5 5） q 文本样式设置 （4）text-transform属性用来设置是否将文本中的字母全部大写 或全部小写或首字母大写。属性的值可以是uppercase、lowercase、 capitalize或none。 （5）text-decoration属性用来设置是否给文本加划线，属性值可 以取none、underline、overline、line-through或blink。 （6）text-indent属性用来设置文本的首行缩进，属性值是具体的 数字值，单位为px或pt。

17、使用CSS格式化显示XML文件 文本属性设置（文本属性设置（6 6） 一个实例，XML文件代码如下： 氢气燃烧产生水: 2h2+o2=2h2o 这一反应过程中有大量热放出，火焰呈淡蓝色。 使用CSS格式化显示XML文件 文本属性设置（文本属性设置（7 7） CSS文件代码如下： chemistry display:block; font-size:15pt; text-decoration:underline; text-transform:uppercase; bottom display:line; font-size:10pt; vertical-align:bottom; discre

18、tion display:block; font-size:12pt; text-align:center; background-color:yellow; font-style:italic; bold font-weight:bolder; 用IE浏览器打开XML文件，得到的结果如图所示： 使用CSS格式化显示XML文件 设置元素设置元素 （1） 一个网页元素包含4个部分：元素内容、边框（ border ）、内容与 边框之间填充（padding）和边框与周围元素的边距（margin）。如图所 示： 元素内容元素内容 边框（border）填充（padding） 边距（margin） 元素内

19、容可以是一段文字、一张图片或其它的内容。 使用CSS格式化显示XML文件 设置元素设置元素 （2） q 设置边框（border）： 与边框有关的属性有： （1）border-style：用来设置元素的边框，并且四周的边框具有相 同的样式和宽度。该属性可以取的值有：none（无）、dotted（点虚 线）、dash（短线虚线）、solid（普通边框）、double（双实线）、 groove（3D沟状边框）、ridge（3D脊状边框）、inset（3D内嵌边框） 和outset（3D外嵌边框）。 （2）border-right、border-bottom和border-left：这3个属性可用来

20、单独设置右边、底边和左边的边框样式，这3个属性的取值同border- style属性的取值。 使用CSS格式化显示XML文件 设置元素设置元素 （3） q 设置边框（border）： （3） border-top-width、border-right-width、border-bottom-width和 border-left-width这4个属性用来设置边框4边的宽度，属性值为具体的 数值。 （4） border-color属性用来设置边框的颜色。这个属性的值可以设 置成1个、2个或4个。如果该属性有一个值，表示边框的4个边都为这 个颜色。如果有两个值，表示边框的上边和下边为第一个颜色，左边

21、 和右边为第二个颜色。如果有4个值，按顺序依次为上、右、底、左的 颜色。 注意：只有设置了border-style属性后才能设置其它的属性。 使用CSS格式化显示XML文件 设置元素设置元素 （4） q 设置边框（border）： 例： XML文件： 边框1 边框2 边框3 CSS文件： frame1 display:block; border-style:double; border-color:blue; width:200; height:130; frame2 display:block; border-style:dotted; border-color:red green; wid

22、th:150; height:100; frame3 display:block; border-style:ridge; border-top-width:10; width:100; height:70; 显示效果如图所示： 使用CSS格式化显示XML文件 设置元素设置元素 （5） q 设置填充（padding）： 与填充有关的属性有：padding-top、padding-right、padding- bottom和padding-left。分别表示上、右、下、左的填充。如果4个填充 的大小一样，则可以只写padding属性。该属性的值是具体的数值，单 位是像素。 例如： frame1d

23、isplay:line; border-style:inset; padding-left:15; frame2display:line; border-style:inset; padding-top:10; frame3display:line; border-style:inset; padding:10; 使用CSS格式化显示XML文件 设置元素设置元素 （6） q 设置填充（padding）： 下面的XML文件使用前面的CSS样式，显示的效果如图所示： padding-left:20 padding-top:10 padding:10 使用CSS格式化显示XML文件 设置元素设置元素

24、 （7） q 设置边距（margin） ： 与边距有关的属性有：margin-top、margin-right、margin-bottom和 margin-left。分别代表上、右、下、左的距离。如果4个边距的大小一 样，则可以只写margin属性。该属性的值是具体的数值，单位是像素。 例如 ： frame1 display:line; border-style:inset; width:100;height:50; margin-bottom:20; frame2 display:line; border-style:inset; width:100;height:50; margin-le

25、ft:20; margin-top:20; frame3 display:block; border-style:inset; width:200;height:50; margin:20; 使用CSS格式化显示XML文件 设置元素设置元素 （8） q 设置边距（margin） ： margin-bottom:20 margin-left:20 margin-top:20 margin:20 利用前面的CSS样式显示下面的XML文件，效果如图所示： 使用CSS格式化显示XML文件 元素定位显示（元素定位显示（1） 元素的定位是指指定元素的显示位置。CSS中定位分为两种：绝 对定位和相对定位。

26、元素定位通过position属性设置，该属性有两种取值：absolute或 relative，分别代表绝对定位法和相对定位法。 绝对定位是以自身父元素的左上角为原点，通过偏移量来决定显 示的位置。 相对定位是指相对于自身的偏移量来决定显示的位置。 偏移量通过left属性和top属性来决定。left属性值代表元素距离坐 标远点的向右水平距离，top属性的值代表元素距离坐标远点的向下垂 直距离。 使用CSS格式化显示XML文件 元素定位显示（元素定位显示（2） 实例： XML文件： root 元素1 元素2 元素3 root display:block; background-color:yell

27、ow;width:300; height:200; position:absolute; top:25; left:50; frame1 display:block; background-color:blue; width:200; height:120; position:absolute; top:25; left:50; frame2 display:block; background-color:green; width:100; height:50; position:relative; top:25; left:50; frame3 display:block; background-color:red; width:100; height:50; position:relative; top:25; left:50; CSS样式： 使用CSS格式化显示XML文件 元素定位显示（元素定位显示（3） 显示效果： 在图中看到，元素