SlideShare ist ein Scribd-Unternehmen logo
1 von 61
Style Sheet - 样式表 ,[object Object],样式单 (Style Sheet) 是一种专门描述结构文档表现方式的文档,它既可以描述这些文档如何在屏幕上显示,也可以描述它们的打印效果,甚至声音效果。样式单一般不包含在 XML 文档内部,而以独立的文档方式存在。 所谓样式表,是指用来定义网页格式的模板。通过样式表,我们可以像 word 一样格式化网页中的各种格式块。
样式表的优点 (1) 表达效果丰富 目前,样式单可以支持文字和图象的精确定位、三维技术以及交互操作等,对于文档的表现力远远超过 HTML 中的标记。更重要的是,样式单的标准规范独立于其它结构文档的规范,当需要实现更丰富的表达效果时,仅需修改样式单规范即可,不会牵涉到原始的 XML 文档内容。  (2) 文档体积小 在实际应用中,常常给相同名称标记下的内容定义相同的表现方式,使用传统的方法需要在每个标记中予以描述,造成大量的重复定义。而在样式单中,对于同一个标记只需进行一次描述就足够了,大大缩小需要传输的文件的体积,可提高传输速度,并节约带宽。  (3) 便于信息检索 样式单可以实现非常复杂的显示效果,但由于样式描述与数据描述相分离,显示细节的描述并不影响文档中数据的内在结构。因此,网络搜索引擎对文档进行搜索时,不会被种种显示描述标记所迷惑。  (4) 可读性好 样式单对各种标记的显示进行集中定义,且定义方式直观易读。这使得它易学易用,可读性、可维护性都比较好。同时 XML 文档也相对简洁、清晰,突出对内容本身的描述功能。
样式表的优点 正是由于样式单的这种种优点, W3C 大力提倡使用样式单描述结构文档的显示效果。与之相应, XML 关于文档浏览的基本思想是将数据与数据的显示分别定义。这样一来, XML 格式文档不会重蹈某些 HTML 文档结构混杂、内容繁乱的覆辙, XML 的编写者也可以集中精力于数据本身,而不受显示方式的细枝末节的影响。 不仅如此,样式单还带来另一个好处, 即定义不同的样式表可以使相同的数据呈现出不同的显示外观,从而适合于不同应用,甚至能够在不同的显示设备上显示 。这样, XML 数据就可以得到最大程度上的重用性,满足不同的应用需求。
两种样式表 ,[object Object],[object Object],[object Object]
CSS- 层叠样式表 层叠样式单 CSS 是一种样式描述规则,目前 W3C 有两个推荐标准, CSS1 和 CSS2 。 CSS1 于 1996 年 12 月通过, CSS2 则于 1998 年 5 月通过。 CSS2 是在 CSS1 的基础上制定的,基本上涵盖了 CSS1 ,并在 CSS1 的基础上增加了媒体类型、特性选择符、声音样式等功能,并对 CSS1 原有的一些功能进行了扩充。 其实, CSS 制定之初的服务对象并不是 XML ,它最初是针对 HTML 提出的样式单语言,不过现在也身兼数职,同样可以很好地应用于描述 XML 文档的表现。利用 CSS ,我们可以定义 HTML 或 XML 文档中元素的显示效果,包括元素的位置、颜色、背景、边空、字体、排版格式等等。
CSS- 层叠样式表 利用 CSS ,我们可以定义 HTML 或 XML 文档中元素的显示效果,包括元素的位置、颜色、背景、边空、字体、排版格式等等。在具体考察 CSS 在 XML 中的应用之前,让我们先来讲一些有关 CSS 放之四海而皆准的规则,也就是 CSS 的书写规范。 CSS 的基本思想是为结构文档中的各个标记定义出相对应的一组显示样式。 定义的基本格式为: 选择符  {  样式属性:取值;样式属性:取值; ... }
<?xml version=&quot;1.0&quot; encoding=&quot;gb2312&quot;?> <?xml:stylesheet type=&quot;text/css&quot; href=&quot; 教材 .css&quot;?> <book> <title> 电子商务教程 </title> <author> 浙江大学 </author> <content> <what>XML 是一种标识语言。 </what> 一个 XML 元素是由开始标签、结束标签以及标签之间的数据构成的。开始和结束标签用来描述标签之间的数据。标签之间的数据被认为是元素的值。 </content> </book> what{display: inline} book,title,author,content{display: block} title{font-size: 1.3em} author{font-style: italic} book,title,author,content {margin: 0.5em}
 
<?xml version=&quot;1.0&quot; encoding=&quot;GB2312&quot;?> <?xml:stylesheet type=&quot;text/css&quot; href=&quot;doc.css&quot;?> <all> <information> <name> 张三 </name> <sex> 男 </sex> <age>20</age> <skill> 数据库 </skill> </information> <information> <name> 李岚 </name> <sex> 女 </sex> <age>27</age> <skill> 打字 </skill> </information> </all> all{ display: block;} information{ display: block;} name{ display: block; font-size:120%;} sex{ display:block; text-indent:2em} age{ display:block; text-indent:2em} skill{ display:block; text-indent:2em} doc.xml doc.css
<HTML> <HEAD>  <STYLE> H1{color:red; }  .myclass{color:green} H2.myclass{color:blue} #myid{color:brown} </STYLE> </HEAD>  <BODY>  <H1> 这是红色的一号标题。 </H1>  <P class=&quot;myclass&quot;>&quot;myclass&quot; 类中的正文是绿色的。 </P> <H2 class=&quot;myclass&quot;> 但 &quot;myclass&quot; 类中的二号标题是蓝色的。 </H2> <P class=&quot;myclass&quot; id=&quot;myid&quot;> 以 &quot;myid&quot; 为标识的正文则是棕色的。 </P> </BODY> </HTML> 试着打开 css.html 文件  !!
 
CSS 几经修订,现已包容了非常全面复杂的显示效果。单介绍 CSS ,就可专门出一本书。为了节省篇幅,突出重点,我们只大致介绍一些 CSS 的基本定义方法,如果需要更详细的信息,还请查相关的书籍和参考手册。 我们主要从三个方面来介绍 :  CSS 的几个主要方面 ,[object Object],[object Object],[object Object]
CSS 的选择符 选择符是指被施加样式的元素,浏览器在文件中碰到这些元素时,就使用定义好的样式来显示它们。 基本的选择符包括 标记、类、标识、伪类 等等。
标记 (Tag) 选择符 标记可以是 HTML 中的标记,也可以是 XML 中已定义的标记。具体的定义方式是:  标记名  {  样式属性:取值;样式属性:取值; ... }   在本例中,为 HTML 中的标记 <H1> 定义了样式,将该标记下的文本用红色显示,因此,浏览结果中的第一行是红色的。 <HTML> <HEAD>  <STYLE> H1{color:red; }   .myclass{color:green} H2.myclass{color:blue} #myid{color:brown} </STYLE> </HEAD>  <BODY>  <H1> 这是红色的一号标题。 </H1>  <P class=&quot;myclass&quot;>&quot;myclass&quot; 类中的正文是绿色的。 </P> <H2 class=&quot;myclass&quot;> 但 &quot;myclass&quot; 类中的二号标题是蓝色的。 </H2> <P class=&quot;myclass&quot; id=&quot;myid&quot;> 以 &quot;myid&quot; 为标识的正文则是棕色的。 </P> </BODY> </HTML>
类 (Class) 选择符 ( 一 ) 无论是 HTML 还是 XML 文档,有些内容是可以分类处理的,相应地,对于某一类的内容可以定义不同的样式予以显示。与标记相关的类选择符与不相关的类选择符的定义方法分别是: 标记名 . 类名  {  样式属性:取值;样式属性:取值; ... }   和 . 类名  {  样式属性:取值;样式属性:取值; ... }   另外,在对 XML 文档中的类定义样式时,首先该 class 应该是在 DTD 中预先声明了的,否则会导致错误的发生。
例子中定义了一个类“ myclass” ,并为它定义了绿色显示的样式,所以属于该类的元素,即第二行文本,显示出来是绿色的。 需要说明的是,定义样式时 class 可以与标记相关联,也就是说 class 的样式受到包含它的标记的制约。因此,在样式单的第三行为属于 myclass 类的标记 <H2> 定义了黄色显示的样式,相应地,第三行文本呈黄色。 类 (Class) 选择符 ( 二 ) <HTML> <HEAD>  <STYLE> H1{color:red; }  .myclass{color:green} H2.myclass{color:blue} #myid{color:brown} </STYLE> </HEAD>  <BODY>  <H1> 这是红色的一号标题。 </H1>  <P class=&quot;myclass&quot;>&quot;myclass&quot; 类中的正文是绿色的。 </P> <H2 class=&quot;myclass&quot;> 但 &quot;myclass&quot; 类中的二号标题是蓝色的。 </H2> <P class=&quot;myclass&quot; id=&quot;myid&quot;> 以 &quot;myid&quot; 为标识的正文则是棕色的。 </P> </BODY> </HTML>
标识 (id) 选择符 ( 一 ) 在 HTML/XML 文档中,常常要唯一地标识一个元素,即赋予它一个 id 标识,以便在对整个文档进行处理时能够很快的找到这个元素。 CSS 也可以将标识 id 作为选择符进行样式设定,定义的方法与类大同小异,只要把符号“ .” 改成“ #” 就行了。方法是: 标记名 # 标识名  {  样式属性:取值;样式属性:取值; ... }   和 # 标识名  {  样式属性:取值;样式属性:取值; ... }
标识 (id) 选择符 ( 二 ) <HTML> <HEAD>  <STYLE> H1{color:red; }  . myclass{color:green} H2.myclass{color:blue} #myid{color:brown} </STYLE> </HEAD>  <BODY>  <H1> 这是红色的一号标题。 </H1>  <P class=&quot;myclass&quot;>&quot;myclass&quot; 类中的正文是绿色的。 </P> <H2 class=&quot;myclass&quot;> 但 &quot;myclass&quot; 类中的二号标题是蓝色的。 </H2 > <P class=&quot;myclass&quot; id=&quot;myid&quot;> 以 &quot;myid&quot; 为标识的正文则是棕色的。 </P> </BODY> </HTML> 一般情况下, 为标识定义的样式是优先于为类定义的样式的 ,因此例子中第四行中的文本虽然属于类“ myclass” ,但显示效果为棕色。
伪类 (pseudo-class) 选择符 伪类选择符主要是指链接锚点的一些特性,在 CSS 中可以为链接锚点的不同状态赋予不同的属性。如: 示  例  效  果  A:link  { color: blue }  没访问过的链接颜色显示为蓝色  A:visited  { color: red }  访问过的链接颜色显示为红色  A:active  { color: yellow }  激活的链接颜色显示为黄色  A:hover  { color: green }  鼠标滑过链接时颜色显示为绿色   此外,可以将某个样式同时施加在多个选择符指定的不同元素上,只要将在大括号括起来的样式定义之前的各选择符之间用逗号分隔即可。如果选择符之间用空格分隔,则是用前面的父元素来约束后面的子元素。 选择符,选择符, ... {  样式属性:取值;样式属性:取值; ... }   和 选择符 选择符  ... {  样式属性:取值;样式属性:取值; ... }
样式属性与属性值 样式属性就是指元素的哪些属性可以在样式单中给予改变,在 CSS1 和 CSS2 中有很多的篇幅讲样式属性。其中 CSS1 中包括字体属性(字形、大小、粗细、倾斜等)、颜色属性、背景属性、文本属性、边框属性(页边空、边框、内空等)、显示属性(独立块、内联、列表、表格、隐藏等)几大类。在 CSS2 中对显示属性的最大改进就是增加了表格的显示方式,此外还增加了一些与页面排版、跨媒体出版相关的内容。  ,[object Object],[object Object],[object Object],[object Object],[object Object]
<?xml version=&quot;1.0&quot; encoding=&quot;gb2312&quot; ?> <?xml-stylesheet type=&quot;text/css&quot; href=&quot;mystyle.css&quot;?> <roster> 学生花名册 <student> <name> 李华 </name> <origin> 河北 </origin> <age>15</age> <telephone>62875555</telephone> </student> <student> <name> 张三 </name> <origin> 北京 </origin> <age>14</age> <telephone>82873425</telephone> </student> </roster> roster,student { font-size:15pt; font-weight:bold; color:blue; display:block; margin-bottom:5pt; } origin,age,telephone { font-weight:bold; font-size:12pt; display:block; color:block; margin-left:20pt; } name { font-weight:bold; font-size:14pt; display:block; color:red; margin-top:5pt; margin-left:8pt; }
XSL 概述 ( 一 ) 可扩展样式单语言  XSL ( eXtensible Stylesheet Languge ),它也是由 W3C 制定的。  XSL 这个样式语言自提出以来争议颇多,前后经过了几番大的修改。 XSL 最近的一个草案于 2000 年 3 月提出,仍然有待进一步修改完善,因此还不能作为正式依据。 CSS 是一种静态的样式描述格式,其本身不遵从 XML 的语法规范。而 XSL 不同,它是通过 XML 进行定义的,遵守 XML 的语法规则,是 XML 的一种具体应用。这也就是说, XSL 本身就是一个 XML 文档,系统可以使用同一个 XML 解释器对 XML 文档及其相关的 XSL 文档进行解释处理。 XSL 由两大部分组成:第一部分描述了如何将一个 XML 文档进行转换,转换为可浏览或可输出的格式 , 即 XSLT ;第二部分则定义了格式对象 FO ( fomatted object )。在输出时,首先根据 XML 文档构造源树,然后根据给定的 XSL 将这个源树转换为可以显示的结果树,这个过程称作树转换,最后再按照 FO 解释结果树,产生一个可以在屏幕上、纸上、语音设备或其它媒体中输出的结果,这个过程称作格式化。
XSL 概述 ( 二 ) 到目前为止, W3C 还未能出台一个得到多方认可的 FO ,但是描述树转换的这一部分协议却日趋成熟,已从 XSL 中分离出来,另取名为 XSLT ( XSL Transformations ),其正式推荐标准于 1999 年 11 月 16 日问世, 现在一般所说的 XSL 大都指的是 XSLT 。与 XSLT 一同推出的还有其配套标准 XPath ,这个标准用来描述如何识别、选择、匹配 XML 文档中的各个构成元件,包括元素、属性、文字内容等。 如前所述, XSLT 主要的功能就是转换,它将一个没有形式表现的 XML 内容文档作为一个源树,将其转换为一个有样式信息的结果树。在 XSLT 文档中定义了与 XML 文档中各个逻辑成分相匹配的模板,以及匹配转换方式。 值得一提的是,尽管制定 XSLT 规范的初衷只是利用它来进行 XML 文档与可格式化对象之间的转换,但它的巨大潜力却表现在它可以很好地描述 XML 文档向任何一个其它格式的文档作转换的方法,例如转换为另一个逻辑结构的 XML 文档、 HTML 文档、 XHTML 文档、 VRML 文档、 SVG 文档等等,不一而足。
XSL 工作原理 如果我们将 XML 文件比作结构化的原料的话,那么 XSL 就好比“筛子“与“模子“,筛子选取自己需要的原料,这些原料再通过模子形成最终的产品: HTML 。 这个模子大致是这样:我们先设计好表现的页面,再将其中需要从 XML 中获取数据来填充内容的部分“挖掉“,然后用 XSL 语句从 XML 中筛出相关的数据来填充。一言以譬之:这 XSL 实际上就是 HTML 的一个“壳子“, XML 数据利用这个“壳“来生成“传统“的 HTML 。 使用 XSL 定义 XML 文档显示方式的基本思想是:通过定义转换模板,将 XML 源文档转换为带样式信息的可浏览文档。最终的可浏览文档可以是 HTML 格式、 FO 格式、或者其它面向显示方式描述的 XML 格式(如前面提到的 SVG 和 SMIL ),限于目前浏览器的支持能力,大多数情况下是转换为一个 HTML 文档进行显示。
XSL 声明与转换模式 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
XML 与树 < 联系人列表 > < 联系人 > < 姓名 > 张三 </ 姓名 > <ID>001</ID> < 公司 >A 公司 </ 公司 > <EMAIL>zhang@aaa.com</EMAIL> < 电话 >(010)62345678</ 电话 > < 地址 > < 街道 > 五街 1234 号 </ 街道 > < 城市 > 北京市 </ 城市 > < 省份 > 北京 </ 省份 > <ZIP>100001</ZIP> </ 地址 > </ 联系人 > <!DOCTYPE  联系人列表 [ <!ELEMENT  联系人列表  ( 联系人 )> <!ELEMENT  联系人  ( 姓名 ,ID, 公司 ,EMAIL, 电话 , 地址 )> <!ELEMENT  地址  ( 街道 , 城市 , 省份 )> <!ELEMENT  姓名  (#PCDATA)> <!ELEMENT ID (#PCDATA)> <!ELEMENT  公司  (#PCDATA)> <!ELEMENT EMAIL (#PCDATA)> <!ELEMENT  电话  (#PCDATA)> <!ELEMENT  街道  (#PCDATA)> <!ELEMENT  城市  (#PCDATA)> <!ELEMENT  省份  (#PCDATA)> ]> 联系人列表 联系人 姓名  ID  公司  EMAIL  电话  地址 街道  城市  省份
HTML  文件结构 HTML  文档一般分为两部分: 文档首部( HEAD ) 和文档主体( BODY )。 文档首部是框在 <HEAD>……</HEAD> 中的部分,文档主体则是位于 <BODY>……</BODY> 之间的部分。 一个典型的网页的结构如下: <HTML> <HEAD> 头部的内容写这里 <title>, <base>, <link>, <isindex>, <meta> </HEAD> <BODY> HTML  文件的正文写在这里 </BODY> </HTML>
HTML  的头部 TITLE :该标签用于标记文档的标题,通常 <TITLE>……</TITLE> 中间的文字会显示在浏览器的标题栏上。一般用简明扼要的文字概括该文档的主要内容或主题。
文字换行 段落的分隔是  <P>……</P> ,该元素标志它们之间的文字成一段。通常段与段之间的间隔较大,而段内的行距较小。 换行是  <BR> ,该元素用于在一段文本中间强制在该处换行,无论该段文本是否超出了浏览器窗口的边界。 不换行是  <NOBR>……</NOBR> ,强制在中间的文字不换行,无论它有多长。通常  <P>……</P>  之间的文本如果超出浏览器的话,浏览器会把它自动换行。
简单表格的 HTML <table> <tr> <th>Food</th><th>Drink</th><th>Sweet</th> </tr> <tr> <td>A</td><td>B</td><td>C</td> </tr> </table> 其显示的效果如下:
表格 ( 一 )   表格开头和结尾的 &quot;<table>&quot; 和 &quot;</table>&quot; 是表格元素的标签,表示位于其中间的代码描述一个表格。通常 <table> 元素具有以下属性: <table align=&quot;alignment&quot; width=&quot;pixelspercent&quot; height= &quot;pixels&quot; border= &quot;pixels&quot; cellpadding= &quot;pixels&quot; cellspacing= &quot;pixels&quot;> ……</table> align  和其他元素一样,表示在页面中的对齐方式,取值为 left , right 或 center ; width  表示整个表格的宽度,取值可以是象素值或页面宽度的百分比; height  表示整个表格的高度,取值为象素值。通常  height 可省略,浏览器会自动根据表格内对象的大小来确定其高度的; border  表示表格边框的宽度,以象素为单位。对 IE  和  Netscape , border 缺省值为 0 ,一般把表格用于页面排版时,它的边框是不需要显示出来的,这时要指定 border = 0 ,最好不要省略; cellpadding  表示表格单元格内的内容和表格边框的距离,以象素为单位,缺省值为 0 ; cellspacing  表示表格内单元格之间的间隔,以象素为单位,缺省为 2 。
表格 ( 二 ) <table>……</table>  之间可以容纳以下几种元素: <tr> <td> <th>  和  <caption> <tr> 表示表格的一行( row ),其用法为: <tr align= &quot;horizontalAlignment&quot; valign= &quot;verticalAlignment&quot;> table cells </tr> align 确定该行所有单元格缺省的水平对齐方式,取值为 left , right 和 center ; valign 确定该行的所有单元格缺省的垂直对齐方式,取值为 top , middle , bottom 。 <td>……</td> 嵌在 <tr>……</tr> ,表示在当前表格的行里增加一个单元格。其具体用法为: <td align = &quot;horizontalalignment&quot; valign =  &quot;verticalalignment&quot; nowrap rowspan =  &quot;numberofrows&quot; colspan =  &quot;numberofcol&quot;>……</td> <th> 的用法与 <td> 基本一样,唯一的区别是这个元素是用来标记这个单元格是表格的 &quot; 头 &quot; 单元格。所谓 &quot; 头 &quot; 单元格是指表格中放在第一行或第一列用来指示其余各行或列内容的单元格。在头单元格中的文本将是居中对齐黑体显示,以示强调。
XML 在展开时是一个树形结构,我们将树形结构中自定义标记称为节点,节点之间存在父子、兄弟关系,我们要访问其中的结点从根结点就要以 &quot; / &quot; 来层层进入。   在 XSL 这个壳中,我们要从原料库 XML 里提取相关的数据,就要用到 XSL 提供的模式化查询语言。所谓模式化查询语言,就是通过相关的模式匹配规则表达式从 XML 里提取数据的特定语句,即我们上所说的“筛子”。 XSL 的解析 联系人列表 联系人 姓名  ID  公司  EMAIL  电话  地址 街道  城市  省份
XSL 的模式语言 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
XSL 的模式语言的应用 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],<?xml version=&quot;1.0&quot; encoding=&quot;GB2312&quot;?> <?xml:stylesheet type=&quot;text/xsl&quot; href=&quot;doc2.xsl&quot;?> <all> <information> <name> 张三 </name> <sex> 男 </sex> <age>20</age> <skill> 数据库 </skill> </information> <information> <name> 李岚 </name> <sex> 女 </sex> <age>27</age> <skill> 打字 </skill> </information> </all> doc2.xml doc2.xsl 这一行已改动了 !!
 
选择模式 选择模式语句将数据从 XML 中提取出来,是一种简单获得数据的方法,这几个标记都有一个 select 属性,选取 XML 中特定的结点名的数据。 select ,顾名思义:选取,它可以选定 XML 中特定唯一的标记,也可以选择某一类相同的标记,我们称之为结点集。 < xsl:for-each  select  = ”..... ”> < xsl:value-of  select  = ”..... ” > < xsl:apply-templates  select  = ”..... ” >
< xsl:for-each > 用法 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
< xsl:value-of > 用法 < xsl:for-each > 模式只是选取节点,并没有取出节点的值,好比猴子只是爬到了树的某个枝干上,那么就用 < xsl:value-of > 来摘“胜利果实“吧! 语法: < xsl:value-of select=“ 模式”  > 提取节点的值 属性: select 用来与当前上下文匹配的 XSL 式样。简单的讲,如果要在 XSL 文档某处插入某个 XML 标记(假定是 xml_mark 标记)的内容,可用如下方式表示: < xsl:value-of select=&quot;xml_mark&quot; >< /xsl:value-of > 或 < xsl:value-of select=&quot;xml_mark&quot;/ >
<?xml version=&quot;1.0&quot; encoding=&quot;gb2312&quot; ?> <?xml-stylesheet type=&quot;text/xsl&quot; href=&quot;mystyle.xsl&quot;?> <roster> 学生花名册 <student> <name> 李华 </name> <origin> 河北 </origin> <age>15</age> <telephone>62875555</telephone> </student> <student> <name> 张三 </name> <origin> 北京 </origin> <age>14</age> <telephone>82873425</telephone> </student> </roster>
<?xml version=&quot;1.0&quot; encoding=&quot;gb2312&quot; ?>  <xsl:stylesheet xmlns:xsl=&quot;http://www.w3.org/1999/XSL/Transform&quot; xmlns=&quot;http://www.w3.org/TR/REC-html40&quot;>  <xsl:template>  <xsl:apply-templates / >  </xsl:template>  <xsl:template match=&quot;/&quot;>  <HTML>  <HEAD>  <TITLE> 学生花名册 </TITLE>  <STYLE> .title{font-size:15pt; font-weight:bold; color:blue } .name{color:red} </STYLE>  </HEAD>  <BODY>  <P class=&quot;title&quot; > 学生花名册 </P>  <xsl:apply-templates select=&quot;roster&quot;/>   </BODY>  </HTML>  </xsl:template>  <xsl:template match=&quot;roster&quot;>   <TABLE BORDER=&quot;1&quot;>  <THEAD>  <TD> <B> 姓名 </B> </TD> <TD> <B> 籍贯 </B> </TD>  <TD> <B> 年龄 </B> </TD>  <TD> <B> 电话 </B> </TD>  </THEAD> <xsl:for-each select=&quot;student&quot; order-by=&quot;name&quot;>  <TR>  <TD><B><xsl:value-of select=&quot;name&quot;/></B></TD>  <TD><xsl:value-of select=&quot;origin&quot;/></TD>  <TD><xsl:value-of select=&quot;age&quot;/></TD>  <TD><xsl:value-of select = &quot;telephone&quot;/></TD>  </TR> </xsl:for-each> </TABLE>  </xsl:template>  </xsl:stylesheet> mystyle.xsl
知道了上面这些语句的含义,我们就可以分析一下这段 XSLT 源代码的执行过程了:  1. 在作过 XML 声明和 XSL 声明之后,样式单利用 <xsl:template> <xsl:apply-templates/> </xsl:template> 声明 XSL 模板,并调用该模板。  2 根据 <xsl:apply-templates/> ,系统最先匹配 XML 源树的根节点。根节点用 &quot;/&quot; 表示,它的匹配方法在一对 <xsl:template match=&quot;/&quot;> 括起的源码中声明。按照这段代码,首先生成带有样式信息的 HTML 文档的开头一段代码 :  <HTML>  <HEAD>  <TITLE> 学生花名册 </TITLE>  <STYLE> .title{font-size:15pt; font-weight:bold; color:blue } .name{color:red} </STYLE>  </HEAD>  <BODY>  <P class=&quot;title&quot; > 学生花名册 </P>
3. 下面,系统看到了 <xsl:apply-templates select=&quot;roster&quot;/> 的指示,于是,它在 XML 源树中寻找标记为“ roster” 的节点进行匹配。就象函数调用一样,现在系统跳到了用 <xsl:template match=&quot;roster&quot;> 括起的“函数”中继续生成下面的 HTML 代码:  <TABLE BORDER=&quot;1&quot;>  <THEAD>  <TD> <B> 姓名 </B> </TD> <TD> <B> 籍贯 </B> </TD>  <TD> <B> 年龄 </B> </TD>  <TD> <B> 电话 </B> </TD>  </THEAD>  4. 现在,系统又接到了新的指示  <xsl:for-each select=&quot;student&quot; order-by=&quot;name&quot;> 。这条指示要求系统寻找标记为“ student” 的子节点,并按照“ name” 下的内容将这些节点排序,然后一一处理。
5. 对于每一个“ student” 子树中的内容,系统为其生成表中一行的内容。每一行包含四列,分别把标记为“ name” 、“ origin” 、“ age” 、“ telephone” 的子节点的内容填进去。其中“ name” 下的内容还是粗体显示。对应到本例中的 XML 数据,生成的 HTML 代码为 :  <TR>  <TD><B> 李华 </B></TD>  <TD> 河北 </TD>  <TD>15</TD>  <TD>62875555</TD>  </TR>  <TR>  <TD><B> 张三 </B></TD>  <TD> 北京 </TD>  <TD>14</TD>  <TD>82873425</TD>  </TR>
6. 处理完 <xsl:for-each select=&quot;student&quot; order-by=&quot;name&quot;> 中的内容,系统继续生成 HTML 代码 :  </TABLE>   至此,系统已处理完 <xsl:template match=&quot;roster&quot;> 中的所有内容,可以“函数返回”了。 7. 系统返回到 <xsl:template match=&quot;/&quot;> 括起的源码中,完成 HTML 最后两行代码的生成:  </BODY> </HTML>
把上面的 HTML 代码串起来,就是生成的转换结果文件,它在 IE5 中的浏览效果为:
匹配的过程从下面的“节点与模版匹配示意图”看得更加清晰:
匹配模式 Template 在英语中是模板的意思。那么,我们也可以叫上面的语句为书写模板。她是一种比上述两种模式更加高级的形式,它的作用有那些呢? 首先, XSL 模板将 XSL 的设计细化成一个个模板(块),最后再将这些模板(块)组合成一个完整的 XSL ;好比船与集装箱,我们不是将所有的货物一件件地堆起来,而是装在各自的集装箱中,然后再在船上将这些集装箱堆放起来。这种方法可以使你先从整体上考虑整个 XSL 的设计,然后将一些表现形式细化成不同的模块,再具体设计这些模块,最后将它们整合在一起,这样,将宏观与微观结合起来,符合人们条理化、规范化要求。
< xsl:templates > 与 < xsl:apply-templates > 语法: < xsl:template match=&quot;node-context&quot; language=&quot;language-name&quot; > 属性: match ──  确定什么样的情况下执行此模板。作为一种简化的说明,在此处使用标记的名字;其中最上层模板必须将 match 设为 &quot;/&quot; language ──  确定在此模板中执行什么脚本语言,其取值与 HTML 中的 SCRIPT 标记的 LANGUAGE 属性的取值相同,缺省值是 Jscript < xsl:template > 用 match 属性从 XML 选取满足条件的节点,征对这些特定的节点形成一个特定输出形式的模板。 与 < xsl:templates > 配套使用的另一个语句是: < xsl:apply-templates > ,我们可以称之为调用模板。 语法: < xsl:apply-templates select=&quot;pattern&quot; order-by=&quot;sort-criteria-list&quot; > 属性: select ──  确定在此上下文环境中应执行什么模板,即选取用 < xsl:template > 标记建立的模板(块)。 order-by ──  以分号( ; )分隔的排序标准,通常是子标记的序列
<?xml version=&quot;1.0&quot; encoding=&quot;GB2312&quot;?> <?xml:stylesheet type=&quot;text/xsl&quot; href=&quot;doc3.xsl&quot;?> <all> <information> <name> 张三 </name> <sex> 男 </sex> <age>20</age> <skill> 数据库 </skill> <skill>XSL</skill> <skill> 汇编语言 </skill> </information> <information> <name> 李岚 </name> <sex> 女 </sex> <age>27</age> <skill> 打字 </skill> </information> </all> doc3.xml
<?xml version=&quot;1.0&quot; encoding=&quot;GB2312&quot;?> <xsl:stylesheet xmlns:xsl=&quot;http://www.w3.org/TR/WD-xsl&quot;> <!-- 根模板 --> <xsl:template match=&quot;/&quot;> <HTML><HEAD><TITLE> 个人档案 </TITLE></HEAD> <BODY> <xsl:apply-templates select=&quot;all/information&quot;/> </BODY> </HTML> </xsl:template> <!-- 姓名模板 --> <xsl:template match=&quot;name&quot;><TD> 姓名 </TD> <TD><xsl:value-of/></TD> </xsl:template> <!-- 性别模板 --> <xsl:template match=&quot;sex&quot;><TD> 性别 </TD> <TD><xsl:value-of/></TD> </xsl:template> <!-- 年龄模板 --> <xsl:template match=&quot;age&quot;><TD> 年龄 </TD> <TD><xsl:value-of/></TD> </xsl:template> <xsl:template match=&quot;skill&quot;> <!-- 技能模板 --> <TR><TD><xsl:value-of/></TD></TR> </xsl:template> </xsl:stylesheet> <!-- 档案模板 --> <xsl:template match=&quot;information&quot;> <TABLE border=&quot;1&quot; cellspacing=&quot;0&quot;> <CAPTION> 个人档案 ( <xsl:eval>formatIndex(childNumber(this), &quot;I&quot;)</xsl:eval> )</CAPTION > <xsl:apply-templates select=&quot;name&quot; /> <xsl:apply-templates select=&quot;sex&quot; /> <xsl:apply-templates select=&quot;age&quot; /> <TR/> <TD> 技能 </TD><TD COLSPAN=&quot;5&quot;> <TABLE cellspacing=&quot;0&quot;> <xsl:apply-templates select=&quot;skill&quot;/> </TABLE> </TD> </TABLE> <BR/> </xsl:template> doc3.xsl
 
 
测试模式 XML 技术的优势之一就在于数据输出的可选择性,即选择需要的数据输出。 前面我们所讲到的选择模式语句 :<xsl:for-each> 、 <xsl:value-of> 及 <xsl:apply-template> 只是简单的选取通过“ /” 符号层层到达的节点,如果我们对 XML 数据不需要全部输出,而只需要其中的满足某条件的部分数据,那么条件判断 <xsl:if> 与多条件判断 <xsl:choose> 及 <xsl: when > 则解决了这种需要,如果你对程序设计熟悉的话,会觉得它们似曾相识。
<xsl:if> 用法 语法:  <xsl:if expr=&quot;script-expression&quot; language=&quot;language-name&quot; test=&quot;pattern&quot;>  属性:  expr ── 脚本语言表达式,计算结果为 &quot; 真 &quot; 或 &quot; 假 &quot; ;如果结果为 &quot; 真 &quot; ,且通过 test ,可在输出中显示其中内容(可省略此项属性)。  language ──expr 属性中表达式的脚本语言类型,其取值与 HTML 标记 SCRIPT 的 LANGUAGE 属性的取值相同,缺省为 &quot;JScript&quot;test ── 源数据测试条件。  <xsl:if test=&quot;.[value() $le$ 20]&quot;>  <xsl:attribute name=&quot;style&quot;>color:red </ xsl:attribute>  </xsl:if>
report.xml 和 report.xsl q1|q2|q3|q4 ── 标记 q1 、 q2 、 q3 、 q3 均用此模板确定输出  $le$ ── 是关系运算符中的“小于等于”,其它关系有小于( $lt$ )、大于( $gt$ )、大于等于( $ge$ )、等于( $eq$ )、不等于( $ne$ )等  . ── 表示引用当前标记  [ ] ── 表示筛选,只有满足筛选条件的标记才能被选取  value() ──XSL 函数,其他常用 XSL 函数有 text() 、 end() 、 index() 等。
<xsl:choose><xsl:when><xsl:otherwise> <xsl:choose>  用法 语法: < xsl:choose > 属性:无,表示一个多选测试的开始 <xsl:when> 的用法 语法: <xsl:when expr=&quot;script-expression&quot; language=&quot;language-name&quot; test=&quot;pattern&quot;> 属性: expr ──  脚本语言表达式,计算结果为 &quot; 真 &quot; 或 &quot; 假 &quot; ;如果结果为 &quot; 真 &quot; ,且通过 test ,则在输出中显示其中内容(可省略此项属性)。 language ── expr 属性中表达式的脚本语言类型,其取值与 HTML 标记 SCRIPT 的 LANGUAGE 属性的取值相同,缺省为 &quot;JScript&quot; 。 test ──  源数据测试条件。 < xsl:otherwise > 的用法 语法: < xsl:otherwise > 属性:无,在一个多选测试中,如果没有不满足 < xsl:when > 规定的条件,如果在最后有此标记,则输出此标记中的内容。
<xsl:choose> <xsl:when test=&quot;.[value() $gt$ 85]&quot; > 优秀 </xsl:when> <xsl:when test=&quot;.[value() $gt$ 70]&quot; > 一般 </xsl:when> <xsl:when test=&quot;.[value() $gt$ 60]&quot; > 及格 </xsl:when> <xsl:otherwise> 不及格 </xsl:otherwise> </xsl:choose>
说明:   在 < xsl:choose > 选择中,从第一个 < xsl:when > 开始,逐个测试,直到满足一个测试条件就将其中的内容输出,不再测试后面的条件;如果不满足任何一个条件,则输出 < xsl:otherwise > 中的内容。 标记对 < xsl:when >< /xsl:when > 与 < xsl:otherwise >< /xsl:otherwise > 中可嵌套 < xsl:if > 或 < xsl:choose > 。 其实,学过 c 语言的人一眼就可以看出,上面的语句就等于 switch----case--- 语句。 grade.xml 和 grade.xsl
运算符与特殊字符
逻辑运算符和关系运算符

Weitere ähnliche Inhalte

Ähnlich wie Css and Xsl

Overview Of HTML
Overview Of HTMLOverview Of HTML
Overview Of HTMLxiaomimum
 
面向对象的CSS
面向对象的CSS面向对象的CSS
面向对象的CSSJerry Xie
 
2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪小 米猪
 
CSS入門教學
CSS入門教學CSS入門教學
CSS入門教學鈺棠 徐
 
Html基础培训
Html基础培训Html基础培训
Html基础培训fangdeng
 
网易相册前端页面开发规范2010版
网易相册前端页面开发规范2010版网易相册前端页面开发规范2010版
网易相册前端页面开发规范2010版昌里大金猪 Luke
 
HTML CSS Javascript 语法手册
HTML CSS Javascript 语法手册HTML CSS Javascript 语法手册
HTML CSS Javascript 语法手册Ying wei (Joe) Chou
 
网页制作基础
网页制作基础网页制作基础
网页制作基础loo2k
 
Go 语言国际电子表格文档格式标准实践
Go 语言国际电子表格文档格式标准实践Go 语言国际电子表格文档格式标准实践
Go 语言国际电子表格文档格式标准实践Ri Xu
 

Ähnlich wie Css and Xsl (16)

Xslt
XsltXslt
Xslt
 
Xslt
XsltXslt
Xslt
 
Overview Of HTML
Overview Of HTMLOverview Of HTML
Overview Of HTML
 
Html&css基础
Html&css基础Html&css基础
Html&css基础
 
面向对象的CSS
面向对象的CSS面向对象的CSS
面向对象的CSS
 
CSS规范:
CSS规范:CSS规范:
CSS规范:
 
2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪2010 01-07周五分享 前端的那些事儿-小米猪
2010 01-07周五分享 前端的那些事儿-小米猪
 
CSS入門教學
CSS入門教學CSS入門教學
CSS入門教學
 
Html基础培训
Html基础培训Html基础培训
Html基础培训
 
CSS 菜鳥救星
CSS 菜鳥救星CSS 菜鳥救星
CSS 菜鳥救星
 
网易相册前端页面开发规范2010版
网易相册前端页面开发规范2010版网易相册前端页面开发规范2010版
网易相册前端页面开发规范2010版
 
HTML CSS Javascript 语法手册
HTML CSS Javascript 语法手册HTML CSS Javascript 语法手册
HTML CSS Javascript 语法手册
 
网页制作基础
网页制作基础网页制作基础
网页制作基础
 
Go 语言国际电子表格文档格式标准实践
Go 语言国际电子表格文档格式标准实践Go 语言国际电子表格文档格式标准实践
Go 语言国际电子表格文档格式标准实践
 
Js dom
Js domJs dom
Js dom
 
Xml基础培训
Xml基础培训Xml基础培训
Xml基础培训
 

Css and Xsl

  • 1.
  • 2. 样式表的优点 (1) 表达效果丰富 目前,样式单可以支持文字和图象的精确定位、三维技术以及交互操作等,对于文档的表现力远远超过 HTML 中的标记。更重要的是,样式单的标准规范独立于其它结构文档的规范,当需要实现更丰富的表达效果时,仅需修改样式单规范即可,不会牵涉到原始的 XML 文档内容。 (2) 文档体积小 在实际应用中,常常给相同名称标记下的内容定义相同的表现方式,使用传统的方法需要在每个标记中予以描述,造成大量的重复定义。而在样式单中,对于同一个标记只需进行一次描述就足够了,大大缩小需要传输的文件的体积,可提高传输速度,并节约带宽。 (3) 便于信息检索 样式单可以实现非常复杂的显示效果,但由于样式描述与数据描述相分离,显示细节的描述并不影响文档中数据的内在结构。因此,网络搜索引擎对文档进行搜索时,不会被种种显示描述标记所迷惑。 (4) 可读性好 样式单对各种标记的显示进行集中定义,且定义方式直观易读。这使得它易学易用,可读性、可维护性都比较好。同时 XML 文档也相对简洁、清晰,突出对内容本身的描述功能。
  • 3. 样式表的优点 正是由于样式单的这种种优点, W3C 大力提倡使用样式单描述结构文档的显示效果。与之相应, XML 关于文档浏览的基本思想是将数据与数据的显示分别定义。这样一来, XML 格式文档不会重蹈某些 HTML 文档结构混杂、内容繁乱的覆辙, XML 的编写者也可以集中精力于数据本身,而不受显示方式的细枝末节的影响。 不仅如此,样式单还带来另一个好处, 即定义不同的样式表可以使相同的数据呈现出不同的显示外观,从而适合于不同应用,甚至能够在不同的显示设备上显示 。这样, XML 数据就可以得到最大程度上的重用性,满足不同的应用需求。
  • 4.
  • 5. CSS- 层叠样式表 层叠样式单 CSS 是一种样式描述规则,目前 W3C 有两个推荐标准, CSS1 和 CSS2 。 CSS1 于 1996 年 12 月通过, CSS2 则于 1998 年 5 月通过。 CSS2 是在 CSS1 的基础上制定的,基本上涵盖了 CSS1 ,并在 CSS1 的基础上增加了媒体类型、特性选择符、声音样式等功能,并对 CSS1 原有的一些功能进行了扩充。 其实, CSS 制定之初的服务对象并不是 XML ,它最初是针对 HTML 提出的样式单语言,不过现在也身兼数职,同样可以很好地应用于描述 XML 文档的表现。利用 CSS ,我们可以定义 HTML 或 XML 文档中元素的显示效果,包括元素的位置、颜色、背景、边空、字体、排版格式等等。
  • 6. CSS- 层叠样式表 利用 CSS ,我们可以定义 HTML 或 XML 文档中元素的显示效果,包括元素的位置、颜色、背景、边空、字体、排版格式等等。在具体考察 CSS 在 XML 中的应用之前,让我们先来讲一些有关 CSS 放之四海而皆准的规则,也就是 CSS 的书写规范。 CSS 的基本思想是为结构文档中的各个标记定义出相对应的一组显示样式。 定义的基本格式为: 选择符 { 样式属性:取值;样式属性:取值; ... }
  • 7. <?xml version=&quot;1.0&quot; encoding=&quot;gb2312&quot;?> <?xml:stylesheet type=&quot;text/css&quot; href=&quot; 教材 .css&quot;?> <book> <title> 电子商务教程 </title> <author> 浙江大学 </author> <content> <what>XML 是一种标识语言。 </what> 一个 XML 元素是由开始标签、结束标签以及标签之间的数据构成的。开始和结束标签用来描述标签之间的数据。标签之间的数据被认为是元素的值。 </content> </book> what{display: inline} book,title,author,content{display: block} title{font-size: 1.3em} author{font-style: italic} book,title,author,content {margin: 0.5em}
  • 8.  
  • 9. <?xml version=&quot;1.0&quot; encoding=&quot;GB2312&quot;?> <?xml:stylesheet type=&quot;text/css&quot; href=&quot;doc.css&quot;?> <all> <information> <name> 张三 </name> <sex> 男 </sex> <age>20</age> <skill> 数据库 </skill> </information> <information> <name> 李岚 </name> <sex> 女 </sex> <age>27</age> <skill> 打字 </skill> </information> </all> all{ display: block;} information{ display: block;} name{ display: block; font-size:120%;} sex{ display:block; text-indent:2em} age{ display:block; text-indent:2em} skill{ display:block; text-indent:2em} doc.xml doc.css
  • 10. <HTML> <HEAD> <STYLE> H1{color:red; } .myclass{color:green} H2.myclass{color:blue} #myid{color:brown} </STYLE> </HEAD> <BODY> <H1> 这是红色的一号标题。 </H1> <P class=&quot;myclass&quot;>&quot;myclass&quot; 类中的正文是绿色的。 </P> <H2 class=&quot;myclass&quot;> 但 &quot;myclass&quot; 类中的二号标题是蓝色的。 </H2> <P class=&quot;myclass&quot; id=&quot;myid&quot;> 以 &quot;myid&quot; 为标识的正文则是棕色的。 </P> </BODY> </HTML> 试着打开 css.html 文件 !!
  • 11.  
  • 12.
  • 14. 标记 (Tag) 选择符 标记可以是 HTML 中的标记,也可以是 XML 中已定义的标记。具体的定义方式是: 标记名 { 样式属性:取值;样式属性:取值; ... } 在本例中,为 HTML 中的标记 <H1> 定义了样式,将该标记下的文本用红色显示,因此,浏览结果中的第一行是红色的。 <HTML> <HEAD> <STYLE> H1{color:red; } .myclass{color:green} H2.myclass{color:blue} #myid{color:brown} </STYLE> </HEAD> <BODY> <H1> 这是红色的一号标题。 </H1> <P class=&quot;myclass&quot;>&quot;myclass&quot; 类中的正文是绿色的。 </P> <H2 class=&quot;myclass&quot;> 但 &quot;myclass&quot; 类中的二号标题是蓝色的。 </H2> <P class=&quot;myclass&quot; id=&quot;myid&quot;> 以 &quot;myid&quot; 为标识的正文则是棕色的。 </P> </BODY> </HTML>
  • 15. 类 (Class) 选择符 ( 一 ) 无论是 HTML 还是 XML 文档,有些内容是可以分类处理的,相应地,对于某一类的内容可以定义不同的样式予以显示。与标记相关的类选择符与不相关的类选择符的定义方法分别是: 标记名 . 类名 { 样式属性:取值;样式属性:取值; ... } 和 . 类名 { 样式属性:取值;样式属性:取值; ... } 另外,在对 XML 文档中的类定义样式时,首先该 class 应该是在 DTD 中预先声明了的,否则会导致错误的发生。
  • 16. 例子中定义了一个类“ myclass” ,并为它定义了绿色显示的样式,所以属于该类的元素,即第二行文本,显示出来是绿色的。 需要说明的是,定义样式时 class 可以与标记相关联,也就是说 class 的样式受到包含它的标记的制约。因此,在样式单的第三行为属于 myclass 类的标记 <H2> 定义了黄色显示的样式,相应地,第三行文本呈黄色。 类 (Class) 选择符 ( 二 ) <HTML> <HEAD> <STYLE> H1{color:red; } .myclass{color:green} H2.myclass{color:blue} #myid{color:brown} </STYLE> </HEAD> <BODY> <H1> 这是红色的一号标题。 </H1> <P class=&quot;myclass&quot;>&quot;myclass&quot; 类中的正文是绿色的。 </P> <H2 class=&quot;myclass&quot;> 但 &quot;myclass&quot; 类中的二号标题是蓝色的。 </H2> <P class=&quot;myclass&quot; id=&quot;myid&quot;> 以 &quot;myid&quot; 为标识的正文则是棕色的。 </P> </BODY> </HTML>
  • 17. 标识 (id) 选择符 ( 一 ) 在 HTML/XML 文档中,常常要唯一地标识一个元素,即赋予它一个 id 标识,以便在对整个文档进行处理时能够很快的找到这个元素。 CSS 也可以将标识 id 作为选择符进行样式设定,定义的方法与类大同小异,只要把符号“ .” 改成“ #” 就行了。方法是: 标记名 # 标识名 { 样式属性:取值;样式属性:取值; ... } 和 # 标识名 { 样式属性:取值;样式属性:取值; ... }
  • 18. 标识 (id) 选择符 ( 二 ) <HTML> <HEAD> <STYLE> H1{color:red; } . myclass{color:green} H2.myclass{color:blue} #myid{color:brown} </STYLE> </HEAD> <BODY> <H1> 这是红色的一号标题。 </H1> <P class=&quot;myclass&quot;>&quot;myclass&quot; 类中的正文是绿色的。 </P> <H2 class=&quot;myclass&quot;> 但 &quot;myclass&quot; 类中的二号标题是蓝色的。 </H2 > <P class=&quot;myclass&quot; id=&quot;myid&quot;> 以 &quot;myid&quot; 为标识的正文则是棕色的。 </P> </BODY> </HTML> 一般情况下, 为标识定义的样式是优先于为类定义的样式的 ,因此例子中第四行中的文本虽然属于类“ myclass” ,但显示效果为棕色。
  • 19. 伪类 (pseudo-class) 选择符 伪类选择符主要是指链接锚点的一些特性,在 CSS 中可以为链接锚点的不同状态赋予不同的属性。如: 示 例 效 果 A:link { color: blue } 没访问过的链接颜色显示为蓝色 A:visited { color: red } 访问过的链接颜色显示为红色 A:active { color: yellow } 激活的链接颜色显示为黄色 A:hover { color: green } 鼠标滑过链接时颜色显示为绿色 此外,可以将某个样式同时施加在多个选择符指定的不同元素上,只要将在大括号括起来的样式定义之前的各选择符之间用逗号分隔即可。如果选择符之间用空格分隔,则是用前面的父元素来约束后面的子元素。 选择符,选择符, ... { 样式属性:取值;样式属性:取值; ... } 和 选择符 选择符 ... { 样式属性:取值;样式属性:取值; ... }
  • 20.
  • 21. <?xml version=&quot;1.0&quot; encoding=&quot;gb2312&quot; ?> <?xml-stylesheet type=&quot;text/css&quot; href=&quot;mystyle.css&quot;?> <roster> 学生花名册 <student> <name> 李华 </name> <origin> 河北 </origin> <age>15</age> <telephone>62875555</telephone> </student> <student> <name> 张三 </name> <origin> 北京 </origin> <age>14</age> <telephone>82873425</telephone> </student> </roster> roster,student { font-size:15pt; font-weight:bold; color:blue; display:block; margin-bottom:5pt; } origin,age,telephone { font-weight:bold; font-size:12pt; display:block; color:block; margin-left:20pt; } name { font-weight:bold; font-size:14pt; display:block; color:red; margin-top:5pt; margin-left:8pt; }
  • 22. XSL 概述 ( 一 ) 可扩展样式单语言 XSL ( eXtensible Stylesheet Languge ),它也是由 W3C 制定的。 XSL 这个样式语言自提出以来争议颇多,前后经过了几番大的修改。 XSL 最近的一个草案于 2000 年 3 月提出,仍然有待进一步修改完善,因此还不能作为正式依据。 CSS 是一种静态的样式描述格式,其本身不遵从 XML 的语法规范。而 XSL 不同,它是通过 XML 进行定义的,遵守 XML 的语法规则,是 XML 的一种具体应用。这也就是说, XSL 本身就是一个 XML 文档,系统可以使用同一个 XML 解释器对 XML 文档及其相关的 XSL 文档进行解释处理。 XSL 由两大部分组成:第一部分描述了如何将一个 XML 文档进行转换,转换为可浏览或可输出的格式 , 即 XSLT ;第二部分则定义了格式对象 FO ( fomatted object )。在输出时,首先根据 XML 文档构造源树,然后根据给定的 XSL 将这个源树转换为可以显示的结果树,这个过程称作树转换,最后再按照 FO 解释结果树,产生一个可以在屏幕上、纸上、语音设备或其它媒体中输出的结果,这个过程称作格式化。
  • 23. XSL 概述 ( 二 ) 到目前为止, W3C 还未能出台一个得到多方认可的 FO ,但是描述树转换的这一部分协议却日趋成熟,已从 XSL 中分离出来,另取名为 XSLT ( XSL Transformations ),其正式推荐标准于 1999 年 11 月 16 日问世, 现在一般所说的 XSL 大都指的是 XSLT 。与 XSLT 一同推出的还有其配套标准 XPath ,这个标准用来描述如何识别、选择、匹配 XML 文档中的各个构成元件,包括元素、属性、文字内容等。 如前所述, XSLT 主要的功能就是转换,它将一个没有形式表现的 XML 内容文档作为一个源树,将其转换为一个有样式信息的结果树。在 XSLT 文档中定义了与 XML 文档中各个逻辑成分相匹配的模板,以及匹配转换方式。 值得一提的是,尽管制定 XSLT 规范的初衷只是利用它来进行 XML 文档与可格式化对象之间的转换,但它的巨大潜力却表现在它可以很好地描述 XML 文档向任何一个其它格式的文档作转换的方法,例如转换为另一个逻辑结构的 XML 文档、 HTML 文档、 XHTML 文档、 VRML 文档、 SVG 文档等等,不一而足。
  • 24. XSL 工作原理 如果我们将 XML 文件比作结构化的原料的话,那么 XSL 就好比“筛子“与“模子“,筛子选取自己需要的原料,这些原料再通过模子形成最终的产品: HTML 。 这个模子大致是这样:我们先设计好表现的页面,再将其中需要从 XML 中获取数据来填充内容的部分“挖掉“,然后用 XSL 语句从 XML 中筛出相关的数据来填充。一言以譬之:这 XSL 实际上就是 HTML 的一个“壳子“, XML 数据利用这个“壳“来生成“传统“的 HTML 。 使用 XSL 定义 XML 文档显示方式的基本思想是:通过定义转换模板,将 XML 源文档转换为带样式信息的可浏览文档。最终的可浏览文档可以是 HTML 格式、 FO 格式、或者其它面向显示方式描述的 XML 格式(如前面提到的 SVG 和 SMIL ),限于目前浏览器的支持能力,大多数情况下是转换为一个 HTML 文档进行显示。
  • 25.
  • 26. XML 与树 < 联系人列表 > < 联系人 > < 姓名 > 张三 </ 姓名 > <ID>001</ID> < 公司 >A 公司 </ 公司 > <EMAIL>zhang@aaa.com</EMAIL> < 电话 >(010)62345678</ 电话 > < 地址 > < 街道 > 五街 1234 号 </ 街道 > < 城市 > 北京市 </ 城市 > < 省份 > 北京 </ 省份 > <ZIP>100001</ZIP> </ 地址 > </ 联系人 > <!DOCTYPE 联系人列表 [ <!ELEMENT 联系人列表 ( 联系人 )> <!ELEMENT 联系人 ( 姓名 ,ID, 公司 ,EMAIL, 电话 , 地址 )> <!ELEMENT 地址 ( 街道 , 城市 , 省份 )> <!ELEMENT 姓名 (#PCDATA)> <!ELEMENT ID (#PCDATA)> <!ELEMENT 公司 (#PCDATA)> <!ELEMENT EMAIL (#PCDATA)> <!ELEMENT 电话 (#PCDATA)> <!ELEMENT 街道 (#PCDATA)> <!ELEMENT 城市 (#PCDATA)> <!ELEMENT 省份 (#PCDATA)> ]> 联系人列表 联系人 姓名 ID 公司 EMAIL 电话 地址 街道 城市 省份
  • 27. HTML 文件结构 HTML 文档一般分为两部分: 文档首部( HEAD ) 和文档主体( BODY )。 文档首部是框在 <HEAD>……</HEAD> 中的部分,文档主体则是位于 <BODY>……</BODY> 之间的部分。 一个典型的网页的结构如下: <HTML> <HEAD> 头部的内容写这里 <title>, <base>, <link>, <isindex>, <meta> </HEAD> <BODY> HTML 文件的正文写在这里 </BODY> </HTML>
  • 28. HTML 的头部 TITLE :该标签用于标记文档的标题,通常 <TITLE>……</TITLE> 中间的文字会显示在浏览器的标题栏上。一般用简明扼要的文字概括该文档的主要内容或主题。
  • 29. 文字换行 段落的分隔是 <P>……</P> ,该元素标志它们之间的文字成一段。通常段与段之间的间隔较大,而段内的行距较小。 换行是 <BR> ,该元素用于在一段文本中间强制在该处换行,无论该段文本是否超出了浏览器窗口的边界。 不换行是 <NOBR>……</NOBR> ,强制在中间的文字不换行,无论它有多长。通常 <P>……</P> 之间的文本如果超出浏览器的话,浏览器会把它自动换行。
  • 30. 简单表格的 HTML <table> <tr> <th>Food</th><th>Drink</th><th>Sweet</th> </tr> <tr> <td>A</td><td>B</td><td>C</td> </tr> </table> 其显示的效果如下:
  • 31. 表格 ( 一 ) 表格开头和结尾的 &quot;<table>&quot; 和 &quot;</table>&quot; 是表格元素的标签,表示位于其中间的代码描述一个表格。通常 <table> 元素具有以下属性: <table align=&quot;alignment&quot; width=&quot;pixelspercent&quot; height= &quot;pixels&quot; border= &quot;pixels&quot; cellpadding= &quot;pixels&quot; cellspacing= &quot;pixels&quot;> ……</table> align 和其他元素一样,表示在页面中的对齐方式,取值为 left , right 或 center ; width 表示整个表格的宽度,取值可以是象素值或页面宽度的百分比; height 表示整个表格的高度,取值为象素值。通常 height 可省略,浏览器会自动根据表格内对象的大小来确定其高度的; border 表示表格边框的宽度,以象素为单位。对 IE 和 Netscape , border 缺省值为 0 ,一般把表格用于页面排版时,它的边框是不需要显示出来的,这时要指定 border = 0 ,最好不要省略; cellpadding 表示表格单元格内的内容和表格边框的距离,以象素为单位,缺省值为 0 ; cellspacing 表示表格内单元格之间的间隔,以象素为单位,缺省为 2 。
  • 32. 表格 ( 二 ) <table>……</table> 之间可以容纳以下几种元素: <tr> <td> <th> 和 <caption> <tr> 表示表格的一行( row ),其用法为: <tr align= &quot;horizontalAlignment&quot; valign= &quot;verticalAlignment&quot;> table cells </tr> align 确定该行所有单元格缺省的水平对齐方式,取值为 left , right 和 center ; valign 确定该行的所有单元格缺省的垂直对齐方式,取值为 top , middle , bottom 。 <td>……</td> 嵌在 <tr>……</tr> ,表示在当前表格的行里增加一个单元格。其具体用法为: <td align = &quot;horizontalalignment&quot; valign = &quot;verticalalignment&quot; nowrap rowspan = &quot;numberofrows&quot; colspan = &quot;numberofcol&quot;>……</td> <th> 的用法与 <td> 基本一样,唯一的区别是这个元素是用来标记这个单元格是表格的 &quot; 头 &quot; 单元格。所谓 &quot; 头 &quot; 单元格是指表格中放在第一行或第一列用来指示其余各行或列内容的单元格。在头单元格中的文本将是居中对齐黑体显示,以示强调。
  • 33. XML 在展开时是一个树形结构,我们将树形结构中自定义标记称为节点,节点之间存在父子、兄弟关系,我们要访问其中的结点从根结点就要以 &quot; / &quot; 来层层进入。   在 XSL 这个壳中,我们要从原料库 XML 里提取相关的数据,就要用到 XSL 提供的模式化查询语言。所谓模式化查询语言,就是通过相关的模式匹配规则表达式从 XML 里提取数据的特定语句,即我们上所说的“筛子”。 XSL 的解析 联系人列表 联系人 姓名 ID 公司 EMAIL 电话 地址 街道 城市 省份
  • 34.
  • 35.
  • 36.  
  • 37. 选择模式 选择模式语句将数据从 XML 中提取出来,是一种简单获得数据的方法,这几个标记都有一个 select 属性,选取 XML 中特定的结点名的数据。 select ,顾名思义:选取,它可以选定 XML 中特定唯一的标记,也可以选择某一类相同的标记,我们称之为结点集。 < xsl:for-each select = ”..... ”> < xsl:value-of select = ”..... ” > < xsl:apply-templates select = ”..... ” >
  • 38.
  • 39. < xsl:value-of > 用法 < xsl:for-each > 模式只是选取节点,并没有取出节点的值,好比猴子只是爬到了树的某个枝干上,那么就用 < xsl:value-of > 来摘“胜利果实“吧! 语法: < xsl:value-of select=“ 模式” > 提取节点的值 属性: select 用来与当前上下文匹配的 XSL 式样。简单的讲,如果要在 XSL 文档某处插入某个 XML 标记(假定是 xml_mark 标记)的内容,可用如下方式表示: < xsl:value-of select=&quot;xml_mark&quot; >< /xsl:value-of > 或 < xsl:value-of select=&quot;xml_mark&quot;/ >
  • 40. <?xml version=&quot;1.0&quot; encoding=&quot;gb2312&quot; ?> <?xml-stylesheet type=&quot;text/xsl&quot; href=&quot;mystyle.xsl&quot;?> <roster> 学生花名册 <student> <name> 李华 </name> <origin> 河北 </origin> <age>15</age> <telephone>62875555</telephone> </student> <student> <name> 张三 </name> <origin> 北京 </origin> <age>14</age> <telephone>82873425</telephone> </student> </roster>
  • 41. <?xml version=&quot;1.0&quot; encoding=&quot;gb2312&quot; ?> <xsl:stylesheet xmlns:xsl=&quot;http://www.w3.org/1999/XSL/Transform&quot; xmlns=&quot;http://www.w3.org/TR/REC-html40&quot;> <xsl:template> <xsl:apply-templates / > </xsl:template> <xsl:template match=&quot;/&quot;> <HTML> <HEAD> <TITLE> 学生花名册 </TITLE> <STYLE> .title{font-size:15pt; font-weight:bold; color:blue } .name{color:red} </STYLE> </HEAD> <BODY> <P class=&quot;title&quot; > 学生花名册 </P> <xsl:apply-templates select=&quot;roster&quot;/> </BODY> </HTML> </xsl:template> <xsl:template match=&quot;roster&quot;> <TABLE BORDER=&quot;1&quot;> <THEAD> <TD> <B> 姓名 </B> </TD> <TD> <B> 籍贯 </B> </TD> <TD> <B> 年龄 </B> </TD> <TD> <B> 电话 </B> </TD> </THEAD> <xsl:for-each select=&quot;student&quot; order-by=&quot;name&quot;> <TR> <TD><B><xsl:value-of select=&quot;name&quot;/></B></TD> <TD><xsl:value-of select=&quot;origin&quot;/></TD> <TD><xsl:value-of select=&quot;age&quot;/></TD> <TD><xsl:value-of select = &quot;telephone&quot;/></TD> </TR> </xsl:for-each> </TABLE> </xsl:template> </xsl:stylesheet> mystyle.xsl
  • 42. 知道了上面这些语句的含义,我们就可以分析一下这段 XSLT 源代码的执行过程了: 1. 在作过 XML 声明和 XSL 声明之后,样式单利用 <xsl:template> <xsl:apply-templates/> </xsl:template> 声明 XSL 模板,并调用该模板。 2 根据 <xsl:apply-templates/> ,系统最先匹配 XML 源树的根节点。根节点用 &quot;/&quot; 表示,它的匹配方法在一对 <xsl:template match=&quot;/&quot;> 括起的源码中声明。按照这段代码,首先生成带有样式信息的 HTML 文档的开头一段代码 : <HTML> <HEAD> <TITLE> 学生花名册 </TITLE> <STYLE> .title{font-size:15pt; font-weight:bold; color:blue } .name{color:red} </STYLE> </HEAD> <BODY> <P class=&quot;title&quot; > 学生花名册 </P>
  • 43. 3. 下面,系统看到了 <xsl:apply-templates select=&quot;roster&quot;/> 的指示,于是,它在 XML 源树中寻找标记为“ roster” 的节点进行匹配。就象函数调用一样,现在系统跳到了用 <xsl:template match=&quot;roster&quot;> 括起的“函数”中继续生成下面的 HTML 代码: <TABLE BORDER=&quot;1&quot;> <THEAD> <TD> <B> 姓名 </B> </TD> <TD> <B> 籍贯 </B> </TD> <TD> <B> 年龄 </B> </TD> <TD> <B> 电话 </B> </TD> </THEAD> 4. 现在,系统又接到了新的指示 <xsl:for-each select=&quot;student&quot; order-by=&quot;name&quot;> 。这条指示要求系统寻找标记为“ student” 的子节点,并按照“ name” 下的内容将这些节点排序,然后一一处理。
  • 44. 5. 对于每一个“ student” 子树中的内容,系统为其生成表中一行的内容。每一行包含四列,分别把标记为“ name” 、“ origin” 、“ age” 、“ telephone” 的子节点的内容填进去。其中“ name” 下的内容还是粗体显示。对应到本例中的 XML 数据,生成的 HTML 代码为 : <TR> <TD><B> 李华 </B></TD> <TD> 河北 </TD> <TD>15</TD> <TD>62875555</TD> </TR> <TR> <TD><B> 张三 </B></TD> <TD> 北京 </TD> <TD>14</TD> <TD>82873425</TD> </TR>
  • 45. 6. 处理完 <xsl:for-each select=&quot;student&quot; order-by=&quot;name&quot;> 中的内容,系统继续生成 HTML 代码 : </TABLE> 至此,系统已处理完 <xsl:template match=&quot;roster&quot;> 中的所有内容,可以“函数返回”了。 7. 系统返回到 <xsl:template match=&quot;/&quot;> 括起的源码中,完成 HTML 最后两行代码的生成: </BODY> </HTML>
  • 48. 匹配模式 Template 在英语中是模板的意思。那么,我们也可以叫上面的语句为书写模板。她是一种比上述两种模式更加高级的形式,它的作用有那些呢? 首先, XSL 模板将 XSL 的设计细化成一个个模板(块),最后再将这些模板(块)组合成一个完整的 XSL ;好比船与集装箱,我们不是将所有的货物一件件地堆起来,而是装在各自的集装箱中,然后再在船上将这些集装箱堆放起来。这种方法可以使你先从整体上考虑整个 XSL 的设计,然后将一些表现形式细化成不同的模块,再具体设计这些模块,最后将它们整合在一起,这样,将宏观与微观结合起来,符合人们条理化、规范化要求。
  • 49. < xsl:templates > 与 < xsl:apply-templates > 语法: < xsl:template match=&quot;node-context&quot; language=&quot;language-name&quot; > 属性: match ── 确定什么样的情况下执行此模板。作为一种简化的说明,在此处使用标记的名字;其中最上层模板必须将 match 设为 &quot;/&quot; language ── 确定在此模板中执行什么脚本语言,其取值与 HTML 中的 SCRIPT 标记的 LANGUAGE 属性的取值相同,缺省值是 Jscript < xsl:template > 用 match 属性从 XML 选取满足条件的节点,征对这些特定的节点形成一个特定输出形式的模板。 与 < xsl:templates > 配套使用的另一个语句是: < xsl:apply-templates > ,我们可以称之为调用模板。 语法: < xsl:apply-templates select=&quot;pattern&quot; order-by=&quot;sort-criteria-list&quot; > 属性: select ── 确定在此上下文环境中应执行什么模板,即选取用 < xsl:template > 标记建立的模板(块)。 order-by ── 以分号( ; )分隔的排序标准,通常是子标记的序列
  • 50. <?xml version=&quot;1.0&quot; encoding=&quot;GB2312&quot;?> <?xml:stylesheet type=&quot;text/xsl&quot; href=&quot;doc3.xsl&quot;?> <all> <information> <name> 张三 </name> <sex> 男 </sex> <age>20</age> <skill> 数据库 </skill> <skill>XSL</skill> <skill> 汇编语言 </skill> </information> <information> <name> 李岚 </name> <sex> 女 </sex> <age>27</age> <skill> 打字 </skill> </information> </all> doc3.xml
  • 51. <?xml version=&quot;1.0&quot; encoding=&quot;GB2312&quot;?> <xsl:stylesheet xmlns:xsl=&quot;http://www.w3.org/TR/WD-xsl&quot;> <!-- 根模板 --> <xsl:template match=&quot;/&quot;> <HTML><HEAD><TITLE> 个人档案 </TITLE></HEAD> <BODY> <xsl:apply-templates select=&quot;all/information&quot;/> </BODY> </HTML> </xsl:template> <!-- 姓名模板 --> <xsl:template match=&quot;name&quot;><TD> 姓名 </TD> <TD><xsl:value-of/></TD> </xsl:template> <!-- 性别模板 --> <xsl:template match=&quot;sex&quot;><TD> 性别 </TD> <TD><xsl:value-of/></TD> </xsl:template> <!-- 年龄模板 --> <xsl:template match=&quot;age&quot;><TD> 年龄 </TD> <TD><xsl:value-of/></TD> </xsl:template> <xsl:template match=&quot;skill&quot;> <!-- 技能模板 --> <TR><TD><xsl:value-of/></TD></TR> </xsl:template> </xsl:stylesheet> <!-- 档案模板 --> <xsl:template match=&quot;information&quot;> <TABLE border=&quot;1&quot; cellspacing=&quot;0&quot;> <CAPTION> 个人档案 ( <xsl:eval>formatIndex(childNumber(this), &quot;I&quot;)</xsl:eval> )</CAPTION > <xsl:apply-templates select=&quot;name&quot; /> <xsl:apply-templates select=&quot;sex&quot; /> <xsl:apply-templates select=&quot;age&quot; /> <TR/> <TD> 技能 </TD><TD COLSPAN=&quot;5&quot;> <TABLE cellspacing=&quot;0&quot;> <xsl:apply-templates select=&quot;skill&quot;/> </TABLE> </TD> </TABLE> <BR/> </xsl:template> doc3.xsl
  • 52.  
  • 53.  
  • 54. 测试模式 XML 技术的优势之一就在于数据输出的可选择性,即选择需要的数据输出。 前面我们所讲到的选择模式语句 :<xsl:for-each> 、 <xsl:value-of> 及 <xsl:apply-template> 只是简单的选取通过“ /” 符号层层到达的节点,如果我们对 XML 数据不需要全部输出,而只需要其中的满足某条件的部分数据,那么条件判断 <xsl:if> 与多条件判断 <xsl:choose> 及 <xsl: when > 则解决了这种需要,如果你对程序设计熟悉的话,会觉得它们似曾相识。
  • 55. <xsl:if> 用法 语法: <xsl:if expr=&quot;script-expression&quot; language=&quot;language-name&quot; test=&quot;pattern&quot;> 属性: expr ── 脚本语言表达式,计算结果为 &quot; 真 &quot; 或 &quot; 假 &quot; ;如果结果为 &quot; 真 &quot; ,且通过 test ,可在输出中显示其中内容(可省略此项属性)。 language ──expr 属性中表达式的脚本语言类型,其取值与 HTML 标记 SCRIPT 的 LANGUAGE 属性的取值相同,缺省为 &quot;JScript&quot;test ── 源数据测试条件。 <xsl:if test=&quot;.[value() $le$ 20]&quot;> <xsl:attribute name=&quot;style&quot;>color:red </ xsl:attribute> </xsl:if>
  • 56. report.xml 和 report.xsl q1|q2|q3|q4 ── 标记 q1 、 q2 、 q3 、 q3 均用此模板确定输出 $le$ ── 是关系运算符中的“小于等于”,其它关系有小于( $lt$ )、大于( $gt$ )、大于等于( $ge$ )、等于( $eq$ )、不等于( $ne$ )等 . ── 表示引用当前标记 [ ] ── 表示筛选,只有满足筛选条件的标记才能被选取 value() ──XSL 函数,其他常用 XSL 函数有 text() 、 end() 、 index() 等。
  • 57. <xsl:choose><xsl:when><xsl:otherwise> <xsl:choose> 用法 语法: < xsl:choose > 属性:无,表示一个多选测试的开始 <xsl:when> 的用法 语法: <xsl:when expr=&quot;script-expression&quot; language=&quot;language-name&quot; test=&quot;pattern&quot;> 属性: expr ── 脚本语言表达式,计算结果为 &quot; 真 &quot; 或 &quot; 假 &quot; ;如果结果为 &quot; 真 &quot; ,且通过 test ,则在输出中显示其中内容(可省略此项属性)。 language ── expr 属性中表达式的脚本语言类型,其取值与 HTML 标记 SCRIPT 的 LANGUAGE 属性的取值相同,缺省为 &quot;JScript&quot; 。 test ── 源数据测试条件。 < xsl:otherwise > 的用法 语法: < xsl:otherwise > 属性:无,在一个多选测试中,如果没有不满足 < xsl:when > 规定的条件,如果在最后有此标记,则输出此标记中的内容。
  • 58. <xsl:choose> <xsl:when test=&quot;.[value() $gt$ 85]&quot; > 优秀 </xsl:when> <xsl:when test=&quot;.[value() $gt$ 70]&quot; > 一般 </xsl:when> <xsl:when test=&quot;.[value() $gt$ 60]&quot; > 及格 </xsl:when> <xsl:otherwise> 不及格 </xsl:otherwise> </xsl:choose>
  • 59. 说明:   在 < xsl:choose > 选择中,从第一个 < xsl:when > 开始,逐个测试,直到满足一个测试条件就将其中的内容输出,不再测试后面的条件;如果不满足任何一个条件,则输出 < xsl:otherwise > 中的内容。 标记对 < xsl:when >< /xsl:when > 与 < xsl:otherwise >< /xsl:otherwise > 中可嵌套 < xsl:if > 或 < xsl:choose > 。 其实,学过 c 语言的人一眼就可以看出,上面的语句就等于 switch----case--- 语句。 grade.xml 和 grade.xsl