《xml网页设计实用教程 作者 蔡体健 廖志芳 汤文亮 莫佳 第五章 可扩展样式单语言(1)》由会员分享，可在线阅读，更多相关《xml网页设计实用教程 作者 蔡体健 廖志芳 汤文亮 莫佳 第五章 可扩展样式单语言(1)（40页珍藏版）》请在金锄头文库上搜索。
1、XML技术基础,主讲：蔡体健,第五章 可扩展样式单语言,在线教务辅导网：http:/,教材其余课件及动画素材请查阅在线教务辅导网,QQ:349134187 或者直接输入下面地址：,http:/,引言,XML关于文档浏览的基本思想是将数据与数据的显示分别定义，XML文档本身不涉及各种数据的具体显示方式，文档的显示实际上是通过一个外部样式表，又称为样式单来描述的。 样式单(Style Sheet)是一种描述结构文档表现方式的文档，它既可以描述这些文档如何在屏幕上显示，也可以描述它们的打印效果甚至声音效果。,引言（续）,迄今为止，W3C已经给出了两种样式单语言的推荐标准： 层叠样式单CSS（Casc
2、ading Style Sheets）； 可扩展样式单语言XSL（eXtensible Stylesheet Language）。 如果对一个XML文档施加某一个样式单，可在 XML文档中使用标记 予以声明，表示该XML文档的显示效果由所引用的样式单决定。,引言（续）,例如： 表明由mystyle.css决定XML文档的显示样 表明该XML文档使用XSL样式单mystyle.xsl。 内容与形式相分离使XML文档更偏重于数据本身，而不受显示方式的细枝末节的影响。 而且通过定义不同的样式单可以使相同的数据呈现出不同的显示外观，实现XML数据的可重用性。,引言（续）, 李华 男 1978.9.12
3、 92 Java ,student5.1.xml,注意：引入样式单和无样式单的显示效果差别, 电子商务班学生成绩单 学生成绩单 姓名性别生日成绩 ,5.2.xsl,由两部分组成：HTML标记、 XSL标记,本课目标：,如何引入样式单 CSS及其语法； XSL 小结,如何引入样式单,CSS可以属性、属性组的形式嵌入在HTML文档中。 例： 或 embackground-color:#8000ff;color:white h1font-family:黑体 pfont-size:14px .specialcolor:blue ,如何引入样式单,CSS也可以独立文件的形式引入到HTML和XML文档中，
4、一般认为以独立文件的形式较好，因为这样可以方便层叠样式单的管理、修改、维护和复用。 在HTML文档中引用外部CSS ： 在XML文档中引用外部样式 ： type=“text/css”或”text/xsl”,返回目标,CSS层叠样式单,CSS概述 CSS语法 CSS选择器 CSS属性集 引入外部的CSS样式 CSS级联顺序,返回目标,CSS概述,什么是级联样式表CSS Cascading Style Sheets 针对HTML提出的样式表语言，现在同样可以很好地应用于描述XML文档的显示。 利用CSS，可以定义XML文档中元素的显示效果。 CSS的基本思想是为结构文档中的各个标记定义出相对应的一
5、组显示样式。 使用层叠样式单能保证文档显示格式的一致性和较好的格式化，在XML文档中使用层叠样式单可以方便开发人员为自定义的元素和标记定义其显示格式。 通过层叠样式单可以改变文档中元素的显示属性，如位置、颜色、背景、边空、字体、排版格式等。 目前的层叠样式单分为CSS1和CSS2两个层次；,返回CSS,CSS语法,定义CSS的基本格式如下： Selector property:value; property:value; . Selector： 选择器，被施加样式的对象，可以是标记（tag）、.类名(class)、#标识名(id)等 Property：样式属性，可以是颜色、字体、背景等等。 v
6、alue：样式属性取值，属性名和属性值之间用“:”分隔。 property: value; property: value 大括号中所包含的是属性集，属性集由若干个属性组成，每个属性间用“;”分隔。,返回CSS,CSS的选择器,CSS的选择器是被施加样式的对象，它可以是一个元素或一组共享相同格式的元素。其常见用法如下： 选择器为“*”：星号“*”泛指所有的元素，在此表示所有元素都被施加了大括号中所设置的样式。 选择器为元素名：指该元素名所对应的元素。 选择器的形式为“元素名1 元素名2”：指所有作为元素1子元素的元素2。 选择器的形式为“元素名1，元素名2，元素名3”：指列表中的所有元素。,C
7、SS的选择器（续）,CSS选择器常见用法： 选择器的形式为：“元素名.类名”：指带有class属性，且class属性值为指定类名的所有元素。例如在例5.3的html文档中，样式“.specialcolor:blue”表示对所有class属性值为“special”的元素设置其文字颜色为蓝色。 选择器的形式为：“元素名#ID值”：指带有ID属性，且属性值为指定ID值的所有元素。,CSS选择器示例, greeting1! greeting2! question in greeting answer1 question in answer answer2 ,xsampdoc display:block
8、;color: black;font-size:32; greeting#a1 display:block;color: red; answer question display:block;color: blue; answer.ans display:block;color: yellow; ,5.4.xml,5-xml-css1.css,5.5.css,返回CSS,CSS的属性集,属性集说明了选择器所选定的成分的具体显示格式信息。例如：body color: black 是设置body元素的文字颜色为黑色。 如果属性值为多个单词，则需要用双引号将属性值括起来，例如，p font-fami
9、ly: “sans serif“。 如果需指定多个属性，就必须将每个属性用分号隔开。 为了让样式定义更有可读性，可以分行描述属性，例如： p text-align: center; color: black; font-family: arial ,CSS的属性集,CSS的属性集,返回CSS,引入外部的CSS样式,在CSS文档中可以使用import指令引用外部的CSS样式； 语法：import url(url); 例如： import url(“http:/ import必须放在第一行； import必须以分号结束；,返回CSS,CSS级联顺序,在CSS中允许为同一个元素指定多条规则，当出现冲
10、突时，优先级顺序如下： 引用样式单的CSS文件中的规则比被引用者优先； 最专门的规则优先； 作者置标为重要的规则优先；例color:black !import 样式单中最接近的规则； 继承父元素的规则；,CSS级联顺序, greeting1! greeting2! question in greeting answer1 question in answer answer2 ,import url(“5-css1.css“); greeting#a1 font-family: Arial;font-size: 32pt; width:30em; color: navy,5.4.xml,5-cs
11、s1.css,xsampdoc color:black; display:block;font-size: 24pt; greeting#a1 font-family: Arial;font-size: 32pt; width:30em; color: red;display:block; question font-size:x-large ;color: green !important;display:block; question font-size: x-large;color: rgb(256,2,256);display:block; answer.ans font-size:
12、20pt;color: blue;display:block; ,5-css.css,返回CSS,XSL可扩展样式单,XSL概述 CSS与XSL的比较 XML文档结构树 XSL的组成与工作原理 XSL的基本结构 XSL模板 XSL的元素语法 动态选择XML文档的显示样式,返回目标,CSS与XSL的比较,W3C已经给出了两种样式单语言的推荐标准： 层叠样式单CSS 可扩展样式单语言XSL CSS既可用于HTML，也可用于XML。但XSL是专门针对XML提出的，它不能处理HTML文档。 CSS是一种静态的样式描述格式，XSL 是一种动态的样式描述格式，可以动态地创建输出样式。 CSS不遵从XML的
13、语法规范；而XSL遵从XML 的语法，本身也是一个XML文档。 XSL中90的样式规定在CSS中都有定义，但仍然有一些效果是CSS无法描述的，必须使用XSL。这些功能包括文本的置换、根据文本内容决定显示方式、文档内容排序等，都是XSL所独有的。 XSL是一种转换的思想，它最终将XML文档转换为另一种可用于输出的文档；而CSS则没有任何转换动作，在整个过程中没有任何新码产生。 CSS不支持中文，而XSL支持中文。,返回XSL,XML文档的结构树,XSL把XML作为一个存储数据的树来看待。 一个完整的XML文档可以转换为一个结构完整的结构树 可以作为结构树中节点的是元素、属性、元素的内容文本、处理
14、指令、注释。DTD声明可以是结构树的叶子节点，实体和记号是DTD节点的子节点； 结构树从根节点开始，用“/”表示。根节点不是根元素。, use default namespace ,根节点,注释,Html元素,缺省名空间,Head元素,Title元素,文本,处理指令,Body元素,deitel名空间,Title元素,根元素不是根节点,CDATA节相当于文本节点,XML声明,返回XSL,XSL的组成及工作原理,XSL由三部分组成： XSLT是一种转换XML的语言； XPath是一种定义XML节点路径的语言； XSL FO（fomatted object）是一种定义XML显示方式的语言。 在输出时
15、，首先根据XML文档构造源树，然后根据给定的XSL将这个源树转换为可以显示的结果树，这个过程称作树转换，最后再按照FO解释结果树，产生一个可以在屏幕上、纸上、语音设备或其他媒体中输出的结果，这个过程称作格式化。,XSL的组成及工作原理（续）,XML 文档,XSL 样式表,XSLT 转换过程,FO格式化 过程,输出 文档,XSL处理器 内置在IE中,浏览器或终端设备,HTML结果树,演示：XMLSPY或XMLWriter将XML文档转换成HTML文档,XSL的组成及工作原理,SGML,XML,HTML,XSL,XSL FO,XSLT,XPath,返回XSL,XSL的基本结构,XSL声明，根元素,
16、HTML命名空间,XSL有微软的和W3C的两种。 http:/www.w3.org/1999/XSL/Transform 基于推荐标准(W3C) http:/www.w3.org/TR/WD-xsl 基于工作草案(IE5.0) uri:xsl相当于 http:/www.w3.org/TR/WD-xsl,在XML中使用XSL的方式：,返回XSL,XSL模板,模板是XSL中最重要的概念，一个XSL文件至少含有一个根模板，XSL处理器总是从根模板开始实施XSL变换。 定义模板的语法： 规则 match属性值是XPath路径，用于指定模板应用于哪些节点。 一个模板对应一组规则，模板中的规则用于控制XML文档的输出。,XSL模板,使用模板的优点：
