第5章 使用CSS显示XML文档课件

第1页第5章使用CSS显示XML文档本章概述本章的学习目标主要内容第2页本章概述W3C为XML数据显示发布了两个建议规范：CSS（层叠样式表）和XSL（可扩展样式语言）。当XML文件和CSS文件或XSL文件相关联后，浏览器将按着CSS文件或XSL文件给出的显示方式来显示XML文件中标记的文本内容。第3页本章的学习目标样式表的基本概念如何定义CSS样式CSS选择符XML文档调用CSS的方式常用的CSS属性第4页主要内容5.1样式表概述5.2 CSS简介5.3 CSS基本语法5.4 XML与CSS结合的方式5.5 CSS属性5.6 CSS的显示规则5.7 本章小结第5页5.1样式表概述

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

对于样式表而言，不管是CSS，还是XSL，都具有如下优点：表达效果丰富。可读性好。利于信息检索。文档体积小。5.2CSS简介CSS（CascadingStyleSheet，层叠样式表或级联样式表）是一种样式控制语言，其基本思想是为结构文档中的各个标记定义出相对应的一组显示样式。CSS最初是为弥补HTML的不足而出现的。后来，又应用在XML上，用来格式化XML数据内容。第8页

简单地说，将CSS与XML结合有以下3点好处：实现数据与显示方式分离，发挥XML的优势。将显示样式统一于CSS中，便于对显示样式进行统一管理。CSS语法结构简单，兼容性强，适用平台广泛。第9页5.2.2CSS的历史CSS是由W3C在1996年正式推出的，最初的版本是CSS1。1998年W3C又正式推出了CSS2。CSS2基本涵盖CSS1，并增加了媒体类型、特性选择符、声音样式等功能，还对原有的一些功能进行了扩充。现在正在使用的是CSS2.1，CSS3被分成四十多个模块，现在还处于开发中。第10页第11页5.2.3CSS的创建与应用1、建立XML文档。2、创建样式表文件。3、链接样式表文件到XML文档。4、在浏览器中浏览。第12页5.3CSS基本语法CSS语句的基本格式如下：选择符{

属性1：属性值1；

属性2：属性值2；……

属性n：属性值n；}第13页5.3.2对XML文档有效的CSS选择符

常用的有以下几类。1.类型选择符（TypeSelector）2.类选择符（ClassSelector）3.ID选择符（IDSelector）4.其他选择方式第14页5.4XML与CSS结合的方式XML文档调用CSS有3种形式，即引用一个外部CSS文件、将CSS语句嵌入到XML文档、同时应用内部CSS和外部CSS。第15页5.4.1调用外部样式表文件调用外部样式表文件是指XML文件本身不含有样式信息，而是通过引用外部CSS文件来定义XML文件的表现形式。CSS样式表文件是一个扩展名为“.css”的文本文件，可以在XML文档的开头加入以下处理指令将指定的CSS样式表链接进来。其格式为：<?xml-stylesheettype="text/css"href="CSS文件的URI"?>5.4.2在XML文档内部定义样式在XML文档内部应用CSS是指将CSS样式直接嵌入到XML文档内部，一般来说，不建议在XML文档内部定义CSS样式。第16页5.4.3混合方法指定样式

第3种方法是综合应用内部CSS样式和外部CSS样式。在这种情况下，如果两种样式之间发生冲突，则以内部的CSS样式为准。第17页第18页5.4.4使用多个样式文件一个样式表文件可以被多个XML文件调用，同样地，一个XML文件也可以同时调用多个样式表文件。5.5CSS属性CSS的样式属性有很多，通过设置这些属性的值可以改变相应元素的显示方式。最常用的元素属性有字体属性、颜色属性、背景属性、文本属性、边框属性等。第19页5.5.1字体属性

字体属性（font）是最常用的CSS属性，通过设置字体属性的值可以改变字体的显示方式，包括字体的字型、风格、大小、拉伸等。第20页font-family属性。font-style属性。font-variant属性。font-weight属性。font-size属性。第21页第22页5.5.2文本属性CSS中与文本样式有关的属性包括以下6种：text-align属性。text-indent属性。text-transformt属性。text-decoration属性。vertical-align属性。line-height属性。5.5.3颜色和背景属性

在CSS中，通过颜色属性“color”可以设置元素的前景色，设置元素的背景色需要用“background-color”属性。第23页表示颜色的方法，通常有以下几种：名称表示法。“#RGB”表示法。第24页

与背景有关的设置除了背景颜色外，还包括背景图像，相关的CSS属性有以下几种：background-image属性background-repeat属性background-position属性第25页5.5.4设置文本的显示方式

文本显示方式是指文本内容在浏览器中以何种形式来显示。通过display属性来设置。其取值分别为：block：块显示方式line：行显示方式list-item：列表显示方式none：不显示元素的内容第26页5.6CSS的显示规则通常情况下，在CSS中为某个元素所设置的显示格式属性会影响到该元素所包含的所有子元素，除非这些子元素重新设置了不同的格式属性。所以，如果没有为子元素设置特定的样式规则，子元素将会自动继承父元素的规则。第27页如果在样式表中并没有为某个元素设置样式规则，也没有父元素的样式规则可以继承，则浏览器将使用自己默认设定的规则来显示。第28页

5.7本章小结XML关于文档浏览的基本思想是将数据与数据的显示分别定义，XML文档本身不涉及各种数据的具体显示方式，文档的显示是通过一个外部样式表来描述的。第29页本章在讲解完了XML基本概念、