一第4章 呈现XML文档

1、XMLXML程序设计（一）程序设计（一）教材：可扩展标记语言（教材：可扩展标记语言（XMLXML）出版：出版： NIITNIIT参考书：吴洁：参考书：吴洁：XMLXML应用教程应用教程( (第第2 2版）版） 清华大学出版社，清华大学出版社，20072007晏晏 立立1第第4章章 呈现呈现XML文档文档24.1 XML的显示3XML文件的显示XMLXML关心的是数据的结构关心的是数据的结构, ,并能很好地并能很好地, ,方便地描述数方便地描述数据据, ,但是不提供数据的显示功能。但是不提供数据的显示功能。如果想让浏览器显示如果想让浏览器显示xmlxml文件中标记内容文件中标记内容, ,那么必须

2、那么必须以某种方式告诉浏览器如何显示以某种方式告诉浏览器如何显示. .在在XMLXML中内容和表现形式是分开的，中内容和表现形式是分开的，XMLXML文档中没有文档中没有关于显示数据样式的信息。我们在编写关于显示数据样式的信息。我们在编写XMLXML文件时，文件时，仍然只需要关注文件中的数据和数据结构。仍然只需要关注文件中的数据和数据结构。W3CW3C提供了两个建议规范提供了两个建议规范: : CSSCSS( (层叠样式表层叠样式表) ) XSLXSL( (可扩展样式语言可扩展样式语言) )XMLXML文件的显示交给文件的显示交给CSSCSS和和XSLXSL来完成。来完成。4CSSCSS基本概

3、念基本概念CSSCSS即层叠样式表或级联样式表，是目前在浏即层叠样式表或级联样式表，是目前在浏览器上按一定格式显示览器上按一定格式显示XMLXML文档内容的主要方文档内容的主要方法之一。法之一。CSSCSS样式表中包含了一组设置元素显示样式的样式表中包含了一组设置元素显示样式的规则，最初被用来控制规则，最初被用来控制HTMLHTML文档内容的显示文档内容的显示格式，同样能够用来控制格式，同样能够用来控制XMLXML文档内容的显示文档内容的显示格式。格式。5CSSCSS语法语法XMLXML和和HTMLHTML所采用的所采用的CSSCSS语法是相通的，都是语法是相通的，都是通过一组特定的属性设置来

4、规定某个元素内通过一组特定的属性设置来规定某个元素内容的显示格式。容的显示格式。可设置的元素显示属性包括：文字的字型、可设置的元素显示属性包括：文字的字型、字体、大小和颜色，元素内容在页面中的位字体、大小和颜色，元素内容在页面中的位置、是否分段、对齐方式，是否添加边框、置、是否分段、对齐方式，是否添加边框、背景、下划线等等。背景、下划线等等。64.2 级联样式表CSS7CSS的发展史CSSCSS是是Cascading Style SheetCascading Style Sheet（级联样式表级联样式表，或称或称层叠样式表层叠样式表）的英文缩写。）的英文缩写。CSSCSS是是HMTLHMTL网

5、页标准语言制定者网页标准语言制定者W3CW3C万维网联万维网联盟制定并发布的一个盟制定并发布的一个网页排版样式标准网页排版样式标准，用，用来对来对HTMLHTML有限的表现功能进行补充。有限的表现功能进行补充。8CSS的发展史CSS1CSS1（CSS Level 1CSS Level 1）是）是 CSSCSS的第一层次标准，的第一层次标准，它正式发布于它正式发布于19961996年年1212月月1717日。后来日。后来19991999年年1 1月月1111日进行了修改。日进行了修改。CSS1CSS1标准标准提供简单的样式表机制提供简单的样式表机制，使的网页，使的网页的制作者通过附属的样式对的制

6、作者通过附属的样式对HTMLHTML文档的表现文档的表现进行描述。进行描述。9CSS的发展史CSS2CSS2（CSS Level 2CSS Level 2） 19981998年年5 5月月1212日被正日被正式作为标准发布，式作为标准发布，CSS2CSS2基于基于 CSS1CSS1，包含，包含CSS1CSS1的所有的特色和功能，并在多个领域进行完的所有的特色和功能，并在多个领域进行完善，把善，把表现样式文档和文档内容进行分离表现样式文档和文档内容进行分离。CSS2CSS2支持多媒体样式表，使得我们能够根据支持多媒体样式表，使得我们能够根据不同的输出设备来给文档制定不同的表现形不同的输出设备来给

7、文档制定不同的表现形式。式。10CSS技术优势技术优势1 1 数据重用：编写好的样式（数据重用：编写好的样式（CSSCSS）文档；可以）文档；可以用于多个用于多个XMLXML文档，从而数据就达到了文档，从而数据就达到了重用重用的的目的，节省了编写代码的时间，统一了多个目的，节省了编写代码的时间，统一了多个XMLXML文档的风格。文档的风格。2 2 轻松地增加网页的特殊效果：使用轻松地增加网页的特殊效果：使用CSSCSS标记，标记，可以非常简单地对图片、文本信息进行修饰，可以非常简单地对图片、文本信息进行修饰，设置相关属性。设置相关属性。3 3 使元素更加准确定位：使显示的信息按我们使元素更加准

8、确定位：使显示的信息按我们自己的意愿出现在指定的地方。自己的意愿出现在指定的地方。11使用使用CSS 为了让为了让XMLXML使用使用CSS,XMLCSS,XML文件必须使用操作指令文件必须使用操作指令将当前将当前XMLXML文件关联到某个层叠样式表。样式表的文件关联到某个层叠样式表。样式表的URIURI如果是一个文件的名字，该文件必须和如果是一个文件的名字，该文件必须和XMLXML文件在同一文件在同一目录中，如果是一个链接，该链接必须是有效的目录中，如果是一个链接，该链接必须是有效的可访可访问问的。的。12标记与样式表一个一个XMLXML文件在浏览器中所显示的效果文件在浏览器中所显示的效果对

9、对XML应用应用CSS规范后显示的效果规范后显示的效果13样式表在在CSSCSS中，最重要的概念是样式表。中，最重要的概念是样式表。样式表由一组样式规则组成，样式表由一组样式规则组成，通过这组样式规则来通过这组样式规则来告诉浏览器用什么样的样式来显示文本告诉浏览器用什么样的样式来显示文本。比如，告诉浏览器使用什么样的字体、颜色和页边比如，告诉浏览器使用什么样的字体、颜色和页边距来显示文本。距来显示文本。一个样式规则由三部分组成：一个样式规则由三部分组成： 选择符选择符(selector)(selector)(元素名称元素名称) )； 属性属性(properties)(properties)；

10、属性的取值属性的取值(value)(value)。14样式表其语法为：其语法为：selectorproperty:value;selectorproperty:value;( (选择符选择符 属性属性: :值值;);)选择符选择符可以有多种形式，可以是自定义的标记（元素名称）可以有多种形式，可以是自定义的标记（元素名称）。属性和值要用冒号隔开，每种属性之间用分号隔开属性和值要用冒号隔开，每种属性之间用分号隔开。在在XMLXML文档中通常是下面的形式：文档中通常是下面的形式：XMLXML自定义元素自定义元素 属性属性: :属性值属性值; ;。15例例有一个有一个XMLXML文档，该文档中有文档，

11、该文档中有这个自定义这个自定义标记，对这个标记修饰，其格式如下，标记，对这个标记修饰，其格式如下，studentdisplay:block;font-size:35pt;font-weight:bold; studentdisplay:block;font-size:35pt;font-weight:bold; ，这个样式表主要用来显示标记这个样式表主要用来显示标记“student”student”中所含有的中所含有的文本内容。文本内容。其中其中“display:block;display:block;”告知浏览器将标记告知浏览器将标记“ ”中的内容显示在一个块区域；中的内容显示在一个块区域；

12、“font-size:35pt;font-size:35pt;”设定该区域的文本字体的大小为设定该区域的文本字体的大小为3535磅；磅；“font-weight:bold;font-weight:bold;”的作用是让文本粗体显示。的作用是让文本粗体显示。16多个标记多个标记如果有多个标记的内容需要由完全一样的方如果有多个标记的内容需要由完全一样的方式来显示，式来显示，“选择符选择符”就是把这些标记的名就是把这些标记的名称用逗号分隔的字符串称用逗号分隔的字符串。例如：例如：name,sex,agename,sex,agedisplay:block;font-display:block;font

13、-size:35pt;font-weight:bold;size:35pt;font-weight:bold;17标记同名标记同名当当XMLXML文件中有许多标记文件中有许多标记具有相同的名字具有相同的名字, ,我我们要使用不同的外观来显示他们的内容时们要使用不同的外观来显示他们的内容时, , 在在CSSCSS文件中文件中, , “选择符选择符”使用使用“标记名标记名称称”+ +“#”+#”+“IDID属性值属性值”来指定规范某个标来指定规范某个标记。记。18例子1Cha4_1.xmlCha4_1.xml ?xmlstylesheet type=text/css href=“Show1.css

14、 ? 北京时间北京时间: : 12 12点点 56 56分分 格林威治时间格林威治时间: : 4 4点点 56 56分分 19Show1.cssShow1.csstimetime display:block;font-size:20pt;font-weight:bold; display:block;font-size:20pt;font-weight:bold; time#time#beijingbeijing display:block;font-size:20pt;font-weight:bold; display:block;font-size:20pt;font-weight:bol

15、d; color:rgb(255,0,0); color:rgb(255,0,0); hourhour display:line;font-size:16pt;color:rgb(0,255,0); display:line;font-size:16pt;color:rgb(0,255,0); minuteminute display:line;font-size:8pt;color:rgb(255,30,120); display:line;font-size:8pt;color:rgb(255,30,120); 2021一个一个CSSCSS就是由若干个样式表组成的文本文件就是由若干个样式表

16、组成的文本文件，该文本文件可以使用，该文本文件可以使用ANSIANSI和和UTF-8UTF-8来保存，来保存，选择符中不要含有选择符中不要含有非非ASCIIASCII字符字符。关联样式表关联样式表CSS CSS 的编码方式与的编码方式与XMLXML文件必须一文件必须一致。致。当浏览器打开当浏览器打开XMLXML文件时，所有的标记将根据文件时，所有的标记将根据样式表给出的显示规则、按照标记在样式表给出的显示规则、按照标记在XMLXML文件文件中出现的顺序显示自己标记中内容。中出现的顺序显示自己标记中内容。224.3 CSS设置文本的显示方式23设置文本的显示方式块方式块方式 通过将通过将属性属性

17、displaydisplay的值指定为的值指定为blockblock display:block;display:block; 使得使得文本文本在在浏览器浏览器的一个的一个块区域块区域中显示中显示例如例如time time display:block; display:block; 24块方式块方式注意：注意：1.1.块的大小依赖于显示在文本中字符的数量和字符的块的大小依赖于显示在文本中字符的数量和字符的大小大小, ,位置默认是靠左对齐位置默认是靠左对齐. .如果有若干个如果有若干个“选择符选择符”都指定自己代表的文本在块区域中显示都指定自己代表的文本在块区域中显示, ,那么这些那么这些块区域

18、将按照先后顺序靠左对齐块区域将按照先后顺序靠左对齐. .2.2.如果为父标记指定的显示方式为如果为父标记指定的显示方式为“block”;block”;那么那么, ,当当子标记指定的显示方式也是子标记指定的显示方式也是“block”block”时时, ,子标记的子标记的显示区域就是包含于父标记的显示块区域中的一个显示区域就是包含于父标记的显示块区域中的一个块区域块区域. .25位置和大小位置和大小如果想设置文本块在浏览器中显示的大小如果想设置文本块在浏览器中显示的大小, ,通过设置通过设置position,left,top,widthposition,left,top,width和和height

19、height属性的值来准确属性的值来准确地设置地设置块区域块区域的的位置位置和和大小大小。 name name display:display:blockblock; ; position:absolute;position:absolute;left:100;left:100;top:120;top:120;width:200;width:200;height:120;height:120; 26例子2 Cha4_2.xml 刘德华说：刘德华说：“我是第一块！靠左对齐！我是第一块！靠左对齐！” 郭德刚说：郭德刚说：“我是第二块！靠左对齐！我是第二块！靠左对齐！” 芙蓉姐姐说：芙蓉姐姐说：“我

20、是第三块！靠左对齐！我是第三块！靠左对齐！” 范伟说：范伟说：“我牛！我距左面我牛！我距左面180180像素，距离上面像素，距离上面1616像素！像素！” 27Show2.cssname#01 display:block; background-color:yellow; width=160; height=100; name#02 display:block; background-color:cyan; width=140; height=100; name#03 display:block; color:rgb(255,255,255); background-color:blue; w

21、idth=120; height=100; name#04 display:block; background-color:pink; position:absolute; top=16; left=180; width=140; height=200; 28注意相对位置注意相对位置 和绝对位置。和绝对位置。设置块方式显示的效果图29行方式行方式通过将通过将属性属性displaydisplay的值指定为的值指定为lineline display:line;display:line; 使得使得文本文本以以行的方式行的方式在在浏览器浏览器中显示中显示 time time display:line;

22、 display:line; 30行方式行方式注意：注意：1. 1. 如果有许多如果有许多“选择符选择符”都指定自己代表的都指定自己代表的文本按行的方式在浏览器中显示，那么文本按行的方式在浏览器中显示，那么各行各行按先后顺序首尾相接来显示按先后顺序首尾相接来显示。2. 2. 如果为父标记指定的显示方式是如果为父标记指定的显示方式是“block”,“block”,那么那么, ,当为子标记指定的方式是当为子标记指定的方式是“ “ line”line”时时, ,子标记是指在父标记的子标记是指在父标记的”block”block”区域中的区域中的”line”line”。31例子 Cha4-3.xml 这

23、里是现代电影院！这里是现代电影院！ 班级里的女同学先入座了班级里的女同学先入座了 男同学尾随着入座吧男同学尾随着入座吧 这是马路，不在电影院里哦！这是马路，不在电影院里哦！ 32Show3.csscinema display:block; font-size:18pt; color:black; position:absolute; left=100; top=10; width=250; height=100;girl,boy display:line; font-size:12pt; color:red;road display:line; font-size:22pt; color:bl

24、ue; position:absolute; left=30; top=100;33设置行方式显示的效果图34按列表方式按列表方式通过将通过将属性属性displaydisplay的值指定为的值指定为list-itemlist-item display:list-itemdisplay:list-item; ; 使得使得文本文本按按列表的方式列表的方式在在浏览器浏览器中显示。中显示。 time time display:list-item;display:list-item; 35list-item属性属性和和list-itemlist-item属性有关的属性是属性有关的属性是list-styl

25、e-list-style-typetype, ,例如例如:list-style-type:lower-roman; :list-style-type:lower-roman; 通过设置该属性可以通过设置该属性可以更改项目符号的外观更改项目符号的外观, ,项项目符号的默认外观是目符号的默认外观是discdisc( (实心圆实心圆) )。36list-style-type属性值和具体的含义Disc Disc 实心圆实心圆Circle Circle 圆圈圆圈Square Square 方块方块Decimal Decimal 十进制数十进制数lower-roman lower-roman 小写罗马数字

26、小写罗马数字upper-roman upper-roman 大写罗马数字大写罗马数字lower-alpha lower-alpha 小写英文字母小写英文字母upper-alpha upper-alpha 大写英文字母大写英文字母37列表方式各个属性值显示的效果图38注意：注意：1. 1. 如果若干个如果若干个“选择符选择符”都指定自己代表的文都指定自己代表的文本按列表本按列表( (list-style-type) )的方式在浏览器的方式在浏览器中显示，那么中显示，那么各个列表按先后顺序独行显示各个列表按先后顺序独行显示，如果，如果list-style-typelist-style-type属性

27、值设置为属性值设置为decimal, lower-roman,upper-roman, decimal, lower-roman,upper-roman, lower-alphalower-alpha和和upper-alphaupper-alpha, ,则这些列表的项则这些列表的项目符号会按先后顺序递增。目符号会按先后顺序递增。392. 2. 如果为父标记指定的显示方式是如果为父标记指定的显示方式是“block”block”，那么当为子标记指定的方式是，那么当为子标记指定的方式是“list-list-item”item”时，子标记的列表是指在父标记的块时，子标记的列表是指在父标记的块区域中的列

28、表。区域中的列表。3. 3. 如果为父标记指定的显示方式是如果为父标记指定的显示方式是“list-list-item”item”，那么当为子标记指定的方式是，那么当为子标记指定的方式是“list-item”list-item”时，子标记的列表是指在父标时，子标记的列表是指在父标记列表中的子标记。记列表中的子标记。40例子 Cha4_4.xml 液晶电视机液晶电视机 三种价格：三种价格： 2121寸寸15001500元元/ /台台 25 25寸寸25002500元元/ /台台 29 29寸寸35003500元元/ /台台 生产日期：生产日期：2007.82007.8 软件学院硬件部软件学院硬件部

29、 41Show4.csstv display:block; font-size:20pt; color:black;price display:list-item; font-size:18pt; list-style-type:decimal; margin-left:30; color:red;item1 display:list-item; font-size:18pt; list-style-type:square; margin-left:60; color:red; item2 display:list-item; font-size:18pt; list-style-type:s

30、quare; margin-left:60; color:red; item3 display:list-item; font-size:18pt; list-style-type:square; margin-left:60; color:red; date display:list-item; font-size:18pt; list-style-type:decimal; margin-left:30; color:blue; made display:list-item; font-size:18pt; list-style-type:decimal; margin-left:30;

31、color:rgb(150,10,80);42设置列表方式显示的效果图43不显示不显示通过将通过将属性属性displaydisplay的值指定为的值指定为nonenone display:nonedisplay:none; ;在在浏览器浏览器中中不显示该文本不显示该文本。 time time display:none;display:none; 44字体与字体有关的属性及取值情况与字体有关的属性及取值情况: :1. font-family1. font-family font-family:Arial; font-family:Arial; font-family: font-family:“

32、Time New Roman”;Time New Roman”;2. font-style2. font-style：normalnormal或或italicitalic。 font-style:italic; font-style:italic;45字体字体3. font-variant3. font-variant：normalnormal和和small-capssmall-caps。例：例：font-variant:small-caps;font-variant:small-caps;（小型大写字母小型大写字母）4. font-weight4. font-weight：normalnor

33、mal、boldbold、bolderbolder、 lighter lighter、100100、200 200 、300300、400 400 。例：例： font-weight:bold;font-weight:bold;5. font-size5. font-size：单位是：单位是ptpt（磅）。（磅）。例：例： font-size:12pt; font-size:12pt; 46字体各个属性值显示的效果图47文本样式文本样式与文本样式有关的属性及取值情况与文本样式有关的属性及取值情况: :1. text-align1. text-align：leftleft 、rightright

34、、centercenter和和justifyjustify。例如例如: text-align: left;: text-align: left;2. text-indent2. text-indent：单位是：单位是像素像素pxpx或或磅磅ptpt。例如例如: text-indent: 16pt;: text-indent: 16pt;48文本样式文本样式3. text-transformt3. text-transformt：uppercaseuppercase、 lowercase lowercase、capitalizecapitalize和和none none 。例如例如 text-t

35、ransformt: uppercase;text-transformt: uppercase;4. text-decoration4. text-decoration：nonenone、underlineunderline、overlineoverline、line-throughline-through和和blink blink 。例如例如 text-decoration: underline;text-decoration: underline;49文本样式文本样式5. vertical-align5. vertical-align：baselinebaseline、toptop等等例如

36、例如 vertical-align: baseline;vertical-align: baseline;6. line-height6. line-height例如例如 line-height:2;line-height:2;注意注意: :如果子标记的样式表中不指定文本的样如果子标记的样式表中不指定文本的样式属性式属性, ,子标记就会使用父标记样式表中的有子标记就会使用父标记样式表中的有关文本样式的属性关文本样式的属性. .50文本样式文本样式vertical-alignvertical-align的取值的取值baselinebaseline: :与参照物的基准线对齐；与参照物的基准线对齐；

37、subsub：以下标形式显示；以下标形式显示；supersuper：以上标形式显示；以上标形式显示；toptop：与参照物的最高部对齐；与参照物的最高部对齐；text-toptext-top：与参照物文字顶部对齐；与参照物文字顶部对齐；middlemiddle：与参照物对象中间对齐；与参照物对象中间对齐；bottombottom：与参照物对象底部对齐；与参照物对象底部对齐；text-bottomtext-bottom：与参照物文字底部对齐。与参照物文字底部对齐。51文本样式各个属性值显示的效果图52例子 Cha4_5.xmI 请看一个数学公式：请看一个数学公式： (A+B)2=(A+B)2=

38、A2+2AB+B2 A2+2AB+B2 请看二个化学分子式：请看二个化学分子式： H2O,H2O, CO2. CO2. 53Show5.cssmath display:block; font-size:16pt; font-style:italic; color:black;chemistry display:block; font-size:16pt; color:green;sup display:line; font-size:10pt; font-weight:bold; font-style:italic; color:red; vertical-align:super;low di

39、splay:line; font-size:10pt; font-weight:bold; color:blue; vertical-align:bottom; 54设置文本样式显示的效果图55边框边框边框属性：边框属性： border-styleborder-style border-top-width border-top-width border-right-width border-right-width border-bottom-width border-bottom-width border-left-width border-left-width border-right bo

40、rder-right border- bottom border- bottom border-left border-left border-color border-color56边框边框注意：注意：1. 1. 必须首先设置必须首先设置border-styleborder-style属性，使得文本属性，使得文本具有边框，然后再设置其他属性。具有边框，然后再设置其他属性。2.2. border-styleborder-style的属性值用来设置的属性值用来设置文本具有边文本具有边框，并且边框四条边的宽度、样式和颜色都框，并且边框四条边的宽度、样式和颜色都相同相同，该属性可以取值为，该属性可以

41、取值为nonenone、dotteddotted、dasheddashed、solidsolid、doubledouble、groovegroove、ridgeridge、insetinset、outsetoutset。57边框各个属性值显示的效果图58显示图像 1. 1. 可以通过可以通过background-imagebackground-image属性的值为文本指定一幅背景图属性的值为文本指定一幅背景图像。像。 例如：例如：background-imagebackground-image：URLURL（文件名字）（文件名字）2. 2. 可以通过设置可以通过设置background-rep

42、eatbackground-repeat属性设置图像是否通过重属性设置图像是否通过重复出现来平铺，复出现来平铺，例如：例如：background-repeatbackground-repeat：repeatrepeat、repeat-xrepeat-x、repeat-yrepeat-y、no-repeatno-repeat3. 3. 为了单独显示一幅图像，只要形式上为一个空标记指定一幅为了单独显示一幅图像，只要形式上为一个空标记指定一幅背景图像即可，由于空标记没有文本内容，其背景的大小为背景图像即可，由于空标记没有文本内容，其背景的大小为0 0* *0 0，所以，所以必须用必须用blockbl

43、ock来组织文本，并使用来组织文本，并使用widthwidth和和heightheight属性指定块区域的大小属性指定块区域的大小。59例子 Cha4_8.xmI 俺是著名的演员潘江江，很多人使用俺的形象俺是著名的演员潘江江，很多人使用俺的形象 /60Show8.csstom display:block; position:absolute; top:10; left:10; width:180px; height:300px; text-align:center; font-size:18pt; font-weight:bold; color:blue; border-style:doubl

44、e; background-image:URL(1.jpg); background-repeat:no-repeat;image display:block; position:absolute; top:10; left:200; width:300px; height:300px; border-style:groove; background-image:URL(2.gif); background-repeat:repeat; zi display:block; position:absolute; top:200; left:0; width:180px; height:200px

45、; text-align:center; font-size:18pt; font-weight:bold; color:blue;61设置图象显示的效果图62活动：创建CSS问题描述：问题描述：Jim是是CyberShoppe的的XML 开发人员，已经要求在浏览开发人员，已经要求在浏览器中按以下格式显示器中按以下格式显示CyberShoppe 的详细信息：的详细信息：手头每个产品的单价、说明和数量应如实显示，字体大手头每个产品的单价、说明和数量应如实显示，字体大小为小为10磅。磅。 产品名称应以红色显示，字体大小为产品名称应以红色显示，字体大小为20磅。应显示为磅。应显示为粗体。粗体。 所有

46、详细信息应以所有详细信息应以Arial字体显示。字体显示。见教材相关部分（第四章见教材相关部分（第四章 P.4.14 ）独立完成各项任务独立完成各项任务634.4 XSL样式控制语言64XSL样式控制语言通过样式表通过样式表CSSCSS可以显示可以显示XMLXML文档的样式，使文档的样式，使XMLXML文档在字体控制，文本控制，背景控制等文档在字体控制，文本控制，背景控制等方面，增色不少。方面，增色不少。除了除了CSSCSS之外，还有一种样式控制语言，同样之外，还有一种样式控制语言，同样可以完成对可以完成对XMLXML文档的样式的控制，这就是文档的样式的控制，这就是XSLXSL (eXtens

47、ible Stylesheet Language (eXtensible Stylesheet Language可扩可扩展样式语言展样式语言 ) ) 。65XSL与CSS的不同1 1 语法不同语法不同 CSSCSS的语法自成体系，且比较简单，易学易用。的语法自成体系，且比较简单，易学易用。XSLXSL是根据是根据XMLXML的语法进行定义的，实际上又是的语法进行定义的，实际上又是XMLXML的的一种应用，一种应用，XSLXSL本身就是一个本身就是一个XMLXML文档文档 。 2 2 表现能力不同表现能力不同XSLXSL提供了比提供了比CSSCSS更强大的数据显示能力更强大的数据显示能力3 CS

48、S3 CSS的致命伤的致命伤被关联的被关联的XMLXML的标记必须是的标记必须是ASCIIASCII码。码。66XSLCSS 不支持根据条件对元素的重新排序、分类和显示。不支持根据条件对元素的重新排序、分类和显示。对于这种高级格式化，对于这种高级格式化， XML 支持名为可扩展样式表语言支持名为可扩展样式表语言 (XSL)。XSL XSL 包括三部分：包括三部分：XSLTXSLT( (XSL 转换转换 ) )一种用于转换一种用于转换 XML XML 文档的语言。文档的语言。XpathXpath (XML路径路径)一种用于在一种用于在 XML XML 文档中导航的语言。文档中导航的语言。XSL-

49、FOXSL-FO (格式化对象格式化对象)一种用于格式化一种用于格式化 XML XML 文档的语言。文档的语言。6768XSL的三部分变换设定格式XSLTXSLTXSLT（XSL TransformationsXSL Transformations）包含了如何将）包含了如何将XMLXML文档转换成文档转换成HTML HTML 或或 XHTML XHTML 文档的指令。文档的指令。XSLTXSLT使用使用XPathXPath表达式从表达式从XMLXML文档中提取特定文档中提取特定的数据（的数据（在在XMLXML文档中进行导航文档中进行导航）。）。XSLT XSLT 处理器将处理器将XMLXML文

50、档转换成文档转换成HTMLHTML或或XHTML XHTML 文档，或将文档，或将XMLXML文档转换成另一个文档转换成另一个XMLXML文档。文档。XSLT XSLT 是是XSLXSL中最重要的部分。中最重要的部分。XPath XPath 是一个是一个 W3C W3C 标准。标准。69转换信息转换信息XSLT处理程序将转换信息应用到源文档中并处理程序将转换信息应用到源文档中并构建下图所示的结果树。构建下图所示的结果树。MSXML解析器解析器XSLT 树树XSLT 处理程序处理程序源树源树结果树结果树XSLT 样式表样式表XML 文档文档70XSL变换的基本步骤变换的基本步骤1 1、为需要显示

51、数据的为需要显示数据的XMLXML文件编写一个称作文件编写一个称作XSLXSL样式表的文件。样式表的文件。2 2、将、将XMLXML文件与此文件与此XSLXSL文件相关联。文件相关联。3 3、用应用程序将、用应用程序将XSLXSL样式表文件转换成一个样式表文件转换成一个HTMLHTML文件。文件。*.xml*.xsl关联关联*.html变换变换(浏浏览器负责览器负责) 规则规则 语句语句 程序程序71使用XSLXSLXSL样式表文件也必须有样式表文件也必须有XMLXML声明，且与其关联的声明，且与其关联的XMLXML文件有着同样的编码，文件有着同样的编码，例如：例如：encoding=UTF-

52、8?为了让为了让XMLXML使用使用XSL,XMLXSL,XML文件必须使用操作指令文件必须使用操作指令 URI如果是一个文件名如果是一个文件名,该文件必须和该文件必须和XML文件是在同一目录中文件是在同一目录中,例如例如:URI如果是一个链接如果是一个链接,该链接必须是有效的可访问的该链接必须是有效的可访问的,例如例如:72例：cha5_1.xml 张小三张小三 / 1985 1985年年6 6月月2828日日 / / 73cha5_1.xsl xsl:value-of select= / / 74cha5_1.html 张小三张小三 1985 1985年年6 6月月2828日日 75XSL

53、TXSLTXSLT 提供了以下元素来选择和格式化数据：提供了以下元素来选择和格式化数据：stylesheetvalue-offor-eachsorttext76XSLTstylesheet 指导样式表文件的浏览器。指导样式表文件的浏览器。 是所有是所有XSLT 样式表的根元素。样式表的根元素。 写为：写为：77XSLTvalue-of 选择（显示）指定元素或属性的值。选择（显示）指定元素或属性的值。 语法如下：语法如下： Select属性使用属性使用Xpath表达式，根据上下文节点表达式，根据上下文节点来选择节点。来选择节点。 -of 元素用于元素用于提取某个选定节点的值提取某个选定节点的值，

54、并把值添加到转换的输出流中：并把值添加到转换的输出流中：78例：example_1.xml !- 星海电视机星海电视机 / 6578 6578元元/ /台台 / / / 79例： oneXSL.xsl xsl:value-of select= / xsl:value-of select= / 80selectselect 属性属性的值是一个的值是一个 XPath XPath 表达式。表表达式。表达式的工作方式类似于定位某个文件系统，达式的工作方式类似于定位某个文件系统，在其中正斜杠可选择子目录。在其中正斜杠可选择子目录。81XSLTfor-each 指导指导XSLT 处理程序处理指定模式的每个

55、实处理程序处理指定模式的每个实例的信息。例的信息。 用于选取指定的节点集中的每个用于选取指定的节点集中的每个 XML 元素。元素。 语法如下：语法如下： action to be performed 82例：example_2.xml 张三林张三林 / 3678 3678元元/ /月月 / / 李大海李大海 / 5677 5677元元/ /月月 / / 金顺利金顺利 / 5876 5876元元/ /月月 / / / 83例：例： twoXSL.xsl twoXSL.xsl xsl:stylesheet xmlns:xsl=/TR/WD-xsl 姓名姓名 薪水薪水

56、 xsl: ” xsl:apply-templates select=./ / /xsl: 84xsl:template match=“./” td xsl:template match=“./ ” td 例：显示效果例：显示效果在在HTMLHTML中，表格由中，表格由 标签来定义。标签来定义。每个表格均有若干行（由每个表格均有若干行（由 标签定义），标签定义），每行被分割为若干单元格（由每行被分割为若干单元格（由 标签定义标签定义）。字母）。字母 td td 指表格数据，即数据单元格的内指表格数据，即数据单元格的内容。数据单元格可以包含文本容。数据单元格可以包含文本85表头单元格表头单元格

57、- 包含表头信息包含表头信息（由（由 th 元素创建）元素创建）标准单元格标准单元格 - 包含数据（由包含数据（由 td 元素创建）元素创建）XSLTsort 根据赋予元素和属性的值分类数据。根据赋予元素和属性的值分类数据。 语法如下：语法如下：86例：例： xsl:sort select=“price” data-type=“number”order=“ascending”/ 87XSLTtext 在输出中生成文本。在输出中生成文本。 语法如下：语法如下： Text to be displayed as label 88XSL 格式化对象格式化对象XSL 格式化对象（格式化对象（XSL-FO

58、）：）：XSL-FO 基于基于XML的语言，允许将的语言，允许将XML 文档格式化为页面文档格式化为页面、段落和列表。、段落和列表。XSL-FO 提供了定义提供了定义XML 对象格式的各种对象和属性。对象格式的各种对象和属性。XSL-FO 提供了包含格式化对象和属性的基本文档结构。提供了包含格式化对象和属性的基本文档结构。XSL-FO XSL-FO 用于描述向屏幕、纸或者其他媒介输出用于描述向屏幕、纸或者其他媒介输出 XML XML 数据数据的格式化（信息）。的格式化（信息）。XSL-FO XSL-FO 文档存储在以文档存储在以 .fo .fo 或或 .fob .fob 为后缀的文件中。以为后

59、缀的文件中。以 .xml .xml 为后缀存储的为后缀存储的 XSL-FO XSL-FO 文档也很常见，这样做的话可文档也很常见，这样做的话可以使以使 XSL-FO XSL-FO 文档更易被文档更易被 XML XML 编辑器存取。编辑器存取。89XSL-FO 文档的基本结构文档的基本结构以下代码段阐述了以下代码段阐述了XSL-FO 文档的基本结构：文档的基本结构： 90XSL-FO 文档的结构解释文档的结构解释XSL-FO XSL-FO 文档属于文档属于 XML XML 文档，也需要以文档，也需要以 XML XML 声明来起始：声明来起始： 元素是元素是 XSL-FO XSL-FO 文档的根元

60、素。这个根元素也要文档的根元素。这个根元素也要声明声明 XSL-FO XSL-FO 的命名空间：的命名空间：fo:root xmlns:fo=/1999/XSL/Format 91XSL-FO 文档的结构解释文档的结构解释!- - 元素含有一个或多个页面模板：元素含有一个或多个页面模板： !- - 元素包含一个单一的页面模板。元素包含一个单一的页面模板。每个模板须有一个唯一的名称每个模板须有一个唯一的名称(master-name)(master-name)： !- - 92XSL-FO 文档的结构解释文档的结构解释一个或多个一个或多个 元素可描述页面元素可描述页