XML基础教程 教学课件 作者 高怡新 第4章 使用CSS格式XML文档.ppt

第4章 使用CSS格式XML文档 4.1 CSS简介 4.1.1 CSS基本概念 CSS即层叠样式表或级联样式表，是目前在浏览器上按一定格式显示XML文档内容的主要方法之一。 CSS样式表中包含了一组设置元素显示样式的规则，最初被用来控制HTML文档内容的显示格式，同样能够用来控制XML文档内容的显示格式。 XML和HTML所采用的CSS语法是相通的，都是通过一组特定的属性设置来规定某个元素内容的显示格式。可设置的元素显示属性包括：文字的字型、字体、大小和颜色，元素内容在页面中的位置、是否分段、对齐方式，是否添加边框、背景、下划线等等。 创建专门的样式表文件，把控制元素显示格式的相关指令放在其中，使其与XML文档的数据内容分开，可以大大提高控制XML文档显示方式的灵活性，并可使得样式表本身更加容易维护。 相对于XSL（可扩展样式表语言）技术而言，采用CSS技术来显示XML文档的做法还是有局限性的。 4.1.2 CSS的创建与应用 1．建立XML文档 例如，可建立一个如书中所示的XML范例文档book_01.xml。 2．创建样式表文件 CSS样式表是一个以.css为文件扩展名的纯文本文件，可以使用“记事本”等文本编辑器来建立CSS样式表文件。 例如，可创建一个名为book_01.css的简单CSS样式表文件，用来设置上述book_01.xml文档的显示格式。 3．链接样式表到XML文档 为了引用创建好的样式表文件来格式化显示XML文档的内容，必须将相应的样式表文件链接到这个XML文档中。对于上面的范例，只需在book_01.xml文档中增加下面的链接语句即可： ?xml:stylesheet type=text/css href=book_01.css ? 4.2 CSS基本语法 4.2.1 CSS语法概述 1．CSS语句的基本格式 CSS语句的基本格式如下： 选择符 {属性1:属性值1[;属性2:属性值2 …]} 其中：选择符（selector）用来指定该规则所适用的元素，由一个或多个元素名或特定的标识构成；紧跟其后的是用花括号“{ }”括起来的若干对属性名与相应的属性值，用来对选择符所指定的元素设置具体的显示样式。 注意：花括号中的每一个属性名与相应的属性值之间须用冒号“:”分隔；而各对属性之间则须用分号“;”隔开。 2．CSS中的注释 样式表文件也可以包含注释语句，添加注释文字有助于样式表更具可读性。注释语句由斜线加上星号“/*”作为开始，以星号加斜线“*/”作为结束，在这两个特定标记之间可以输入任何想要说明的文字。 3．CSS中字母的大小写 对于IE 浏览器而言，CSS中字母的大小写是不加区分的。但当CSS应用于XML文档时，忽略字母的大小写将会带来一定的问题。如果想使用CSS来显示XML文档，就应该让文档中各种元素的名称都完全不同，而不仅仅是字母大小写的不同。 4．CSS中属性的继承 通常情况下，在CSS中为某个元素所设置的显示格式属性会影响到该元素所包含的所有子元素，除非这些子元素重新设置了不同的格式属性。 5．在CSS使用中文 由于CSS1在支持多种字符集方面表现不佳，在CSS2中针对此问题作了改进。如果要在CSS中使用中文简体字符集，需要在CSS文件的第一行加上如下指令： @charset gb2312; 4.2.2 CSS选择符 1．使用多个元素与多个规则 2．使用CLASS属性 3．使用ID属性 4．使用STYLE 属性 5．使用上下文选择符 4.2.3 CSS属性与属性值 1．属性关键字 2．色彩属性值 （1）使用英文色彩名称 （2）使用各种RGB表示方式 3．尺寸属性值 （1）绝对尺寸值 （2）相对尺寸值 （3）百分比尺寸值 4．URL属性值 4.3 CSS属性的设置 4.3.1 设置显示属性 元素的display属性控制了浏览器显示该元素文字的基本方法。可为display属性指定下面4种属性值中的任何一种。 block 将元素以块方式显示，通过换行与其他元素分开显示； inline 在同一行显示元素； none 隐藏元素，使元素在页面中不可见； list-item 以列表方式显示元素。 4.3.2 设置字型属性 1．font-family属性 2．font-size属性 3．font-style属性 4．font-weight 属性 5．font-variant 属性 6．font 属性 4.3.3 设置色彩属性 与色彩设置有关的属性包括color、background-color和border-color等，其中应用最多的是color属性。可以使用英文的颜色名称，也可以使用任何一种RGB 格式来作为色彩属性值。