1、第5章 使用CSS格式化显示XML文件,5.1 CSS技术简介,5.2 XML与CSS结合的方式,5.3 CSS格式化XML文件,XML是一种数据存储语言，没有任何数据显示样式。 因此，浏览器不能直接显示其中的文本数据，如果想让浏 览器只显示其中的数据，就需要借助于其它方法。本章主 要介绍CSS技术及CSS与XML的结合应用。,CSS（Cascading Style Sheet，层叠样式表）是由W3C在1996年正 式推出的，最初的版本是CSS1。1998年W3C又正式推出了CSS2，现 在正在使用的是CSS2.1。CSS3现在还处于开发中。CSS是一种样式控 制语言，用来设置字体样式等内容，
2、最初是为弥补HTML的不足而出 现的。后来，又应用在XML，用来格式化XML数据内容。CSS就是 一组规则的集合。,5.1 CSS技术简介,CSS语法非常简单，组成CSS语法的元素只有CSS选择符与CSS属 性。每个CSS选择符由一个或多个CSS属性组成。基本格式如下：,选择符属性:属性值,返回,5.2 XML与CSS结合的方式,5.2.2 将样式语句嵌入到XML文件,5.2.1 调用独立样式文件,5.2.3 混合方法指定样式,5.2.4 使用多个样式文件,返回,一个独立的CSS样式文件是一个文本文件，扩展名是“.css”，可 以用记事本编辑。将XML文件和独立的CSS文件结合的方法是在 XM
3、L文件中加入下面一条处理指令：,调用独立样式文件,CSS文件的URI必须是一个有效的资源。如果CSS文件与XML文件位于同一目录下，CSS文件的URI可以是CSS文件名，否则必须是CSS文件的路径。,返回,将样式语句嵌入到XML文件 (1),CSS语句还可以直接写在XML文件内部。例如:,persiondisplay:block;font-size:25pt;color:red;,将样式语句嵌入到XML文件 (2),另外还有一种方法，在标记内使用“style”属性来定义样式，例如:,xiaolimale25xiaowangfemale24,说明：这种方法可以灵活地设置各标记的样式，但会使XML
4、文件变得不够简洁，不建议使用。,返回,混合方法指定样式,综合应用内部CSS样式和外部CSS样式。例如：,persiondisplay:block;font-size:20pt;color:red;/省略的XML代码,说明：如果内部样式表和外部样式表之间发生冲突，则以内部的样式为准。,返回,使用多个样式文件,一个XML文件也可以同时调用多个样式表文件。例如：, ,说明：一个XML文件同时引用多个外部样式表文件时，如果样式表文件中的内容发生冲突，则以声明靠后的样式表文件中所定义的样式为准。,返回,5.3 CSS格式化XML文件,5.3.1 定义样式,5.3.2 文本显示方式设置,5.3.7 环绕文
5、本,5.3.3 文本属性设置,5.3.4 设置元素,5.3.5 元素定位显示,5.3.6 图片设置,返回,定义样式,CSS语法简单，一个标记内容的样式的定义由选择符、属性和属性值组成。,选择符属性:属性值,为XML定义样式时，选择符通常是“标记的名称”，这样，所有同名的标记都具有相同的显示样式。如果对于相同名称的标记想使用不同的显示样式，则选择符可以是“#”加该名称的ID属性值。如果想对不同名称的标记使用相同的样式，则选择符可以是点号“.”加标记的CLASS属性值。,返回,文本显示方式设置 （1）,文本显示方式是指文本内容在浏览器中以何种形式来显示。文本的显示方式有4种方式：块显示方式、行显示
6、方式、列表显示方式和不显示方式，通过display属性来设置。,块显示方式,块显示方式是指文本内容以块的方式来显示，块的大小取决于文本内容的大小，文本内容默认为左对齐。定义块显示方式是将display属性的值指定为block。还可以通过position、width和height属性值设置块的大小。,例如，有下面的XML文件：,文本显示方式设置 （2）,水浒传施耐庵52.30全书以描写农民战争为主要题材，塑造了李逵、武松、林冲、鲁智深等梁山英雄，揭示了当时的社会矛盾。故事曲折、语言生动、人物性格鲜明，具有很高的艺术成就。,文本显示方式设置 （3）,将其设置成块显示方式，CSS文件代码如下 ：,t
7、itle 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文件，得到的结果如图所示：,文本显示方式设置 （4）,行显示方式,行显示方式是指文本内容以行的方式来显示，各标记内容按先后顺序首
8、尾相连。行显示将display属性值设置为line。例如：,title display:line; author display:line; price display:line; discretiondisplay:line;,用IE浏览器打开前面的XML文件，得到的结果如图所示：,文本显示方式设置 （5）,列表显示方式,列表显示方式是指文本内容在浏览器中以列表的方式显示，通过将display属性值指定为list-item来实现。例如：,book display:list-item; list-style-type:square; margin-left:100px; author disp
9、lay: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文件，得到的结果如图所示：,文本显示方式设置 （6）,列表显示方式,在列表显示方式中，list-style-type属性用来指定项目符号的外观，可取的值有:,disc - 圆盘 ci
10、rcle - 圆圈 square - 方块 decimal - 十进制数 lower-roman - 小写的罗马数字 upper-roman - 大写的罗马数字 lower-alpha - 小写英文字母 upper-alpha - 大写英文字母 none - 无符号,返回,文本属性设置（1）,文本属性设置包括：文字的属性设置和文本样式设置 。,文字的属性设置,文本属性包括文字大小、字体、颜色等。下面详细介绍各个有关的属性。,（1）设置文字的大小,设置文字的大小通过font-size属性来完成。属性值是一个具体的数值，单位为pt，pt的中文译为磅或点，用来表示文字的大小。其他的单位还有px、cm
11、或mm。例如：,font-size:15pt;,文本属性设置（2）,（2）设置文字的颜色和背景色,设置文字的颜色通过设置color属性来完成。它的属性值可以为颜色的英文名称，也可以是颜色的16进制RGB的值。例如 ：,color:green; color:#00ff00;,（3）设置文字的字体,设置文字的字体使用属性font-family，属性值是系统的字体名称，如果名称中含有空格，需要用双引号括起来。为了防止用户缺少某种字体，font-family属性的值最好列出多个字体，用逗号分隔。在显示的时候，浏览器会从前向后依次匹配用户已安装的字体，并以该字体显示。例如 ：,font-family:”
12、Time New Romar” font-family:arial,”Time New Romar”,sans-serif,文本属性设置（3）,（4）其它文字样式设置,其它的文字样式的属性还包括：font-style、font-weight和font-variant。,font-style属性用来表示文字是否使用斜体，属性值可以是normal（不使用斜体）或italic（使用斜体）。,font-weight属性用来表示文字的粗细，属性的值可以是extra-light、lighter、light、normal、bold、bolder或extra-bold，上面的顺序由细到粗。font-weigh
13、t属性值还可以是具体的数值，数值越大文字越粗。,font-variant属性用来表示是否使用小型的大写字母来显示。属性值可以是normal或small-caps。,文本属性设置（4）,文本样式设置,文本样式指的是一段文字的样式，与之相关的书信包括：text-align、vertical-align、line-height、text-transform、text-decoration和text-indent。,（1）text-align属性用来设置文本的对齐方式，该属性的值可以为：left、right、center或justify。,（2）vertical-align属性用来设置文本 垂直对齐方
14、式，属性的值可以为：baseline、sub、super、top、text-top、middle、bottom或text-bottom。,（3）line-height属性用来设置文本的行间距，属性值是一个具体的数值。,文本属性设置（5）,文本样式设置,（4）text-transform属性用来设置是否将文本中的字母全部大写或全部小写或首字母大写。属性的值可以是uppercase、lowercase、capitalize或none。,（5）text-decoration属性用来设置是否给文本加划线，属性值可以取none、underline、overline、line-through或blink。
15、,（6）text-indent属性用来设置文本的首行缩进，属性值是具体的数字值，单位为px或pt。,文本属性设置（6）,一个实例，XML文件代码如下：,氢气燃烧产生水:2h2+o2=2h2o这一反应过程中有大量热放出，火焰呈淡蓝色。,文本属性设置（7）,CSS文件代码如下：,chemistry display:block; font-size:15pt; text-decoration:underline;text-transform:uppercase; bottom display:line; font-size:10pt; vertical-align:bottom; discretio
16、n display:block; font-size:12pt; text-align:center; background-color:yellow; font-style:italic; bold font-weight:bolder;,用IE浏览器打开XML文件，得到的结果如图所示：,返回,设置元素 （1）,一个网页元素包含4个部分：元素内容、边框（ border ）、内容与边框之间填充（padding）和边框与周围元素的边距（margin）。如图所示：,元素内容可以是一段文字、一张图片或其它的内容。,设置元素 （2）,设置边框（border）：,与边框有关的属性有：,（1）border
17、-style：用来设置元素的边框，并且四周的边框具有相同的样式和宽度。该属性可以取的值有：none（无）、dotted（点虚线）、dash（短线虚线）、solid（普通边框）、double（双实线）、groove（3D沟状边框）、ridge（3D脊状边框）、inset（3D内嵌边框）和outset（3D外嵌边框）。,（2）border-right、border-bottom和border-left：这3个属性可用来单独设置右边、底边和左边的边框样式，这3个属性的取值同border-style属性的取值。,设置元素 （3）,设置边框（border）：,（3） border-top-width、b
18、order-right-width、border-bottom-width和border-left-width这4个属性用来设置边框4边的宽度，属性值为具体的数值。,（4） border-color属性用来设置边框的颜色。这个属性的值可以设置成1个、2个或4个。如果该属性有一个值，表示边框的4个边都为这个颜色。如果有两个值，表示边框的上边和下边为第一个颜色，左边和右边为第二个颜色。如果有4个值，按顺序依次为上、右、底、左的颜色。,注意：只有设置了border-style属性后才能设置其它的属性。,设置元素 （4）,设置边框（border）：,例：,XML文件：边框1边框2边框3,CSS文件：
19、frame1display:block;border-style:double;border-color:blue;width:200;height:130; frame2display:block;border-style:dotted;border-color:red green;width:150;height:100; frame3display:block;border-style:ridge;border-top-width:10;width:100;height:70; ,显示效果如图所示：,设置元素 （5）,设置填充（padding）：,与填充有关的属性有：padding-to
20、p、padding-right、padding-bottom和padding-left。分别表示上、右、下、左的填充。如果4个填充的大小一样，则可以只写padding属性。该属性的值是具体的数值，单位是像素。,例如：,frame1display:line; border-style:inset; padding-left:15; frame2display:line; border-style:inset; padding-top:10; frame3display:line; border-style:inset; padding:10;,设置元素 （6）,设置填充（padding）：,下面
21、的XML文件使用前面的CSS样式，显示的效果如图所示：,padding-left:20padding-top:10padding:10 ,设置元素 （7）,设置边距（margin） ：,与边距有关的属性有：margin-top、margin-right、margin-bottom和margin-left。分别代表上、右、下、左的距离。如果4个边距的大小一样，则可以只写margin属性。该属性的值是具体的数值，单位是像素。,例如 ：,frame1 display:line; border-style:inset; width:100;height:50;margin-bottom:20; fra
22、me2 display:line; border-style:inset; width:100;height:50; margin-left:20; margin-top:20; frame3 display:block; border-style:inset; width:200;height:50;margin:20;,设置元素 （8）,设置边距（margin） ：,margin-bottom:20margin-left:20margin-top:20margin:20,利用前面的CSS样式显示下面的XML文件，效果如图所示：,返回,元素定位显示（1）,元素的定位是指指定元素的显示位置。C
23、SS中定位分为两种：绝对定位和相对定位。,元素定位通过position属性设置，该属性有两种取值：absolute或relative，分别代表绝对定位法和相对定位法。,绝对定位是以自身父元素的左上角为原点，通过偏移量来决定显 示的位置。,相对定位是指相对于自身的偏移量来决定显示的位置。,偏移量通过left属性和top属性来决定。left属性值代表元素距离坐标远点的向右水平距离，top属性的值代表元素距离坐标远点的向下垂直距离。,元素定位显示（2）,实例：,XML文件：root元素1元素2元素3,rootdisplay:block;background-color:yellow;width:30
24、0;height:200;position:absolute;top:25;left:50; ,frame1display: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; ,frame3display:block;background-color:red;width:100;heig
25、ht:50;position:relative;top:25;left:50; ,CSS样式：,元素定位显示（3）,显示效果：,在图中看到，元素1和元素3发生了重叠，要决定重叠元素前后需要借助于属性z-index。z-index值大的元素会覆盖z-index值小的元素。只有同级的元素才具有可比性，不同级的元素不具有可比性，子元素永远覆盖父元素。,返回,图片设置（）,XML文件没有能够很好地描述图片的方法，通过CSS技术就可以在XML中引入图片。具体的方法是在XML中设置一个空标记，在CSS中通过background属性来设置背景图片。background属性的使用格式如下：,backgroun
26、d:url(图片的URI),三国演义罗贯中41.50故事开始于刘备、关羽、张飞桃园三结义，结束于王浚平吴，描写了东汉末年和三国时代魏、蜀、吴三国之间的军事、政治斗争。文字浅显、人物形象刻画深刻、情节曲折、结构宏大。,例如，下面的XML文件：,图片设置（）,返回,CSS样式代码如下：,title display:block; author display:block; price display:block; discretiondisplay:block; picture display:block;width:70;height:100;background:url(sanguo.bmp);
27、 ,显示效果如图所示：,注意：因为picture标记是一个空的标记，显示时是一个大小为00的区域。所以，要给其设置一个大小，以使图片能够显示出来 。,环绕文本,环绕文本是指一个元素的文本环绕另一个元素的文本或图片。这样做的好处是可以使页面显得紧凑，变的美观。在CSS中通过float属性设置浮动来实现，属性值为left或right，代表向左或向右浮动。,在前例的CSS文件代码中的picture选择符的属性列表中加入下面一行语句：,picturedisplay:block;width:70;height:100;background:url(sanguo.bmp);float:left; ,显示效果如图所示：,返回,水浒传施耐庵52.30西游记吴承恩32.00三国演义罗贯中 41.50红楼梦曹雪芹43.90,
