[其它]XSL介绍.ppt

第六章,XSL,课程目标,CSS样式表介绍 XSL介绍 XSL语言的语法 如何将XML和XSL配合使用,体验项目,在第二章中编写过关于学生信息的XML文档，在本章体验项目中将使用XSL语言来处理该文档，在XSL文件中有三个模板：,运行效果图,第三个模板是根模板，用于包含前面的两个子模板。,第一个模板用于按年龄区分来显示信息，年龄不大于23的人的信息显示红色，并且使用表格的形式显示出来的。,第二个模板用于显示姓名为“张三”的学生信息。,XSL文件编写完成后，在文档中引用该XSL文件，使用Web浏览器打开该文档，如下图所示：,样式表概述,CSS样式表,CSS是Cascading Style Sheets的缩写，中文翻译为“层叠样式表”，简称样式表，用于(增强)控制网页样式并允许将样式信息与网页内容分离的一种标记性语言。它是当前一种制作网页的技术。在1998年，W3C公布了一个修订的、详细的CSS规范，称之为CSS2。同时，他们又把原来的CSS改名为CSS1。CSS2几乎是CSS1的超集，只有一小部分不同。现在已经成为网页设计必不可少的工具之一，大多数的浏览器都支持该样式表。,一个简单的CSS语句,a color:#FFFFFF;font-style:italic,其中“a”在该语句中称为选择对象，也称为选择器，它指明我们要给“a”来定义样式。在编辑CSS样式时样式声明写在一对大括号“”中；“color”和“font-style”称为“属性”，在同一个选择器可以有多个属性，但不同属性之间要用分号“;”分隔；属性后面的“#FF0000”和“italic”是属性的值(value)。属性与属性值之间用冒号分开。某个属性的值可能有多个，但他们之间要用逗号分隔。,CSS样式表的引用,对样式表的引用主要有如下三种方式：,内嵌样式表（Inline Styles),链入外部样式表文件（Linking to a Style Sheet）,定义内部样式表（Embedding a Style Block）,链入外部样式表文件,所谓链入外部样式表文件，即在某个文档中直接引用已经写好的样式表文件（后缀为.css的文件）。如下：,测试链入外部样式表文件,已经写好了一个样式表文件，文件名为testcss.css，然后可以在同一目录下的HTML文件中应用该样式表文件,link是HTML中的标记，rel=stylesheet是指在页面中使用外部样式表文件；href=mystyle.css是文件所在的位置，或者是一个URL；type=text/css是指文件的类型是样式表文本。,定义内部样式表,内部样式表是把样式表放到页面的“head”标记中，这些定义的样式就应用到该页面中了，这种样式表是在“style”标记中插入的。如下：,body background-color:blue;,注意：在内部样式表的编辑中，我们经常会看到“”的标记，那是因为有些低版本的浏览器不能识别“style”标记，这些低版本的浏览器会忽略“style”标记里的内容，并把“style”标记中的内容以文本方式直接显示到页面上。为了避免这样的情况发生，就使用了添加HTML注释的方式，即使用“”标记将内容隐藏起来。,导入外部样式表,导入外部样式表是指在内部样式表的“style”标记中导入一个外部样式表，导入时用import，如下：,import testcss.cssbody background-color:blue;,已经写好的一个样式表文件，文件名为testcss.css,导入外部样式表与链入外部样式表文件类似，但导入的外部样式表实质上相当于是存在某个内部样式表中的。,注意：导入外部样式表的语句必须放在该样式表的开始部分，在其他内部样式表上面。,内嵌样式表,内嵌样式表是混合在HTML标记中使用的，使用这种方法，可以很简单的对某个元素（标记）单独定义样式。内嵌样式的使用是直接把在HTML标记中加入“style”参数。而style参数的内容就是css的属性和值，如下：,对p标记添加样式,在style参数后面引号里的内容就相当于样式表文件中大括号里的内容。,使用CSS样式表格式化XML文档,在XML文档通过处理指令使用样式表,使用HTML命名域将CSS样式嵌入到XML文档中,在XML文档中使用CSS样式表，主要有以下两个方法：,在创建的XML文档中添加基本的样式表指令，其形式如下所示：,每个样式表指令必须含有一个“type”属性。这个属性的值描述了样式表应用的具体类型：“text/css”表示使用一个CSS样式表，“text/xsl”表示使用了一个XSl样式表。处理指令中的“href”属性值是一个URL或相对路径，指明样式表的位置。,CSS样式表格式化XML文档示例,15896316252Jufru26J13465482123,XML文档如下：,class,studentfont-size:15pt;font-weight:bold;color:blue;namefont-weight:bold;font-size:14pt;display:block;color:red;age,email,phonefont-weight:bold;font-size:12pt;display:block;color:block;margin-left:20pt;,CSS样式表文件（mycss.css）的代码如下：,姓名以红色字体显示，年龄、电子邮箱和电话以蓝色显示，并且与姓名要有层次关系,在编写的XML文档中使用处理指令引用该样式表，即在该文档中添加如下代码：,运行效果图,使用HTML命名域将CSS样式嵌入到XML文档中,在“HTML:STYLE”元素内编写CSS样式表。如下：,class,studentfont-size:15pt;font-weight:bold;color:blue;namefont-weight:bold;font-size:14pt;display:block;color:red;zhangsan,xmlns:html=“http:/www.w3.org/Profiles/XHTML-transitional”必须使用,XSL介绍,XSL(eXtensible Stylesheet Language，可扩展样式语言)是为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决定了页面的视觉外观，但是不会改变源文档的结构。XSL是用来处理文档的标记语言，也称为基于模板的语言，它允许将某种模式映射到源文档中。,在XSL中也可以使用CSS来对由XML转化而成的HTML文档进行装饰。,XSL的语法,XSL作为一种样式语言，大致可分为三种模式,选择模式,测试模式,匹配模式,在使用这些模式语句时都必须要将这些模式语句包含在“xsl:stylesheet”标记中，XSL的一般结构如下：,选择模式,使用选择模式语句将数据从XML中提取出来，是一种简单获得数据的方法。选择模式语句主要包括有以下几种：,xsl:value-of,xsl:for-each,xsl:apply-templates,xsl:value-of 是选择select属性指定的节点的值，如下：,student元素下的email元素的值,xsl:for-each语句是XSL提供的具有程序语言性质的语句。该语句常用的有“select”，“order-by”属性，“order-by”属性主要用于对循环的结果动态排序。,xsl:for-each语句的一般格式如下：,XSL模板将XSL的设计细化成一个个模板（块），最后再将这些模板（块）组合成一个完整的XSL，“xsl:apply-templates”就是起到组合模板的功能。一般格式如下：,测试模式,测试模式语句主要用于选择处文档中满足某条件的部分数据，测试模式语句主要有以下几种：,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，表明该学生及格了；否则，表明该学生没有及格。,匹配模式,匹配模式语句主要是指xsl:template语句，在上面的小节中我们讲解了使用XSL模板的好处。那怎样来建立XSL模板呢，xsl:template语句的一般格式如下：,“match”属性指示该模板所匹配的节点，“mode”是该模板的一个别名，与某个“xsl:apply-templates”语句中的“mode”属性的值一致。language属性确定在此模板中执行什么脚本语言，其取值与HTML中的script标记的language属性的取值相同,多个模板的示例,个人档案 个人档案 姓名 性别 年龄,建立姓名、性别和年龄三个模板,建立档案模板，以姓名、性别和年龄作为子模板。,模板中使用档案模板,创建元素和属性,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应用脚本语言制作特效菜单,下拉菜单1菜单项A01http:/,display表示是否显示，true为显示，false为不显示,text元素是菜单项显示的文本,src元素是该菜单所指向的链接,var oPopup=window.createPopup();var oPopBody=oPopup.document.body;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.innerHTML;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/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;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;,鼠标移向子菜单时触发,鼠标移出子菜单时触发,鼠标点击子菜单时触发,创建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配合使用,