1 / 31

第 5 章 CSS 和 XSL

第 5 章 CSS 和 XSL. 目录. 5.1 CSS 5.1.1 CSS 样式定义 5.1.2 XML 文档和 CSS 样式表 5.1.3 CSS 属性 5.1.4 CSS 应用示例 5.2 XSL 5.2.1 XSL 的基本知识 5.2.2 XSL 文件的基本结构 5.2.3 XSL 中常用的元素及其属性 5.3 CSS 与 XSL. 5.1 CSS(Cascading Style Sheets). W3C 在 1996 年制定并且发布的网页排版标准，是一种用于网页排版的标记性语言。 以纯文本的形式存储

adolfo
Download Presentation

第 5 章 CSS 和 XSL

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. 第5章 CSS和XSL

  2. 目录 • 5.1 CSS • 5.1.1 CSS样式定义 • 5.1.2 XML文档和CSS样式表 • 5.1.3 CSS属性 • 5.1.4 CSS应用示例 • 5.2 XSL • 5.2.1 XSL的基本知识 • 5.2.2 XSL文件的基本结构 • 5.2.3 XSL中常用的元素及其属性 • 5.3 CSS与XSL

  3. 5.1 CSS(Cascading Style Sheets) • W3C在1996年制定并且发布的网页排版标准，是一种用于网页排版的标记性语言。 • 以纯文本的形式存储 • CSS不但增强HTML的表现能力，而且能够用例表现XML • Cssshili1.htm

  4. 5.1.1 CSS样式定义 • 用CSS表现XML文档是通过为XML文档中的元素设计相应的样式表来实现。 • 样式规则定义方法： • CSS选择符{属性1:属性值1;属性2:属性值2;….} • 选择符：是一个XML的元素或用户定义的类、ID等 • CSS中三种选择符 • XML元素 • 使用格式： XML 元素名称 {设置的样式规则} • 用户创建的类（CLASS）：为同一个XML元素指定多种风格 • 格式： • .类名称{设置的样式规则} • XML元素名称.类名称{设置的样式规则} • 使用格式：<XML 元素名称 class=“类名称”>

  5. 5.1.1 CSS样式定义 • CSS中三种选择符 • 自定义（ID） • 格式： • # id号 {设置的样式规则} • XML元素名称 # id号{设置的样式规则} • 使用格式： • <XML 元素名称 id=“id号”>

  6. 5.1.2 XML文档和CSS样式表 • CSS与XML元素联系起来的三种方式 • 将CSS置于XML文档中 • 将CSS制作成单独的CSS文件 • 前两者的结合，即一部分CSS样式表存在于XML文档中，另外一部分则以单独的样式表文件保存

  7. 5.1.2 XML文档和CSS样式表 （1）XML文档中的样式表 <?xml version="1.0" encoding="GB2312" ?> <?xml:stylesheet type=“text/css“ ?> <根元素 xmlns:HTML="http://www.w3.org/TR/REC-html40"> <HTML:STYLE> CSS选择符1{设置的样式规则} CSS选择符2{设置的样式规则} </HTML:STYLE> <其他元素> ……. </其他元素> </根元素>

  8. 5.1.2 XML文档和CSS样式表 （2）CSS样式文件 • .css样式文件 <STYLE TYPE=“text/css”> CSS选择符1 {设置的样式规则} CSS选择符2 {设置的样式规则} ….. CSS选择符n {设置的样式规则} </STYLE> • Xml处理指令 • <?xml:stylesheet type=“样式表文件的语言类型” href=“样式表文件的名称和位置“ media=“样式表介质目标” title=“样式表的标题” alternate=“yes/no”?>

  9. 5.1.2 XML文档和CSS样式表 （3）外部CSS样式表和内部CSS样式表 • 样式表的优先等级（由低到高） • 浏览器默认的样式表 • 外部样式文件 • 内部样式文件

  10. 5.1.3 CSS属性 （1）字体属性 • Cssshili2.htm

  11. 5.1.3 CSS属性 （2）文本属性 • Cssshili3.html，Cssshili4.html

  12. 5.1.3 CSS属性 （3）框属性 • 填充：填充距指的是文本边框与文本之间的距离。 • 边框 • 边界：定义了边距后的页面，无论您怎么改变窗口的大小，它都会按照您定义好的边距样式显示。 • 位置

  13. 5.1.3 CSS属性 • 框填充属性

  14. 5.1.3 CSS属性 • 框边框属性 • Cssshili5.html

  15. 5.1.3 CSS属性 • 框边界属性

  16. 5.1.3 CSS属性 • 框位置属性

  17. 5.1.3 CSS属性 （4）颜色和背景属性 • CSSShili6.html } }

  18. 5.1.3 CSS属性 （5）定位属性 • Cssshili7.html;cssshili8.html

  19. 5.1.3 CSS属性 （6）布局属性 • Cssshili9.html;cssshili9-2.html；cssshili9-3.html

  20. 5.2 XSL • XSL：eXtendible Stylesheet Language可扩展样式表语言 • XSL被定义为包含一套元素集的XML语法规范，该语法规范被用于把XML文件转换成HTML、XML或者其他格式的文档。

  21. 5.2.1 XSL的基本知识 • XML文档的一大特点是可以向多种格式的文档进行转换。 • 数据格式转换的重要思想是把XML文档视为一种树状结构，转换的过程就是从源树生成结果树的过程。 • XSL样式表定义了源树和结果树中对应部分的转换规则，每条规则中包含了一个模板，并对有着一种模式。 • 模板定义了转换的结果，而模式则规定了需要进行转换的元素或属性对象。

  22. 5.2.1 XSL的基本知识 • XSL两大组成部分 • 描述如何将一个XML文档转换为另一个XML文档或另一种类型的文档 • 定义格式对象FO（Formatted Object） • XML文档的转换过程分为两步 • 根据XML文档构造源树，然后根据XSL规则将源树转换为结果树 XSLT • 生成结果树后对其进行解释，产生一种适合显示、打印或是播放的格式，称为格式化（Formatting）

  23. 5.2.2 XSL文件的基本结构 • XML声明 • <xsl:stylesheet>和</xsl:stylesheet>定义XSL文件的根元素。 • 除了注释之外，该元素的子元素必须是xsl:template元素。 • 根元素利用xmlns属性指明XSL的命名空间，即为” http://www.w3.org/TR/WD-xsl”的局部名称xsl，XSL文件中所有的XSL元素都必须以此为前缀，表示相应的元素将遵循由该局部名称指定的命名空间处规定的XSL标准 • <xsl:template></xsl:template>定义结果树中数据的显示定义模板。 • XSL文档的扩展名为.xsl • XML引用语法格式 • <? Xml-stylesheet type=“text/css” href=“mystylesheet.xsl” ?>

  24. 5.2.3 XSL中常用的元素及其属性 • 选取元素 • xsl:stylesheet • xsl:value-of • xsl:for-each • 模板元素 • xsl:template • xsl:apply-templates • 条件控制元素 • xsl:if • xsl:choose • 其他元素 • xsl:comment • xsl-element和xsl:attribute

  25. 5.2.3 XSL中常用的元素及其属性 • 选取元素 • xsl:stylesheet：根元素 • xsl:value-of：用于从XML文件中取出被select属性指定的XML文件的元素的内容（即指定节点的值)，并将这个内容和样式结合起来。 • 例5-3.xml 例5-3.xsl • xsl:for-each：用于循环读取XML文件中的元素。注意：只是选取元素（节点）而没有取出值。 • 例5-3.xml 例5-4.xsl

  26. 5.2.3 XSL中常用的元素及其属性 • 模板元素 • xsl:template：定义样式表中所有的模板规则 • 语法形式： <xsl:template match=“node-context” language=“… … “> • 在XSL样式表中必须有一个模板规则与根元素匹配 • 如果某些元素节点在XSL中对应有多个模板，只有最后一个对应模板会生效 • 如果XML文档中不同元素有同名的子元素，在为其编写模板时，应把父元素作为其前缀。

  27. 5.2.3 XSL中常用的元素及其属性 • 模板元素 • xsl:apply-templates：命令XSL处理器到XSL样式表中查找适当的模板来使用。 • 语法形式 <xsl:apply-templates select=“pattern” order-by=“sort-criteria-list”> • 属性select确定在此上下文环境中应执行什么模板，即选取用<xsl:template>元素建立的模板。 • 例5-5.xsl；例5-6.xml • 工作组.xml；年份.xsl；工作组成员特长.xsl

  28. 5.2.3 XSL中常用的元素及其属性 • 条件控制元素 • xsl:if：用来通过条件语句进行测试 • 语法形式：<xsl:if expr=“script-expression” language=“language-name” test=“pattern”> • test属性用来设置源数据测试条件，有三种 • <xsl:if test=“元素名称”>……</xsl:if> • <xsl:if test=“.[@属性名称]”>……</xsl:if> • <xsl:if test=“.[@属性名称=‘特定的属性值’]”>……</xsl:if> • 例5-7.xml ；例5-7.xsl

  29. 5.2.3 XSL中常用的元素及其属性 • 条件控制元素 • xsl:choose：对多重条件进行测试，必须要结合<xsl:when>和<xsl:otherwise>共同使用。 • 语法格式：书p107 • < xsl:choose>没有属性 • <xsl:when>有三个属性 • <xsl:otherwise>没有属性，当<xsl:when>规定的条件都不满足时，则输出此元素的内容。 • 例5-8.xml；例5-8.xsl

  30. 5.2.3 XSL中常用的元素及其属性 • 其他元素 • xsl:comment：XSL注释使用该元素实现 • 与XML注释的区别：XSL注释只能出现在XSL文件的模板中，及该元素至少应该是xsl:template元素的子元素。 • 例5-9.xsl；例5-3.xml • xsl:element和xsl:attribute：分别用来在XSL样式文件中动态地创建HTML标记和其相关属性。 • 语法格式：教材P111 • 例5-10.xml，例5-10.xsl

  31. 5.3 CSS与XSL • 对xml文档施加一个样式表，可在xml中使用标记<?xml:stylesheet type="text/ " href=“ " ?> • 区别 • Css即可用于HTML也可用于XML，XSL专门用于XML • Css的语法自成体系，XSL遵从XML的语法 • XSL是一种转换的思想，最终将XML文档转换成另一种可以输出的文档，而CSS没有任何转换动作 • CSS适合用于输出比较固定的最终文档，而XSLT要重新索引XML结构树，消耗内存比较多

More Related