XML基础教程 教学课件 作者 范春梅 王新刚 张卫华 第4章 XML与CSS.ppt

《XML基础教程 教学课件 作者 范春梅 王新刚 张卫华 第4章 XML与CSS.ppt》由会员上传分享，免费在线阅读，更多相关内容在应用文档-天天文库。

1、第4章XML与CSSXML最大的特点在于数据的结构与数据的表示完全无关，在进行数据结构化存储之后，如何很好的在浏览器中显示这些数据呢？CSS提供了一种简单而实用的方法。CSS一般用于控制HTML和XHTML的排版格式，也可以用于控制XML文档在浏览器上的显示效果。简洁地说，将CSS与XML结合有以下3点。（1）实现数据与显示方式分离，发挥XML的优势。（2）将显示样式统一于CSS中，便于对显示样式进行统一管理。（3）CSS语法结构简单，兼容性强，适用平台广泛。4.1什么是CSSCSS（CascadingStyleSheet）一般称为层叠样式表，也称级联样式表。层叠的意思

2、是：多重样式定义被层叠为一。其用于控制HTML和XHTML的排版格式。使用CSS可以轻松控制页面的布局、颜色、样式，也可以用于控制XML文档在浏览器上的显示效果等。CSS是在1996年作为“把有关样式属性信息（如字体和边框）加到HTML文档中的标准方法”而提出来的。一个CSS样式单就是一组规则（Rules），每个规则给出此规则所适用的元素的名称，以及此规则要应用于那些元素的样式。4.1.1CSS的历史CSS是由W3C的CSS工作组产生和维护的。1996年W3C正式推出了CSS1，1998年W3C正式推出了CSS2，CSS3现在还处于开发中。CSS最初的开发目的是用来指定

3、HTML的显示样式。从1990年代初HTML被发明开始，样式表就出现了多种形式，不同的浏览器都结合以各自的样式语言，读者使用这些样式语言来调节网页的显示方式。由于初期的HTML版本只含有很少的显示属性，样式表最初是设计给读者用的，读者可以决定网页应该怎样来显示。后来，为了满足设计师的要求，HTML需要获得了很多显示功能。4.1.2CSS的编写环境以及功能简要说明CSS可以用任何写文本的工具进行开发，如文本工具、Dreamweaver等。CSS也是一种语言，这种语言要和HTML或者XHTML语言相结合才起作用。简单来说，CSS就是用来美化网页用的，可以用于控制网页的外观。

4、4.1.3CSS的使用方式通常有两种方式实现XML文档与CSS的结合：第一种方式是直接使用CSS控制XML文档各个元素的表现样式；第二种方式是使用可扩展样式表语言转换（eXtensibleStylesheetLanguageTransformation,XSLT）将XML文档转换为HTML文档，再结合CSS控制转换后所得HTML文档的表现样式。4.2选择元素在XML中，组成文档的单元是一个个的元素，CSS也有类似的语法结构。CSS的语法结构由三部分组成：选择符、属性和值，其基本结构如下。selector{property:value}其中，选择符（selector）通常

5、是待定义或改变的对象；属性（property）是指选择元素的属性，例如文字的字体、颜色、背景等；每个属性都有对应一个属性值（value）。CSS通过属性与属性值来共同设定元素的显示样式。4.2.1类型选择符（TypeSelectors）根据对象的类型、名称作为对象选择符。该类型符为最常见的选择符，其直接以元素、对象作为选择符。用下面的示例来说明。title{font-size:22pt;width:110pt;}示例中，直接以title对象作为选择符，并设置title对象的font-size属性为22pt，width属性为110pt。4.2.2通配选择符（Univers

6、alSelectors）根据对象的相同属性作为对象选择符。选择文档目录树（DOM）中的所有类型的单一对象，用“*”加在被选择对象前以构成完整的选择符。用下面的示例来说明：*[lang=fr]{font-size:22pt;width:150pt;}4.2.3包含选择符（DescendantSelectors）以包含/被包含关系作为对象选择符。假设A包含B，则选择所有被A包含的B有如下语法结构。AB{property:value;}/*A与B之间的关系是A.contains(B)==true*/A、B之间用空格连接，示例如下：tabletd{font-size:12pt;

7、}/*设置被table包含的所有td对象的字体大小为12pt*/4.2.4子对象选择符（ChildSelectors）以继承关系作为对象选择符。假设B为A的子对象，选择A对象的所有B对象有如下语法结构。A>B{property:value;}/*A与B之间的关系是B为A的子对象*/A与B之间用“>”连接，示例如下：student>a{font-size:12pt;}/*设置所有作为student的子对象的a对象字体大小为12pt*/4.2.5相邻选择符（AdjacentSiblingSelectors）以相对位置关系作为对象选择符。假设A