第5章使用CSS显示XML文档

1、XML基础教程第5章 使用CSS显示XML文档第1页第第5章章 使用使用CSS显示显示XML文档文档本章概述 本章的学习目标主要内容XML基础教程第5章 使用CSS显示XML文档第2页本章概述本章概述lW3C为为XML数据显示发布了两个建议规范：数据显示发布了两个建议规范：CSS（层叠样式表）和（层叠样式表）和XSL（可扩展样式语言）。当（可扩展样式语言）。当XML文件和文件和CSS文件或文件或XSL文件相关联后，浏览文件相关联后，浏览器将按着器将按着CSS文件或文件或XSL文件给出的显示方式来文件给出的显示方式来显示显示XML文件中标记的文本内容。文件中标记的文本内容。XML基础教程第5章

2、使用CSS显示XML文档第3页本章的学习目标本章的学习目标l样式表的基本概念样式表的基本概念l如何定义如何定义CSS样式样式lCSS选择符选择符lXML文档调用文档调用CSS的方式的方式l常用的常用的CSS属性属性XML基础教程第5章 使用CSS显示XML文档第4页主要内容主要内容5.1 样式表概述样式表概述5.2CSS简介简介5.3CSS基本语法基本语法5.4XML与与CSS结合的方式结合的方式5.5CSS属性属性5.6CSS的显示规则的显示规则5.7本章小结本章小结XML基础教程第5章 使用CSS显示XML文档第5页5.1 样式表概述样式表概述 样式表是一种专门描述结构文档表现方式的文件，

3、样式表是一种专门描述结构文档表现方式的文件，它既可以描述这些文档如何在屏幕上显示，也可它既可以描述这些文档如何在屏幕上显示，也可以描述它们的打印效果甚至声音效果。样式表一以描述它们的打印效果甚至声音效果。样式表一般不包含在般不包含在XML文档的内部，而是以独立文档的文档的内部，而是以独立文档的方式存在。方式存在。XML基础教程第5章 使用CSS显示XML文档5.1.1 显示显示XML的两种常用样式表的两种常用样式表lW3C给出了两种推荐的样式表标准：一种给出了两种推荐的样式表标准：一种是常见的是常见的CSS，另一种是，另一种是XSL。第6页标记语言的发展历史标记语言的发展历史XML基础教程第5

4、章 使用CSS显示XML文档第7页5.1.2 样式表的优势样式表的优势 对于样式表而言，不管是对于样式表而言，不管是CSS，还是，还是XSL，都具，都具有如下优点：有如下优点：l表达效果丰富。表达效果丰富。l可读性好。可读性好。l利于信息检索。利于信息检索。l文档体积小。文档体积小。XML基础教程第5章 使用CSS显示XML文档5.2 CSS简介简介l CSS（Cascading Style Sheet，层叠样，层叠样式表或级联样式表）是一种样式控制语言式表或级联样式表）是一种样式控制语言，其基本思想是为结构文档中的各个标记，其基本思想是为结构文档中的各个标记定义出相对应的一组显示样式。定义出

5、相对应的一组显示样式。CSS最初最初是为弥补是为弥补HTML的不足而出现的。后来，又的不足而出现的。后来，又应用在应用在XML上，用来格式化上，用来格式化XML数据内容数据内容。第8页XML基础教程第5章 使用CSS显示XML文档 简单地说，将简单地说，将CSS与与XML结合有以下结合有以下3点点好处：好处：l实现数据与显示方式分离，发挥实现数据与显示方式分离，发挥XML的优的优势。势。l将显示样式统一于将显示样式统一于CSS中，便于对显示样中，便于对显示样式进行统一管理。式进行统一管理。lCSS语法结构简单，兼容性强，适用平台语法结构简单，兼容性强，适用平台广泛。广泛。第9页XML基础教程第

6、5章 使用CSS显示XML文档5.2.2 CSS的历史的历史l CSS是由是由W3C在在1996年正式推出的，最初年正式推出的，最初的版本是的版本是CSS 1。1998年年W3C又正式推出又正式推出了了CSS 2。CSS 2基本涵盖基本涵盖CSS 1，并增加，并增加了媒体类型、特性选择符、声音样式等功了媒体类型、特性选择符、声音样式等功能，还对原有的一些功能进行了扩充。现能，还对原有的一些功能进行了扩充。现在正在使用的是在正在使用的是CSS 2.1，CSS 3被分成四被分成四十多个十多个模块模块，现在还处于开发中。，现在还处于开发中。第10页XML基础教程第5章 使用CSS显示XML文档第11

7、页5.2.3 CSS的创建与应用的创建与应用1、建立建立XML文档。文档。2、创建样式表文件。创建样式表文件。3、链接样式表文件到链接样式表文件到XML文档。文档。4、在浏览器中浏览在浏览器中浏览。XML基础教程第5章 使用CSS显示XML文档第12页5.3 CSS基本语法基本语法 CSS语句的基本格式如下：语句的基本格式如下：选择符选择符 属性属性1： 属性值属性值1； 属性属性2： 属性值属性值2； 属性属性n： 属性值属性值n； XML基础教程第5章 使用CSS显示XML文档第13页5.3.2 对对XML文档有效的文档有效的CSS选择符选择符 常用的有以下几类。常用的有以下几类。 1.

8、类型选择符（类型选择符（Type Selector） 2. 类选择符（类选择符（Class Selector） 3. ID选择符（选择符（ID Selector） 4. 其他选择方式其他选择方式XML基础教程第5章 使用CSS显示XML文档第14页5.4 XML与与CSS结合的方式结合的方式lXML文档调用文档调用CSS有有3种形式，即引用一个种形式，即引用一个外部外部CSS文件、将文件、将CSS语句嵌入到语句嵌入到XML文文档、同时应用内部档、同时应用内部CSS和外部和外部CSS。XML基础教程第5章 使用CSS显示XML文档第15页5.4.1 调用外部样式表文件调用外部样式表文件l调用外部

9、样式表文件是指调用外部样式表文件是指XML文件本身不文件本身不含有样式信息，而是通过引用外部含有样式信息，而是通过引用外部CSS文文件来定义件来定义XML文件的表现形式。文件的表现形式。CSS样式样式表文件是一个扩展名为表文件是一个扩展名为“.css”的文本文的文本文件，可以在件，可以在XML文档的开头加入以下处理文档的开头加入以下处理指令将指定的指令将指定的CSS样式表链接进来。其格样式表链接进来。其格式为：式为：lXML基础教程第5章 使用CSS显示XML文档5.4.2 在在XML文档内部定义样式文档内部定义样式l在在XML文档内部应用文档内部应用CSS是指将是指将CSS样式样式直接嵌入到

10、直接嵌入到XML文档内部，一般来说，不文档内部，一般来说，不建议在建议在XML文档内部定义文档内部定义CSS样式。样式。第16页XML基础教程第5章 使用CSS显示XML文档5.4.3 混合方法指定样式混合方法指定样式 第第3种方法是综合应用内部种方法是综合应用内部CSS样式和外部样式和外部CSS样式。在这种情况下，如果两种样式样式。在这种情况下，如果两种样式之间发生冲突，则以内部的之间发生冲突，则以内部的CSS样式为准样式为准。第17页XML基础教程第5章 使用CSS显示XML文档第18页5.4.4 使用多个样式文件使用多个样式文件l一个样式表文件可以被多个一个样式表文件可以被多个XML文件

11、调用文件调用，同样地，一个，同样地，一个XML文件也可以同时调用文件也可以同时调用多个样式表文件。多个样式表文件。XML基础教程第5章 使用CSS显示XML文档5.5 CSS属性属性lCSS的样式属性有很多，通过设置这些属的样式属性有很多，通过设置这些属性的值可以改变相应元素的显示方式。最性的值可以改变相应元素的显示方式。最常用的元素属性有字体属性、颜色属性、常用的元素属性有字体属性、颜色属性、背景属性、文本属性、边框属性等。背景属性、文本属性、边框属性等。第19页XML基础教程第5章 使用CSS显示XML文档5.5.1 字体属性字体属性 字体属性（字体属性（font）是最常用的）是最常用的C

12、SS属性，属性，通过设置字体属性的值可以改变字体的显通过设置字体属性的值可以改变字体的显示方式，包括字体的字型、风格、大小、示方式，包括字体的字型、风格、大小、拉伸等。拉伸等。第20页XML基础教程第5章 使用CSS显示XML文档lfont-family属性。属性。lfont-style属性。属性。lfont-variant属性。属性。lfont-weight属性。属性。lfont-size属性。属性。第21页XML基础教程第5章 使用CSS显示XML文档第22页5.5.2 文本属性文本属性 CSS中与文本样式有关的属性包括以下中与文本样式有关的属性包括以下6种：种：ltext-align属性

13、。属性。ltext-indent属性。属性。ltext-transformt属性。属性。ltext-decoration属性。属性。lvertical-align属性属性。lline-height属性属性。XML基础教程第5章 使用CSS显示XML文档5.5.3 颜色和背景属性颜色和背景属性 在在CSS中，通过颜色属性中，通过颜色属性“color”可以设可以设置元素的前景色，设置元素的背景色需要置元素的前景色，设置元素的背景色需要用用“background-color”属性。属性。第23页XML基础教程第5章 使用CSS显示XML文档表示颜色的方法，通常有以下几种：表示颜色的方法，通常有以下几

14、种：l名称表示法。名称表示法。l“#RGB”表示法。表示法。第24页XML基础教程第5章 使用CSS显示XML文档 与背景有关的设置除了背景颜色外，还包括与背景有关的设置除了背景颜色外，还包括背景图像，相关的背景图像，相关的CSS属性有以下几种：属性有以下几种：lbackground-image属性属性lbackground-repeat属性属性lbackground-position属性属性第25页XML基础教程第5章 使用CSS显示XML文档5.5.4 设置文本的显示方式设置文本的显示方式 文本显示方式是指文本内容在浏览器中以文本显示方式是指文本内容在浏览器中以何种形式来显示。通过何种形式

15、来显示。通过display属性来设置属性来设置。 其取值分别为：其取值分别为：lblock：块显示方式：块显示方式lline：行显示方式：行显示方式llist-item：列表显示方式：列表显示方式lnone：不显示元素的内容：不显示元素的内容第26页XML基础教程第5章 使用CSS显示XML文档5.6 CSS的显示规则的显示规则l通常情况下，在通常情况下，在CSS中为某个元素所设置中为某个元素所设置的显示格式属性会影响到该元素所包含的的显示格式属性会影响到该元素所包含的所有子元素，除非这些子元素重新设置了所有子元素，除非这些子元素重新设置了不同的格式属性。所以，如果没有为子元不同的格式属性。所

16、以，如果没有为子元素设置特定的样式规则，子元素将会自动素设置特定的样式规则，子元素将会自动继承父元素的规则。继承父元素的规则。第27页XML基础教程第5章 使用CSS显示XML文档l如果在样式表中并没有为某个元素设置样如果在样式表中并没有为某个元素设置样式规则，也没有父元素的样式规则可以继式规则，也没有父元素的样式规则可以继承，则浏览器将使用自己默认设定的规则承，则浏览器将使用自己默认设定的规则来显示。来显示。第28页XML基础教程第5章 使用CSS显示XML文档 5.7 本章小结本章小结lXML关于文档浏览的基本思想是将数据与关于文档浏览的基本思想是将数据与数据的显示分别定义，数据的显示分别定义，XML文档本身不涉文档本身不涉及各种数据的具体显示方式，文档的显示及各种数据的具体显示方式，文档的显示是通过一个外部样式表来描述的。是通过一个外部样式表来描述的。第29页XML基础教程第5章 使用CSS显示XML文档l本章在讲解完了本章在讲解完了XML基