第4章使用CSS格式XML文档

1、Page 1CSSCSS简介简介4.1CSSCSS基本语法基本语法4.2 CSS CSS属性的设置属性的设置4.3 CSS CSS的链接的链接 4.4 CSS CSS应用实例应用实例4.5Page 24.1.1 CSS基本概念基本概念CSS即层叠样式表或级联样式表，是目前在浏览即层叠样式表或级联样式表，是目前在浏览器上按一定格式显示器上按一定格式显示XML文档内容的主要方法文档内容的主要方法之一。之一。CSS样式表中包含了一组设置元素显示样式的规样式表中包含了一组设置元素显示样式的规则，最初被用来控制则，最初被用来控制HTML文档内容的显示格式，文档内容的显示格式，同样能够用来控制同样能够用来

2、控制XML文档内容的显示格式。文档内容的显示格式。Page 3XML和和HTML所采用的所采用的CSS语法是相通的，语法是相通的，都是通过一组特定的属性设置来规定某个都是通过一组特定的属性设置来规定某个元素内容的显示格式。可设置的元素显示元素内容的显示格式。可设置的元素显示属性包括：文字的字型、字体、大小和颜属性包括：文字的字型、字体、大小和颜色，元素内容在页面中的位置、是否分段、色，元素内容在页面中的位置、是否分段、对齐方式，是否添加边框、背景、下划线对齐方式，是否添加边框、背景、下划线等等。等等。Page 4创建专门的样式表文件，把控制元素显示创建专门的样式表文件，把控制元素显示格式的相关

3、指令放在其中，使其与格式的相关指令放在其中，使其与XML文文档的数据内容分开，可以大大提高控制档的数据内容分开，可以大大提高控制XML文档显示方式的灵活性，并可使得样文档显示方式的灵活性，并可使得样式表本身更加容易维护。式表本身更加容易维护。相对于相对于XSL（可扩展样式表语言）技术而（可扩展样式表语言）技术而言，采用言，采用CSS技术来显示技术来显示XML文档的做法文档的做法还是有局限性的。还是有局限性的。Page 54.1.2 CSS的创建与应用的创建与应用1建立建立XML文档文档例如，可建立一个如书中所示的例如，可建立一个如书中所示的XML范例文档范例文档book_01.xml。2创建样

4、式表文件创建样式表文件CSS样式表是一个以样式表是一个以.css为文件扩展名的纯文本为文件扩展名的纯文本文件，可以使用文件，可以使用“记事本记事本”等文本编辑器来建立等文本编辑器来建立CSS样式表文件。样式表文件。例如，可创建一个名为例如，可创建一个名为book_01.css的简单的简单CSS样样式表文件，用来设置上述式表文件，用来设置上述book_01.xml文档的显文档的显示格式。示格式。Page 63链接样式表到链接样式表到XML文档文档为了引用创建好的样式表文件来格式化显为了引用创建好的样式表文件来格式化显示示XML文档的内容，必须将相应的样式表文档的内容，必须将相应的样式表文件链接到

5、这个文件链接到这个XML文档中。对于上面的文档中。对于上面的范例，只需在范例，只需在book_01.xml文档中增加下面文档中增加下面的链接语句即可：的链接语句即可：Page 74.2.1 CSS语法概述语法概述1CSS语句的基本格式语句的基本格式CSS语句的基本格式如下：语句的基本格式如下：选择符选择符 属性属性1:属性值属性值1;属性属性2:属性值属性值2 Page 8其中：选择符（其中：选择符（selector）用来指定该规则所适）用来指定该规则所适用的元素，由一个或多个元素名或特定的标识构用的元素，由一个或多个元素名或特定的标识构成；紧跟其后的是用花括号成；紧跟其后的是用花括号“ ”括

6、起来的若干括起来的若干对属性名与相应的属性值，用来对选择符所指定对属性名与相应的属性值，用来对选择符所指定的元素设置具体的显示样式。的元素设置具体的显示样式。注意：花括号中的每一个属性名与相应的属性值注意：花括号中的每一个属性名与相应的属性值之间须用冒号之间须用冒号“:”分隔；而各对属性之间则须用分隔；而各对属性之间则须用分号分号“;”隔开。隔开。Page 92CSS中的注释中的注释样式表文件也可以包含注释语句，添加注样式表文件也可以包含注释语句，添加注释文字有助于样式表更具可读性。注释语释文字有助于样式表更具可读性。注释语句由斜线加上星号句由斜线加上星号“/*”作为开始，以星号作为开始，以星

7、号加斜线加斜线“*/”作为结束，在这两个特定标记作为结束，在这两个特定标记之间可以输入任何想要说明的文字。之间可以输入任何想要说明的文字。Page 103CSS中字母的大小写中字母的大小写对于对于IE 浏览器而言，浏览器而言，CSS中字母的大小写中字母的大小写是不加区分的。但当是不加区分的。但当CSS应用于应用于XML文档文档时，忽略字母的大小写将会带来一定的问时，忽略字母的大小写将会带来一定的问题。如果想使用题。如果想使用CSS来显示来显示XML文档，就文档，就应该让文档中各种元素的名称都完全不同，应该让文档中各种元素的名称都完全不同，而不仅仅是字母大小写的不同。而不仅仅是字母大小写的不同。

8、Page 114CSS中属性的继承中属性的继承通常情况下，在通常情况下，在CSS中为某个元素所设置中为某个元素所设置的显示格式属性会影响到该元素所包含的的显示格式属性会影响到该元素所包含的所有子元素，除非这些子元素重新设置了所有子元素，除非这些子元素重新设置了不同的格式属性。不同的格式属性。Page 125在在CSS使用中文使用中文由于由于CSS1在支持多种字符集方面表现不佳，在支持多种字符集方面表现不佳，在在CSS2中针对此问题作了改进。如果要在中针对此问题作了改进。如果要在CSS中使用中文简体字符集，需要在中使用中文简体字符集，需要在CSS文件的第一行加上如下指令：文件的第一行加上如下指令

9、：charset gb2312;Page 134.2.2 CSS选择器选择器css选择器有许多种，其实这么多选择器，完全可以选择器有许多种，其实这么多选择器，完全可以分为两类：分为两类：标签选择器（标签选择器（*是特殊情况），是特殊情况）， 可以是单标签，也可可以是单标签，也可以是上下文多标签；以是上下文多标签； 属性选择器（属性选择器（id和和class都是属性，特殊的属性）；都是属性，特殊的属性）；Page 14通用选择通用选择 *通用选择器通用选择器 * ，最常用的就是，最常用的就是 *margin:0; box-sizing:border-box;。单标签选择单标签选择 最通用的选择模

10、式。最通用的选择模式。多标签选择（多标签选择（使用多个元素与多个规则使用多个元素与多个规则）Page 15多个元素应用一个规则：多个元素应用一个规则：Title,author,price,memo margin:8px一个元素应用多个规则：一个元素应用多个规则：title display:blocktitle font-size:12pt;font-weight:boldPage 16class 选择器用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。 class 选择器在XML中以class属性表示, 在 CSS 中，类选择器以一个点“.”号显示。例

11、子：book_02.xml,book_02.css Page 17id 选择器可以为标有特定 id 的 XML 元素指定特定的样式。XML元素以id属性来设置id选择器,CSS 中 id 选择器以 # 来定义。Page 18使用使用style属性可以直接在属性可以直接在XML中设置元素中设置元素的显示样式。如果元素的的显示样式。如果元素的style属性设置的属性设置的显示格式与样式表中设定的显示格式冲突，显示格式与样式表中设定的显示格式冲突，则则style设定的样式拥有优先权。用法与设定的样式拥有优先权。用法与CSS中设置元素样式语法相似。中设置元素样式语法相似。Page 19父选择器父选择器

12、 子选择器子选择器 ：满足父选择器下的：满足父选择器下的子选择器条件；两者中间用空格隔开。子选择器条件；两者中间用空格隔开。Page 204.2.3 CSS属性与属性值属性与属性值1属性关键字属性关键字2色彩属性值色彩属性值（1）使用英文色彩名称）使用英文色彩名称（2）使用各种）使用各种RGB表示方式表示方式3尺寸属性值尺寸属性值（1）绝对尺寸值）绝对尺寸值（2）相对尺寸值）相对尺寸值（3）百分比尺寸值）百分比尺寸值4URL属性值属性值Page 214.3.1 设置显示属性设置显示属性 元素的元素的display属性控制了浏览器显示该元素属性控制了浏览器显示该元素文字的基本方法。可为文字的基本

13、方法。可为display属性指定下面属性指定下面4种种属性值中的任何一种。属性值中的任何一种。block将元素以块方式显示，通过换行与其将元素以块方式显示，通过换行与其他元素分开显示；他元素分开显示；inline在同一行显示元素；在同一行显示元素；none隐藏元素，使元素在页面中不可见；隐藏元素，使元素在页面中不可见；list-item以列表方式显示元素。以列表方式显示元素。Page 224.3.2 设置字型属性设置字型属性1font-family属性属性2font-size属性属性3font-style属性属性4font-weight 属性属性5font-variant 属性属性6font

14、属性属性Page 234.3.3 设置色彩属性设置色彩属性 与色彩设置有关的属性包括与色彩设置有关的属性包括color、background-color和和border-color等，其中等，其中应用最多的是应用最多的是color属性。可以使用英文的属性。可以使用英文的颜色名称，也可以使用任何一种颜色名称，也可以使用任何一种RGB 格式格式来作为色彩属性值。来作为色彩属性值。Page 244.3.4 设置边框属性设置边框属性1border-style属性属性2border-color属性属性3border-width属性属性4border属性属性Page 254.3.5 设置布局属性设置布局属

15、性1设置元素位置与大小设置元素位置与大小2margin属性属性3padding属性属性Page 264.3.6 设置背景属性设置背景属性1background-color属性属性2background-image属性属性3background-repeat属性属性4background-position属性属性5background-attachment属性属性Page 274.3.7 设置文本属性设置文本属性1letter-spacing属性属性2word-spacing属性属性3vertical-align属性属性4text-align属性属性5text-indent属性属性6line-h

16、eight属性属性7text-transform属性属性8text-decoration属性属性Page 284.4.1 使用一般链接指令使用一般链接指令 一般可以在一般可以在XML文档的开头使用文档的开头使用xml:stylesheet处理指令将指定的处理指令将指定的CSS样式表链接样式表链接进来。其格式为：进来。其格式为：其中：其中：?xml:stylesheet表示当前表示当前XML文档在显示时需文档在显示时需要使用样式单；要使用样式单；type=text/css 表示使用表示使用CSS类型的样式单；类型的样式单；href=url用来指定样式单文件的用来指定样式单文件的URL。Page

17、294.4.2 使用使用import指令指令 允许在样式表中使用允许在样式表中使用 import 指令来引入指令来引入一个或多个独立保存的样式表，即将这些样式表一个或多个独立保存的样式表，即将这些样式表包含的规则添加到当前样式表中来。其格式为：包含的规则添加到当前样式表中来。其格式为：import url(StyleSheetURL); 其中其中StyleSheetURL 表示想要引入的样式表表示想要引入的样式表文件的文件的URL，可以是本地或网络上样式表文件的，可以是本地或网络上样式表文件的绝对路径或相对路径。绝对路径或相对路径。 注意：本指令必须放置在注意：本指令必须放置在CSS样式表的开

18、头，样式表的开头，且尾部的分号且尾部的分号“；”不能少。不能少。Page 304.4.3 样式应用说明样式应用说明如果如果XML文档中的某些元素添加了文档中的某些元素添加了STYLE属性，则浏览器将根据这个属性，则浏览器将根据这个STYLE属性设属性设定的属性值来显示这些元素，而不管在定的属性值来显示这些元素，而不管在CSS样式表中作了何种设置。样式表中作了何种设置。在在CSS中的上下文选择符，比一般的选择中的上下文选择符，比一般的选择符具有更高的优先权。符具有更高的优先权。如果没有为子元素设置特定的样式规则，如果没有为子元素设置特定的样式规则，将会自动继承父元素的规则。将会自动继承父元素的规则。Page 31如果在样式表中并没有为某个元素设置样如果在样式表中并没