第5章 之CSS.pptVIP

第5章 之使用CSS格式XML文档 概述 XML关心的是数据的结构，并能很好、方便地描述数据，但它不提供数据的显示功能。因此，浏览器只能显示xml文件的所有内容（包括标记），如果想让浏览器以某种格式显示XML文件中标记的文本内容，那么必须以某种方式告诉浏览器如何显示。W3C为XML数据显示发布了两个建议规范：CSS（层叠样式表）和XSL（可扩展样式语言） 5.1 CSS简介 5.1.1 CSS基本概念 CSS即层叠样式表或级联样式表，是目前在浏览器上按一定格式显示XML文档内容的主要方法之一。 CSS样式表中包含了一组设置元素显示样式的规则，最初被用来控制HTML文档内容的显示格式，同样能够用来控制XML文档内容的显示格式。 XML和HTML所采用的CSS语法是相通的，都是通过一组特定的属性设置来规定某个元素内容的显示格式。可设置的元素显示属性包括：文字的字型、字体、大小和颜色，元素内容在页面中的位置、是否分段、对齐方式，是否添加边框、背景、下划线等等。 创建专门的样式表文件，把控制元素显示格式的相关指令放在其中，使其与XML文档的数据内容分开，可以大大提高控制XML文档显示方式的灵活性，并可使得样式表本身更加容易维护。 相对于XSL（可扩展样式表语言）技术而言，采用CSS技术来显示XML文档的做法还是有局限性的。 5.1.2 CSS的创建与应用 1．建立XML文档 因目前CSS不支持中文标记，所以5.1.xml中的元素标记全部是英文。 2．创建样式表文件 CSS样式表是一个以.css为文件扩展名的纯文本文件，可以使用“记事本”等文本编辑器来建立CSS样式表文件。 例如，可创建一个名为5.1.css的简单CSS样式表文件，用来设置上述5.1.xml文档的显示格式。 3．链接样式表到XML文档 为了引用创建好的样式表文件来格式化显示XML文档的内容，必须将相应的样式表文件链接到这个XML文档中。对于上面的范例，只需在5.1.xml文档中增加下面的链接语句即可： ?xml:stylesheet type=text/css href= 5.1.css ? 链接CSS到XML 5.2 CSS基本语法 5.2.1 CSS语法概述 1．CSS语句的基本格式 一个CSS文件就是由若干个样式规则组成的文本文件，而样式规则由两个主要部分组成：选择符和样式描述。 CSS语句的基本格式如下： 选择符 { 属性1:属性值1; 属性2:属性值2 ; … } 其中：选择符（selector）用来指定该规则所适用的元素，由一个或多个元素名或特定的标识构成；紧跟其后的是用花括号“{ }”括起来的若干对属性名与相应的属性值，用来对选择符所指定的元素设置具体的显示样式。 注意：花括号中的每一个属性名与相应的属性值之间须用冒号“:”分隔；而各对属性之间则须用分号“;”隔开。最后一个属性后面不需要加“;”。 例 2．CSS中的注释（P83） 样式表文件也可以包含注释语句，添加注释文字有助于样式表更具可读性。注释语句由斜线加上星号“/*”作为开始，以星号加斜线“*/”作为结束，在这两个特定标记之间可以输入任何想要说明的文字。 3．CSS中字母的大小写 对于IE 浏览器而言，CSS中字母的大小写是不加区分的。但当CSS应用于XML文档时，忽略字母的大小写将会带来一定的问题。如果想使用CSS来显示XML文档，就应该让文档中各种元素的名称都完全不同，而不仅仅是字母大小写的不同。 5.2.2 CSS选择符 选择符就是将被施加样式的元素名称，浏览器在文档中碰到这些元素时，就使用在CSS中定义好的样式来显示它们。选择符可以是下列形式之一： 1．使用标记名 2．使用.类名 3．使用#标识名 4．使用标记名#标识名 1.标记名 把XML的元素标记名作为选择符，表示规则将应用这些元素。通常情况下，在CSS中为某个元素所设置的显示格式会应用到该元素所包含的文本内容以及所有子元素所包含的文本内容(P82继承)，除非这些子元素重新设置了不同的格式属性。 CSS显示规则 用浏览器打开XML文件时，浏览器将按着元素标记在XML文件中出现的“顺序”，并用该标记在CSS中对应的样式表显示该标记包含的文本数据，如果标记在CSS中没有对应的样式表，浏览器将使用默认的显示规则显示该标记中的文本数据 当有多个标记的内容需要用完全一样的方式显示，“选择符”可以是这些标记名用逗号分隔的字符串。 例：5.1.xml welcome { display:block; font-weight:bold; font-size:20pt; color:red } id,customeraddress,name,order { f