使用CSS格式化XML

《使用CSS格式化XML》由会员分享，可在线阅读，更多相关《使用CSS格式化XML（13页珍藏版）》请在装配图网上搜索。

1、第5章 使用CSS格式化XMLXML 文档的特点是将数据和数据的样式进行了分离，XML文档侧重于数据的存储和传输，数据的显示需通过其它的技术来实现，即层叠样式表CSS（Cascading Style Sheets）和可扩展样式表语言XSL。5.1 CSS技术简介CSS最初是用于制定HTML文档显示格式的，现在用来对XML文档进行简单的样式规划。CSS的主要作用是定义一个标记或一类标记的显示样式，以便实现对于一个页面样式的独立管理。CSS称为“层叠样式表”的“层叠”的意义：当一个文档的两种或多种样式发生矛盾时，执行的效果要按照“层叠规则”来判断。层叠规则：如果标记的样式定义发生冲突时，靠近标记的

2、定义将生效。一个CSS样式表就是一组规则。每个规则给出此规则所适用的元素的名称，和一组适用于此元素具体属性的值。例：book.cssbook display:block;font-size:22pt;name display:block;text-align:center;background-color:#aabb11;color:red;author,price,pubdate display:block;color:blue;例：book.xml XML语言及应用 华拴平 19.00 2006-01-01 5.2 链接CSS和XML文档 使用xml:stylesheet处理指令使用css

3、:stylesheet需要按照如下步骤：（1）创建XML文档；（2）创建格式化XML文档的样式表；（3）将CSS文档和XML文档结合起来，查看结果。一、外部样式文件（样式的直接指定法）：即直接指定某一标记的属性值。例5.1 四大名著.xml 红楼梦 曹雪芹 15.8 主要人物:贾宝玉，林黛玉，薛宝钗 西游记 吴承恩 35.2 主要人物:唐僧，孙悟空，猪八戒，沙僧 三国演义 罗贯中 23.5 主要人物:关羽，诸葛亮，曹操 水浒传 施耐庵 16.8 主要人物:李逵，鲁智深，高球 例5.2 四大名著.CSSbooks display:block;font-size:22pt;book display

4、:block; background-color: #ffbb11; color:blue; margin-top:10px name display:block; color:black; author display:block; color:red; price display:block;最后：将CSS文档和XML文档结合起来，查看结果：在XML头部加一条处理指令：处理指令，也可以：Type：指定样式文档的类型。Href：指定CSS文档的URL，该URL可以是本地路径或Internet的相对路径或绝对路径。绝对路径：注意：应用样式表的处理指令只能放在XML文档序言中的XML声明之后。提

5、示：的作用：（1）告诉IE这里不再使用XML文件的默认样式（树状结构图）。（2）告诉IE使用href指定的样式。问：元素中的价格和其文本内容为什么是蓝色的？提示：如果XML文档中有一个标记没有定义样式，则该标记将使用它的父标记样式，这种机制称为样式的继承。提示：如果没有指定子元素的字号、颜色等属性，则该元素将继承其父元素的属性，不备继承的属性一般有背景、边框等。二、将样式语句嵌入到XML文件当中即直接将样式语句写在XML文档内部。例：四大名著内部样式.xmlcharset GB2312booksdisplay:block;font-size:22pt;book display:block; c

6、olor:blue; margin-top:40px Name display:block; color:red; font-family: 楷体_GB2312; Author display:block; color:green; pricedisplay:block; 红楼梦曹雪芹 15.8 主要人物:贾宝玉，林黛玉，薛宝钗 说明：表示style来自于html标准。charset GB2312，charset规则用来指定样式表使用的字符集，此处为Windows下的汉字字符集GB2312。要设置汉字字体必须有该指令，否则全部为浏览器默认字体，如IE默认汉字字体为宋体（用户也可以自定义）。ch

7、arset规则只在外部样式表文件内使用，只允许使用一次，且必须为样式表的第一行。三、混合的方法指定样式可以综合使用上面两种方法给XML 文档添加样式，当所添加的样式中有些规则发生矛盾时，以内部方法定义的为主。例：四大名著混合样式.xml 使用import指令和!important声明一、使用import指令Import语句是一种文件包含功能，提供了一种将多个CSS文件集成一个CSS文件的途径。语法格式：import url(URL);其中：URL为被引用的样式单地址。注意：l import指令必须放在文件的开头，即任何规则之前。l 如果被引用的样式表中的格式与引用者的格式冲突，则引用者中的格式

8、优先。l 如果引用的多个外部样式表格式冲突，则就近使用其中的格式。l import指令末尾的分号（;）不能少。例 import示例.xml 信管061的帅哥 信管061 刘庆宇例 importschool.cssschool display:block; font-size:20pt; color:blue; margin-top:40px 例 importclass.cssimport url(importschool.css)Class display:block;monitordisplay:block; color:black;二、!important声明“!important”声明用

9、于将规则声明为重要的。其作用是：可以改变默认样式的层叠规则。如把!important声明与属性连接起来，则该属性将不被覆盖。例 importschoolimportant.cssschool font-size:20pt;color:red!importantschool color:blue; 注意：属性与!important之间紧密相连。三、使用多个样式文件一个样式文件可以被多个XML文档调用，同时一个XML文档也能够调用多个样式文件。例 使用多个样式文件1.cssschool font-size:20pt;color:red;例 使用多个样式文件2.cssclass display:bl

10、ock;monitor display:block;color:green;修改 import示例.xml为例 使用多个样式文件.xml 信管061的帅哥 信管061 刘庆宇5.3 CSS样式的使用CSS样式表语法格式：选择符属性1:属性值1;属性2:属性值2; 说明: 选择符:可以是多个元素、带有特定CLASS或ID特性的元素以及其它与元素内容相关的特殊选择符；属性：控制元素的各种特性。 选择元素1、同时选择多个元素例 刘心武.xml 2006001 刘心武 男 This is age: 45 2006002 秦可卿 女 20 2006003 林黛玉 女 16 例 刘心武.cssstuden

11、tsdisplay:block;studentdisplay:block;stuid,namedisplay:block;font-size:20pt;color:blue;name:first-letterfont-size:200%;color:black;sex,agefont-style:italic;sexfont-size:200%;（1）将一个规则同时用于多个元素，元素之间用逗号分隔。stuid,namedisplay:block;font-size:20pt;color:blue;（2）为同一个元素指定多个规则sex,agefont-style:italic;sexfont-s

12、ize:200%;2、伪元素伪元素通常是元素内容的第一个字符或第一行，对伪元素可以使用不同的格式。（1）特殊化首字符，使用first-letter选择name:first-letterfont-size:200%;color:black表示：该元素内容的第一个字符以父元素字号的两倍大小显示。（2）特殊化首行，使用first-line选择3、伪类使用CLASS属性（伪类）为相同元素的不同内容指定不同的格式。即是说，使用CLASS方法，是独立于标记定义了一种样式，哪个标记调用了该样式，哪个标记就会具有使用CLASS所定义的样式。l 第一种方法：（1）在student.css文件中增加：.namec

13、lass font-size:200%;color:red;text-align:center;.femaleclasstext-decoration:underline;color:green;（2）在欲使用该样式的元素中增加属性:class=nameclass或 class=femaleclass例：具体见student.xml 20060814101 孔斌 男 85 85 90 72 4、ID属性ID与CLASS属性类似，用于选择同一元素的不同对象。但ID侧重于定义一个元素的独有特性，CLASS侧重于定义一类元素的公有样式。（1）在刘心武.css文件中增加：#nameid font-si

14、ze:200%;color:purple;text-align:center;#sexidtext-decoration:underline;color:purple;（2）在欲使用该样式的元素中增加属性:id= nameid 或 id=sexid如刘心武.xml中改为： 2006001 刘心武 男 This is age: 45 注意：在同时使用CLASS和ID属性时，如果遇到冲突的情况，将优先选择ID属性指定的方式。5、STYLE属性使用style属性可以将元素格式属性直接放在XML文档中格式化元素。 2006001 刘心武 男 65 提示：当STYLE的显示样式与CSS样式单中的样式冲突

15、时，STYLE样式优先。 在CSS样式单中使用注释语法格式：/* */例：/*这是注释*/* stuid,namedisplay:block;font-size:20pt;color:blue; */ CSS中的属性和属性值CSS规则通过属性的名-值对设定。属性名称：都是CSS的关键字。属性值：分为关键字、颜色、URL和长度共4类。1、CSS关键字一些属性值可以使用关键字来设置，如italic、xx-small等。注意：CSS不区分关键字的大小写。2、颜色值使用颜色值的属性有:l Color（文字颜色）l Background-color（背景色）l Border-color（边框颜色）设置颜

16、色值的4种方式：l 名称：如red、black、gray、green、 fuchsia等l 十进制RGB：rgb(255,0,0)、rgb(255,255,255)、rgb(255,0,0)等l 十六进制RGB：#FFFFFF，#AABB22，#FFCC00等l 百分数：rgb(0%,0%,0%)、rgb(20%,60%,60%)、rgb(100%,30%,50%)等注意：color属性值允许被其子元素继承。3、URL值使用属性值为URL值的属性有：l Background-image（背景图片）l List-style-image（列表样式图片）l List-style（列表样式）URL 值

17、通常放在“url( )”的括号之内。4、长度属性值长度属性值可以使用3种方式表示：l 绝对长度：英寸（in）、厘米（cm）、毫米（mm）、磅（pt）l 相对长度：像素单位（px）l 百分数：是一种相对表示方式。例：sexfont-size:200%;表示sex元素内容以其父元素字号的两倍大小显示。 设置display属性display属性：设置元素内容的显示方式。display属性的4个属性：l none：用于隐藏元素，不显示任何信息。l block：表示所要显示的信息要独占一行（即成为一个段落）。l inline：所要显示的信息在一行内排列，为默认方式。l list-item：以列表方式显示

18、。注意：display属性不能被继承。与list-item相关联的几个属性：例、studentdisplay.css1. list-style-type：列表项前面的项目符号类型默认值为disc(点)。另外有circle、square、decimal、lower-roman、uper-roman、lower-alpha、uper-alpha等。例：studentdisplay:list-item;list-style-type:circle;2. list-style-image：指定图片作为项目符号例：studentdisplay:list-item;list-style-image:url

19、(zhaolin.jpg)3. list-style-image：指定项目符号出现的位置通过属性值inside、outside指定项目符号出现在文本块内和文本块外。4. list-style：简洁方式设定list-item的各种属性例：studentdisplay:list-item;list-style:none inside url(03.gif) 设置whitespace属性：设置文本中的空白（包括空格、制表符和换行符）。其属性值有：Normal：默认值，将文本中的空白压缩成一个空格。Pre：将文本中的所有空白全部保留。Nowrap：将连串空白压缩成衣俄空格，但强调文本中的换行符号。提示

20、：具体情况根据IE的版本号不同而不同。 设置字体属性 CSS1支持六种字体属性：1. font-family（字体的显示风格）属性，例：studentfont-family:隶书;2. font-style（字型风格）属性：normal（正常）、italic（斜体）、oblique（倾斜体）。3. font-size（字体大小）属性：可以使用关键字、相对大小、相对百分比和绝对大小设置属性值。（1）font-size关键字使用xx-small、x-small、small、medium（默认值，）、x-largex-large、xx-large关键字表示字号的绝对大小。（2）相对大小：指相对于父元

21、素而言。使用smaller（比父元素大一些）或large（比父元素小一些），并没有具体的数字可量化。（3）相对百分比：相对于父元素的百分数设置字号大小。如：sexfont-size:200%;（4）绝对大小：使用英寸、厘米、像素和磅等长度值设置字号的绝对大小。Sexfont-size:30;4. font-weight（字体粗细）属性属性值有：Lighter、Normal、Bold、Bolder等。5. font-variant属性值：normal（默认值）、small-caps(全部转变为大写)6. font：用于简洁地以一条规则设置字体样式 设置color属性 设置背景属性用于为元素内容的

22、背景设置一种颜色或一幅图像。1 background-color：设置背景颜色，同color2 background-image：设置背景图片。3background-repeat：指定背景图像的平铺属性。l Repeat：在水平和垂直方向同时平铺。l Repeat-x：仅在水平方向平铺。l Repeat-y：仅在垂直方向平铺。l No_repeat：图像不平铺。例 背景.xml 背景.css3background属性：在一条规则中同时设置多种属性。另外还有：background-repeat、background-attachment、background-attachposition属性。

23、 设置文本属性1. text-decoration（装饰特色）属性，属性值有：l None：默认值l Underline：加下划线l Overline：加上划线l Line-through：加删除线l Blink：使文本闪烁2. text-align（文本块的对齐方式）：left、right、center、justify（两端对齐）注意：在规则中必须将文本以块显示才能使用text-align属性。3. text-transform（大小写转换）的属性，属性值有：l Uppercase：元素中的文本全部大写l Lowercase：元素中的文本全部大写l Capitalize：单词的首字母大写 设

24、置边框属性1. 设置页边距的属性有：margin-top、margn-bottom、margn-left、margn-right和margn，它们分别为设置上、下、左、右和一次设置页边距。例、/*上、下、左、右页边距都是2cm,二者等价*/book margin:2cm 2cm 2cm 2cm book margin:2cm/*上面二者语句等价*/2. 设置边框线样式的属性（Border-style），默认值为none（无边框线）另外，其值为：dotted、dashed、solid、double、groove、ridge、inset、outset3. 设置边框线宽度（border-width、

25、border-top-width、border-right-width、border-bottom-width、border-left-width）4.设置边框线颜色，共有5种属性（ border-color、border-top-color、border-bottom-color、border-left-color）5. 设置边框大小通过设置width与height属性设置。例 book border-style:inset; border-color:silver;/*边框线颜色*/ width:10cm;/*边框线宽度*/ height:4cm; display:block; /*bac

26、kground-color:#AAbb11; color:blue; margin-top:10px;*/ margin:2cm 5.3.11 在XML中使用HTML标记方法：通过名域空间的技术实现。一、在XML文档中显示图形例 显示图形.xml XML语言及应用 华拴平 19.00 2006-01-01 二、在XML文档中使用超连接 XML语言及应用 华拴平 19.00 2006-01-01 动物图片，新闻中心 三、在XML文档中实现表格 XML语言及应用 华拴平 19.00 2006-01-01 动物图片，新闻中心 上机作业：（1）编写一个XML文档，包含不少于8条学生信息（学号、姓名、性别、英语、数学、计算机等相关信息）、不少于8条教工信息（教工号、姓名、性别等相关信息）的纪录。（2）编写其dtd文档或schema文档，并验证其为有效的文档。（3）编写其css文档，以合适的格式显示。