《[其它]XSL介绍.ppt》由会员分享，可在线阅读，更多相关《[其它]XSL介绍.ppt（35页珍藏版）》请在三一文库上搜索。
1、第六章,XSL,课程目标,CSS样式表介绍 XSL介绍 XSL语言的语法 如何将XML和XSL配合使用,体验项目,在第二章中编写过关于学生信息的XML文档，在本章体验项目中将使用XSL语言来处理该文档，在XSL文件中有三个模板：,运行效果图,第三个模板是根模板，用于包含前面的两个子模板。,第一个模板用于按年龄区分来显示信息，年龄不大于23的人的信息显示红色，并且使用表格的形式显示出来的。,第二个模板用于显示姓名为“张三”的学生信息。,XSL文件编写完成后，在文档中引用该XSL文件，使用Web浏览器打开该文档，如下图所示：,样式表概述,CSS样式表,CSS是Cascading Style She
2、ets的缩写，中文翻译为“层叠样式表”，简称样式表，用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。它是当前一种制作网页的技术。 在1998年，W3C公布了一个修订的、详细的CSS规范，称之为CSS2。同时，他们又把原来的CSS改名为CSS1。CSS2几乎是CSS1的超集，只有一小部分不同。现在已经成为网页设计必不可少的工具之一，大多数的浏览器都支持该样式表。,一个简单的CSS语句,a color: #FFFFFF; font-style: italic,其中“a”在该语句中称为选择对象，也称为选择器，它指明我们要给“a”来定义样式。在编辑CSS样式时样式声明写在一对大
3、括号“”中； “color”和“font-style”称为“属性”，在同一个选择器可以有多个属性，但不同属性之间要用分号“;”分隔； 属性后面的“#FF0000”和“italic”是属性的值(value)。属性与属性值之间用冒号分开。某个属性的值可能有多个，但他们之间要用逗号分隔。,CSS样式表的引用,对样式表的引用主要有如下三种方式：,内嵌样式表（Inline Styles),链入外部样式表文件（Linking to a Style Sheet）,定义内部样式表（Embedding a Style Block）,链入外部样式表文件,所谓链入外部样式表文件，即在某个文档中直接引用已经写好的样式
4、表文件（后缀为.css的文件）。如下：, 测试链入外部样式表文件 ,已经写好了一个样式表文件，文件名为testcss.css，然后可以在同一目录下的HTML文件中应用该样式表文件,link是HTML中的标记，rel=“stylesheet“是指在页面中使用外部样式表文件；href=“mystyle.css“是文件所在的位置，或者是一个URL；type=“text/css“是指文件的类型是样式表文本。,定义内部样式表,内部样式表是把样式表放到页面的“head”标记中，这些定义的样式就应用到该页面中了，这种样式表是在“style”标记中插入的。如下：, body background-color:
5、 blue; ,注意：在内部样式表的编辑中，我们经常会看到“”的标记，那是因为有些低版本的浏览器不能识别“style”标记，这些低版本的浏览器会忽略“style”标记里的内容，并把“style”标记中的内容以文本方式直接显示到页面上。为了避免这样的情况发生，就使用了添加HTML注释的方式，即使用“”标记将内容隐藏起来。,导入外部样式表,导入外部样式表是指在内部样式表的 “style”标记中导入一个外部样式表，导入时用import，如下：, import “testcss.css“ body background-color: blue; ,已经写好的一个样式表文件，文件名为testcss.cs
6、s,导入外部样式表与链入外部样式表文件类似，但导入的外部样式表实质上相当于是存在某个内部样式表中的。,注意：导入外部样式表的语句必须放在该样式表的开始部分，在其他内部样式表上面。,内嵌样式表,内嵌样式表是混合在HTML标记中使用的，使用这种方法，可以很简单的对某个元素（标记）单独定义样式。内嵌样式的使用是直接把在HTML标记中加入“style”参数。而style参数的内容就是css的属性和值，如下：,对p标记添加样式,在style参数后面引号里的内容就相当于样式表文件中大括号里的内容。,使用CSS样式表格式化XML文档,在XML文档通过处理指令使用样式表,使用HTML命名域将CSS样式嵌入到X
7、ML文档中,在XML文档中使用CSS样式表，主要有以下两个方法：,在创建的XML文档中添加基本的样式表指令，其形式如下所示：,每个样式表指令必须含有一个“type”属性。这个属性的值描述了样式表应用的具体类型：“text/css”表示使用一个CSS样式表，“text/xsl”表示使用了一个XSl样式表。 处理指令中的“href”属性值是一个URL或相对路径，指明样式表的位置。,CSS样式表格式化XML文档示例, zhangsan 25 15896316252 Jufru 26 J 13465482123 ,XML文档如下：,class,student font-size:15pt; font
8、-weight:bold; color:blue; name font-weight:bold; font-size:14pt; display:block; color:red; age,email,phone font-weight:bold; font-size:12pt; display:block; color:block; margin-left:20pt; ,CSS样式表文件（ mycss.css ）的代码如下：,姓名以红色字体显示，年龄、电子邮箱和电话以蓝色显示，并且与姓名要有层次关系,在编写的XML文档中使用处理指令引用该样式表，即在该文档中添加如下代码： ,运行效果图,使用
9、HTML命名域将CSS样式嵌入到XML文档中,在“HTML:STYLE”元素内编写CSS样式表 。如下：, class,student font-size:15pt; font-weight:bold; color:blue; name font-weight:bold; font-size:14pt; display:block; color:red; zhangsan ,xmlns:html=“http:/www.w3.org/Profiles/XHTML-transitional”必须使用,XSL介绍,XSL(eXtensible Stylesheet Language，可扩展样式语言)
10、是为XML文件定义的一种标识语言。它将提供远远超过CSS的强大功能，如将元素再排序等。其包括XSLT、XPath和XML格式对象（XSL-FO）三部分。,使用XSL定义XML文档显示方式的基本思想是：通过定义转换模板，将XML源文档转换为带样式信息的可浏览文档。,注意：XSL是一种语言，而XSLT是一种技术。扩展样式表语言转换（XSLT）是由早期的XSL标准进化而来的，现在一般所说的XSL大都指的是XSLT。,XSL和CSS的关系,XSL和CSS的联系与区别,XSL是应用于整个XML文档，而CSS只是对HTML标签的显示模式进行了指定，它的任务是对HTML元素指定一组显示属性。,CSS决定了页
11、面的视觉外观，但是不会改变源文档的结构。XSL是用来处理文档的标记语言，也称为基于模板的语言，它允许将某种模式映射到源文档中。,在XSL中也可以使用CSS来对由XML转化而成的HTML文档进行装饰。,XSL的语法,XSL作为一种样式语言，大致可分为三种模式,选择模式,测试模式,匹配模式,在使用这些模式语句时都必须要将这些模式语句包含在“xsl:stylesheet”标记中，XSL的一般结构如下：,选择模式,使用选择模式语句将数据从XML中提取出来，是一种简单获得数据的方法。选择模式语句主要包括有以下几种：,xsl:value-of,xsl:for-each,xsl:apply-template
12、s,xsl:value-of 是选择select属性指定的节点的值，如下：,student元素下的email元素的值,xsl:for-each语句是XSL提供的具有程序语言性质的语句。该语句常用的有“select”，“order-by”属性，“order-by”属性主要用于对循环的结果动态排序。,xsl:for-each语句的一般格式如下：,XSL模板将XSL的设计细化成一个个模板（块），最后再将这些模板（块）组合成一个完整的XSL，“xsl:apply-templates”就是起到组合模板的功能。 一般格式如下：,测试模式,测试模式语句主要用于选择处文档中满足某条件的部分数据，测试模式语句主
13、要有以下几种：,xsl:if,xsl:choose、xsl:when、xsl:otherwise,xsl:if语句用于对单条件判断，一般格式如下：,test属性是必须的,xsl:choose、xsl:when和xsl:otherwise 语句主要用于对同一数据同时测试多个条件，根据不同条件输出相应结果。,三者连用的一般格式如下：, 内容1 内容2 内容3 ,xsl:when 和xsl:if一样也有language和expr属性，这两个属性都是可选的。, 优秀 及格 不及格 ,对分数进行判断，如果大于75，表明该学生优秀；如果大于60但小于75，表明该学生及格了；否则，表明该学生没有及格。,匹配
14、模式,匹配模式语句主要是指xsl:template语句，在上面的小节中我们讲解了使用XSL模板的好处。那怎样来建立XSL模板呢，xsl:template语句的一般格式如下：,“match”属性指示该模板所匹配的节点， “mode”是该模板的一个别名，与某个“xsl:apply-templates”语句中的“mode”属性的值一致。 language属性确定在此模板中执行什么脚本语言，其取值与HTML中的script标记的language属性的取值相同,多个模板的示例, 个人档案 个人档案 姓名 性别 年龄 ,建立姓名、性别和年龄三个模板,建立档案模板，以姓名、性别和年龄作为子模板。,模板中使用
15、档案模板,创建元素和属性,XSLT是一个动态的样式单，在处理过程中可产生新的元素或元素属性，主要有以下几种方法：,使用xsl:element创建元素,使用xsl: attribute创建属性,使用xsl:text创建文本,使用xsl:comment创建注释,使用xsl:processing-instruction创建处理指令,如在XML文档中有如下的处理指令： 那么用xsl:processing-instruction可表示为： href=“mycss.css“ type=“text/css“ , zhangsan , AS002 zhangsan ,XML和XSL配合使用,XML和XSL应用
16、脚本语言制作特效菜单, 下拉菜单1 菜单项A01 http:/ 菜单项A02 http:/ 菜单项A03 http:/ 菜单项A04 http:/ 菜单项A05 http:/ 下拉菜单2 菜单项B01 http:/ 菜单项B02 http:/ 菜单项B03 http:/ 菜单项B04 http:/ 菜单项B05 http:/ ,display表示是否显示，true为显示，false为不显示,text元素是菜单项显示的文本,src元素是该菜单所指向的链接,var oPopup=window.createPopup(); var oPopBody = oPopup.document.body;
17、oPopBody.style.backgroundColor = “#FFFFFF“; oPopBody.style.border = “solid black 1px“; var showLeft=0; var showTop=0; var showWidth=0; var showHeight=0; var targetWin=parent.ifmContent; function TdMouseOver(Obj) Obj.style.fontSize =13; if(Obj.children0) oPopup.document.body.innerHTML=Obj.children0.i
18、nnerHTML; showLeft=0; showTop=0; showWidth=0; showHeight=0; ShowPosition(Obj); oPopup.show(showLeft,showTop,showWidth, showHeight,document.body); ,创建javascript文件，用来处理菜单事件 ，如下：,鼠标移向菜单 时触发,function TdMouseOut(Obj) Obj.style.fontSize =11; String.prototype.lenB = function() return this.replace(/x00-xff/
19、g,“*“).length; function ShowPosition(ObjTd) var obj=ObjTd; while(obj.offsetParent) showLeft+=obj.offsetLeft; showTop+=obj.offsetTop; obj=obj.offsetParent; showLeft-=1; showTop+=ObjTd.clientHeight; obj=ObjTd.children0.children0; showHeight=(obj.rows.length)*15; for(var i=0;ishowWidth) showWidth=len;
20、showWidth=showWidth*7; ,鼠标移出菜单时触发,显示子菜单,function doOver(Obj) Obj.style.backgroundColor=“#0033ff“; Obj.style.color=“#FFFFFF“; function doOut(Obj) Obj.style.backgroundColor=“#FFFFFF“; Obj.style.color=“#000000“; function doClick(Obj) oPopup.hide(); targetWin.location=Obj.href; ,鼠标移向子菜单时触发,鼠标移出子菜单时触发,鼠标
21、点击子菜单时触发,创建XSL文件，在该XSL文件建立菜单模板和子菜单模板，并导入前面编写过的外部javascript文件。如下：, tdfont-size:11px; ,在XSl文件中导入一个外部的javascript文件, aaaa ,自定义菜单栏模板,自定义菜单模板,将这三个文件放在同一目录下，使用Web浏览器打开XML文件，将鼠标移向菜单“下拉菜单1”和子菜单“菜单项A02”，如下：,自定义子菜单模板,编写的XML文档,打开测试页面（index.html），将鼠标移向“下拉菜单1”，并点击子菜单“菜单项A02”，如下：,测试页面index.html,实践项目,程序的实现要求如下： （1）创建XSL文件stu.xsl，创建三个模板，第一个模板用于按年龄区分来显示信息，年龄不大于23的人的信息显示红色，并且是使用表格的形式显示出来的。第二个模板用于显示名叫“张三”的人的信息。第三个模板是根模板，用于包含前面的两个子模板 （2）在XML文档中添加基本的样式表指令。使用该XSL文件。,本章总结,CSS样式表介绍 XSL介绍 XSL语言的语法 如何将XML和XSL配合使用,