《XML案例教程》课件第5章

第5章使用样式表格式化XML文档5.1CSS概述5.2XML中引用CSS5.3使用CSS属性设置XML文档5.4元素定位5.5综合实例5.6本章小结习题5

5.1CSS概述

CSS是CascadingStyleSheet(层叠样式表)的缩写，它是万维联盟(W3C)在1996年制定并发布的网页排版样式标准，是网页排版标记语言。CSS文档是纯文本文档，可以使用文本编辑器进行编辑。CSS通过对选择符进行设定，实现对网页中的字体、颜色、背景、图片以及其他元素的统一控制。CSS把表现样式文档和HTML文档或XML文档内容进行分离，简化了Web页面编写过程和网站维护的工作。

CSS在应用中具有两个不同层次的标准：CSS1和CSS2。CSS1发布于1996年12月17日，提供简单样式机制，网页设计者通过附属样式对HTML表现进行描述。CSS1的易读性和可写性都比较强。CSS2发布于1998年5月12日，它包含CSS1所有的特色和功能，在多个领域进行了完善。CSS2支持多媒体样式表，使用者能够根据不同的输出设备为文档定制不同的表现样式。

5.2XML中引用CSS

链接CSS和XML文档有多种方式。在XML文档中可以使用HTML:STYLE标记直接引用CSS显示XML元素，也可以使用处理指令xml:stylesheet将外部CSS引入到XML文档中格式化XML，还可以使用style属性在XML文档的元素标记内直接设置XML元素的显示格式。5.2.1内部CSS引用

可以使用HTML:STYLE标记创建内联样式，在XML文档中直接使用HTML:STYLE标记引用CSS格式化XML元素。

内部CSS引用的语法格式如下：

<HTML:STYLE>

CSS样式指令

</HTML:STYLE>【例5-1】

案例说明：使用内嵌CSS显示XML文档。

程序名称：ch5-1.xml

01<?xmlversion="1.0"encoding="UTF-8"?>

02<?xml-stylesheettype="text/css"?>

03<Bookxmlns:HTML="/Profiles/XHTML-transitional">

04<HTML:STYLE>

05Book {06display:block;

07background-color:#FFE4C4;

08margin:5px;

09padding-top:10px;

10padding-bottom:30px;

11padding-left:10px;

12padding-right:10px;

13}

14Title {

15display:block;16text-align:center;

17font-family:"华文隶书",Arial,Helvetica,sans-serif;

18font-wight:bold;

19font-size:25px;

20}

21Author {

22display:block;

23text-align:center;

24text-decoration:underline;

25line-height:150%;26font-family:Arial,Helvetica,sans-serif;

27font-size:10px;

28}

29PubInfo {

30display:block;

31text-align:center;

32text-decoration:underline;

33line-height:250%;

34font-family:Arial,Helvetica,sans-serif;

35font-size:10px;

36}37Abstract {

38display:block;

39text-indent:30px;

40font-family:"楷体_GB2312",Arial,Helvetica,sans-serif;

41font-size:15px;

42}

43</HTML:STYLE>

44<Title>软件工程(第二版)</Title>

45<Author>邓良松，刘海岩，陆丽娜</Author>

46<PubInfo>47<Publisher>西安电子科技大学出版社</Publisher>

48<PubDate>2004-9-1</PubDate>

49<ISBN>7-5606-0924-4</ISBN>

50<Price>

51<Unit>￥</Unit>

52<Amount>22.00</Amount>

53</Price>

54</PubInfo>55<Abstract>本书比较系统全面地介绍了软件工程的瀑布模型、增量模型、结构化方法、Jackson方法、面向对象开发方法。全书共16章。概述了软件工程、各种生存周期模型和开发方法......</Abstract>

56</Book>案例分析：例5-1中的第02行使用处理指令xml-stylesheet声明使用CSS显示XML文档。第03行声明了XHTML默认命名空间，第04行和第43行中的STYLE属于该命名空间。第05行至第42行为CSS样式指令，该指令序列格式化显示第44行至第56行的XML文档。程序ch5-1.xml的运行结果如图5-1所示。图5-1使用内部CSS显示描述图书信息的XML文档5.2.2外部CSS引用

XML文档本身不含有样式信息，可以通过引用外部独立的CSS文件定义文档的表现形式。具体的方法是，将CSS定义的样式存储为一个独立的文件，在XML文档的序言区使用操作指令<?xml-stylesheet?>引用外部CSS样式表。

外部CSS引用的语法格式为：

<?xml-stylesheettype="text/css"href="css_uri"?>对这一格式的说明如下：

(1) type属性：指出使用的样式表种类，CSS样式表则为“text/css”。

(2) href属性指定外部CSS文件路径。可以是通过网址标识的文件路径，也可以是具体的磁盘文件路径。

(3)独立存储的CSS文件通常使用扩展名 .css。【例5-2】

案例说明：描述图书信息的XML文档。

程序名称：ch5-2.xml

01<?xmlversion="1.0"encoding="UTF-8"?>

02<?xml-stylesheettype="text/css"href="ch5-2.css"?>

03<Book>

04<Title>软件工程(第二版)</Title>

05<Author>邓良松，刘海岩，陆丽娜</Author>

06<PubInfo>07<Publisher>西安电子科技大学出版社</Publisher>

08<PubDate>2004-09-01</PubDate>

09<ISBN>7-5606-0924-4</ISBN>

10<Price>

11<Unit>￥</Unit>

12<Amount>22.00</Amount>

13</Price>

14</PubInfo>15<Abstract>本书比较系统全面地介绍了软件工程的瀑布模型、增量模型、结构化方法、Jackson方法、面向对象开发方法。全书共16章。概述了软件工程、各种生存周期模型和开发方法......</Abstract>

16</Book>

例5-2中第02行引用例5-3中的外部CSS文件ch5-2.css格式化显示ch5-2.xml文档。

【例5-3】

案例说明：使用外部CSS文档格式化例5-2中的ch5-2.xml文档。程序名称：ch5-2.css

01Book {

02display:block;

03background-color:#FFE4C4;

04margin:5px;

05padding-top:10px;

06padding-bottom:30px;

07padding-left:10px;

08padding-right:10px;

09}10Title {

11display:block;

12text-align:center;

13font-weight:bold;

14font-size:25px;

15font-family:"华文隶书",Arial,Helvetica,sans-serif;

16}

17Author {

18display:block;

19text-align:center;

20text-decoration:underline;21line-height:150%;

22font-size:10px;

23font-family:Arial,Helvetica,sans-serif;

24}

25PubInfo {

26display:block;

27text-align:center;

28text-decoration:underline;

29line-height:250%;

30font-size:10px;

31font-family:Arial,Helvetica,sans-serif;32}

33Abstract {

34display:block;

35text-indent:30px;

36font-size:15px;

37font-family:"楷体_GB2312",Arial,Helvetica,sans-serif;

38}5.2.3混合引用CSS

使用STYLE属性创建的内联样式和外部CSS引用样式混合使用。当STYLE属性显示样式与外部CSS显示样式冲突时，浏览器优先使用文档中的STYLE显示样式。【例5-4】

案例说明：内嵌STLYE属性的XML文档。

程序名称：ch5-3.xml

01<?xmlversion="1.0"encoding="gb2312"?>

02<?xml-stylesheettype="text/css"href="ch5-3.css"?>

03<Book>

04<TitleSTYLE="font-family:'华文隶书';font-weight:bold;font-size:25px;">软件工程(第二版)</Title>

05<Author>邓良松，刘海岩，陆丽娜</Author>

06<PubInfo>07<Publisher>西安电子科技大学出版社</Publisher>

08<PubDate>2004-09-01</PubDate>

09<ISBN>7-5606-0924-4</ISBN>

10<Price>

11<Unit>￥</Unit>

12<Amount>22.00</Amount>

13</Price>

14</PubInfo>15<Abstract>本书比较系统全面地介绍了软件工程的瀑布模型、增量模型、结构化方法、Jackson方法、面向对象开发方法。全书共16章。概述了软件工程、各种生存周期模型和开发方法......</Abstract>

16</Book>例5-4中第02行引用例5-5中的外部CSS文档ch3-3.css格式化显示ch5-3.xml文档，第04行使用style属性直接格式化显示元素Title。

【例5-5】

案例说明：使用外部CSS文件格式化例5-4中的ch5-3.xml文档。程序名称：ch3-3.css

01Book {

02display:block;

03background-color:#FFE4C4;

04margin:5px;

05padding-top:10px;

06padding-bottom:30px;

07padding-left:10px;

08padding-right:10px;

09}10Title {

11display:block;

12text-align:center;

13}

14Author {

15display:block;

16text-align:center;

17text-decoration:underline;

18line-height:150%;

19font-family:Arial,Helvetica,sans-serif;20font-size:10px;

21}

22PubInfo {

23display:block;

24text-align:center;

25text-decoration:underline;

26line-height:250%;

27font-family:Arial,Helvetica,sans-serif;

28font-size:10px;

29}

30Publisher,PubDate,ISBN {31 display:inline;

32 }

33Price {

34 display:inline;

35 }

36Abstract {

37display:block;

38text-indent:30px;

39font-family:"楷体_GB2312",Arial,Helvetica,sans-serif;

40font-size:15px;

41}

5.3使用CSS属性设置XML文档

CSS中使用选择符格式化XML。选择符使用的语法规则如下：

选择符{

属性1：属性值1；

属性2：属性值2：

}

“选择符”一般为一个或多个XML元素标记，“属性”用于控制元素的各种特性。5.3.1显示属性设置

CSS使用display属性设置元素的显示方式。

【语法】

display:none|block|inline|list-item

【取值】

none：隐藏元素，使元素在页面中不可见。

block：将元素显示在块中，块级元素通过换行与其他元素分隔。

inline：以内联方式显示元素，元素内容紧接在前一元素内容之后。

display：以列表方式显示元素。例5-5中语句02设置Book元素显示在块中。语句11、语句15、语句23和语句37分别设置Book元素的子元素Title、Author、PubInfo和Abstract块显示方式。语句31和语句34定义PubInfo元素的子元素Publisher、PubDate、ISBN、Price以内联方式显示在同一行。5.3.2字体设置

CSS使用font设置字体属性。其语法如下：

font:font-style||font-variant||font-weight||font-size||line-height||font-family

1．font-style属性

该属性用于设置或检索对象中的字体样式。

【语法】

font-style:normal|italic|oblique

【取值】

normal：默认值。正常的字体。

italic：斜体。对于没有斜体变量的特殊字体，将应用oblique。

oblique：倾斜的字体。

2．font-variant属性

该属性用于设置或检索对象中的文本是否为小型的大写字母。

【语法】

font-variant:normal|small-caps

【取值】

normal：默认值。正常的字体。

small-caps：小型的大写字母字体。

3．font-weight属性

该属性用于设置或检索对象中的文本字体的粗细。

【语法】

font-weight:normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900

【取值】

normal：默认值。正常的字体，相当于400。声明此值将取消之前任何设置。

bold：粗体。相当于700，也相当于b对象的作用。

bolder：比normal粗。

lighter：比normal细。

100：字体至少像200那样细。

200：字体至少像100那样粗，像300那样细。

300：字体至少像200那样粗，像400那样细。

400：相当于normal。

500：字体至少像400那样粗，像600那样细。

600：字体至少像500那样粗，像700那样细。

700：相当于bold。

800：字体至少像700那样粗，像900那样细。

900：字体至少像800那样粗。

4．font-size属性

该属性用于设置或检索对象中的字体尺寸。

【语法】

font-size:xx-small|x-small|small|medium|large|x-large|xx-large|larger|smaller|length

【取值】

xx-small：绝对字体尺寸——最小。根据对象字体进行调整。

x-small：绝对字体尺寸——较小。根据对象字体进行调整。

small：绝对字体尺寸——小。根据对象字体进行调整。

medium：默认值——正常。绝对字体尺寸。根据对象字体进行调整。

large：绝对字体尺寸——大。根据对象字体进行调整。

x-large：绝对字体尺寸——较大。根据对象字体进行调整。

xx-large：绝对字体尺寸——最大。根据对象字体进行调整。

larger：相对字体尺寸。相对于父对象中字体尺寸进行相对增大。使用成比例的em单位计算。

smaller：相对字体尺寸。相对于父对象中字体尺寸进行相对减小。使用成比例的em单位计算。

length：百分比或固定长度值，如150%，10pt，10px。其百分比取值是基于父对象中字体的尺寸。

5．line-height属性

该属性用于检索或设置对象的行高，即字体最底端与字体内部顶端之间的距离。

【语法】

line-height:normal|length

【取值】

normal：默认值。默认行高。

length：百分比、固定行间距或数字，如150%，10px，2。其百分比取值是基于字体的高度尺寸。

6．font-family属性

该属性用于设置或检索对象中文本的字体名称序列。其默认值为“TimesNewRoman”。序列可包含嵌入字体。

【语法】

font-family:name

【取值】

name：字体名称。按优先顺序排列，以逗号隔开。如果字体名称包含空格，则应使用引号括起。【例5-6】

案例说明：使用字体属性显示例5-2中ch5-2.xml文档。

程序名称：ch5-4.css

01Book {

02display:block;

03font-family:"宋体",Arial,Helvetica,sans-serif;

04}

05Title {

06display:block;

07font-weight:bold;

08font-size:25px;09}

10Author {

11display:block;

12line-height:150%;

13font-style:italic;

14font-size:10px;

15}

16PubInfo {

17display:block;18line-height:250%;

19font-size:10px;

20}

21Abstract {

22display:block;

23font-size:15px;

24}案例分析：例5-6元素Book、Title、Author、PubInfo和Abstract均为块显示方式，每一块元素显示完后要换行。第03行设置Book元素及其子元素首选字体为“宋体”。第07行设置Title元素为粗体显示。第08行设置Title元素字号为25px。第12行～第14行设置Author元素行高为字号的1.5倍、斜体、大小为10px显示。第18行和第19行设置元素PubInfo行高为字号的2.5倍，大小为10px显示。第23行设置Abstract元素字号大小为15px。5.3.3字体颜色设置

CSS使用color属性设置字体颜色。color属性用于检索或设置对象的文本颜色，无默认值。注意，用颜色名称指定color不被一些浏览器接受。但使用RGB值指定颜色能被所有浏览器识别并正确显示。

【语法】

color:color

【取值】

color:指定颜色。

颜色单位：#RRGGBB，rgb(R,G,B)，ColorName。

#RRGGBB

【参数】

RR：红色值。十六进制正整数。

GG：绿色值。十六进制正整数。

BB：蓝色值。十六进制正整数。

【说明】

以上三个参数的取值范围为00～FF。参数必须是两位数，对于只有一位的，应在前面补零。如果每个参数各自在两位上的数字都相同，那么本单位也可缩写为#RGB的方式。例如，#FF8800可以缩写为#F80。

rgb(R,G,B)

【参数】

R：红色值。正整数|百分数。

G：绿色值。正整数|百分数。

B：蓝色值。正整数|百分数。

【说明】

以上三个参数，正整数值的取值范围为0～255，百分数值的取值范围为0.0%～100.0%。超出范围的数值将被截至其最接近的取值极限。并非所有浏览器都支持使用百分数值。

ColorName

ColorName即颜色名称。不同的浏览器会有不同的预定义颜色名称，例如color:red。【例5-7】

案例说明：使用字体颜色属性设置例5-2中ch5-2.xml文档元素的字体颜色。

程序名称：ch5-5.css

01Book {

02display:block;

03font-family:"宋体",Arial,Helvetica,sans-serif;

04}

05Title {

06display:block;

07color:#191970;08font-weight:bold;

09font-size:25px;

10}

11Author {

12display:block;

13line-height:150%;

14font-style:italic;

15font-size:10px;

16color:#FF0000;

17}18PubInfo {

19display:block;

20line-height:250%;

21font-size:10px;

22color:blue;

23}

24Abstract {

25display:block;

26font-size:15px;

27}案例分析：第07行设置Title元素的字体颜色为“#191970”。第16行设置Author元素的字体颜色为“#FF0000”。第22行设置PubInfo元素及其子元素的字体颜色为“blue”。5.3.4背景颜色与图像设置

CSS使用background属性设置背景颜色或背景图像。其语法如下：

background:background-color||background-image||

background-repeat||background-attachment||background-position

1．background-color属性

该属性用于设置或检索对象的背景颜色。

【语法】

background-color:transparent|color

【取值】

transparent：默认值。背景色透明。

color：指定颜色。

2．background-image属性

该属性用于设置或检索对象的背景图像(background-image)。当背景颜色与背景图像都被设定了时，背景图像将覆盖于背景颜色之上。

【语法】

background-image:none|url(url)

【取值】

none：默认值。无背景图像。

url(url)：使用绝对或相对url地址指定背景图像。

3．background-repeat属性

该属性用于设置或检索对象的背景图像是否及如何铺排。必须先指定对象的背景图像。

【语法】

background-repeat:repeat|no-repeat|repeat-x|repeat-y

【取值】

repeat：默认值。背景图像在纵向和横向上平铺。

no-repeat：背景图像不平铺。

repeat-x：背景图像仅在横向上平铺。

repeat-y：背景图像仅在纵向上平铺。

4．background-attachment属性

该属性用于设置或检索背景图像是随对象内容滚动还是固定的。

【语法】

background-attachment:scroll|fixed

【取值】

scroll：默认值。背景图像随对象内容滚动。

fixed：背景图像固定。

5．background-position属性

该属性用于设置或检索对象的背景图像位置。必须先指定background-image属性。该属性定位不受对象的补丁(padding)属性设置的影响。其默认值为为0%0%，此时背景图片将被定位于对象不包括补丁的内容区域的左上角。如果只指定了一个值，该值将用于横坐标，纵坐标将默认为50%。如果指定了两个值，第二个值将用于纵坐标。如果设置值为rightcenter，因为right作为横坐标值将会覆盖center值，所以背景图片将被居右定位。

【语法】

background-position:length||length

background-position:position||position

【取值】

length：百分比或固定长度值。例如58%，56%是从左上角算起，右移58%，下移56%。

position：top|center|bottom|left|center|right【例5-8】

案例说明：包含图片引用标记的XML文档。

程序名称：ch5-4.xml

01<?xmlversion="1.0"encoding="gb2312"?>

02<?xml-stylesheettype="text/css"href="ch5-6.css"?>

03<Book>

04<Title>软件工程(第二版)</Title>

05<Author>邓良松，刘海岩，陆丽娜</Author>

06<PubInfo>07<Publisher>西安电子科技大学出版社</Publisher>

08<PubDate>2004-09-01</PubDate>

09<ISBN>7-5606-0924-4</ISBN>

10<Price>

11<Unit>￥</Unit>

12<Amount>22.00</Amount>

13</Price>

14</PubInfo>

15<PictureID="1"/>16<Abstract>本书比较系统全面地介绍了软件工程的瀑布模型、增量模型、结构化方法、Jackson方法、面向对象开发方法。全书共16章。概述了软件工程、各种生存周期模型和开发方法......</Abstract>

17</Book>

案例分析：例5-8中ch5-4.xml文档描述了一本图书的信息，第15行使用Picture元素定义图书的封面图片，使用属性ID标识封面图片。【例5-9】

案例说明：使用CSS标记设置例5-8中ch5-4.xml文档元素的背景颜色和背景图像。

程序名称：ch5-6.css

01Book {

02display:block;

03background-color:#FFE4C4;

04font-family:"宋体",Arial,Helvetica,sans-serif;

05}

06Title {

07display:block;08background-color:#A9A9A9;

09font-weight:bold;

10font-size:25px;

11}

12Author {

13display:block;

14line-height:150%;

15font-style:italic;

16font-size:10px;

17color:#FF0000;

18}19PubInfo {

20display:block;

21line-height:250%;

22font-size:10px;

23color:blue;

24}

25Picture#1 {

26display:inline;

27background-image:url(cover1.jpg);

28float:left;29width:75px;

30height:105px;

31}

32Abstract {

33display:inline;

34font-size:15px;

35}案例分析：例5-8第03行设置整个Book元素及其子元素的背景色为“#FFE4C4”。第08行设置元素Title的背景色为“#A9A9A9”，子元素“Title”当前背景色覆盖其父元素Book的背景色。第25行使用选择符Picture#1在页面中显示图片，Picture为例5-8中第15行定义的图片元素，1为Pictrue元素的属性ID的值。第27行至第30行引入背景图片“cover1.jpg”，图片浮动在元素Abstract显示文字的左边，图片宽75px，高105px。5.3.5文本设置

CSS中文本设置的常用属性为text-indent、text-align、vertical-align和text-decoration。

1．text-indent属性

该属性用于检索或设置对象中的文本的缩进，默认值为0。在被另一个对象(如br)断开的对象内不能应用本属性。

【语法】

text-indent:length

【取值】

length：固定缩进值或基于父元素宽度的百分比缩进，允许为负值。

2．text-align属性

该属性用于设置或检索对象中文本的对齐方式。此属性作用于所有块对象(blockelements)。在一个div对象里的所有块对象会继承此属性值。假如属性没有设置，这个参数将获取null值。

【语法】

text-align:left|right|center|justify

【取值】

left：默认值。左对齐。

right：右对齐。

center：居中对齐。

justify：两端对齐。

3．vertical-align属性

该属性用于设置或检索对象内容的垂直对齐方式。

【语法】

vertical-align:auto|baseline|sub|super|top|text-top|middle|bottom|text-bottom|length

【取值】

auto：CSS1根据layout-flow属性的值对齐对象内容。

baseline：默认值。将支持valign特性的对象的内容与基线对齐。

sub：垂直对齐文本的下标。

super：垂直对齐文本的上标。

top：将支持valign特性的对象的内容与对象顶端对齐。

text-top：将支持valign特性的对象的文本与对象顶端对齐。

middle：将支持valign特性的对象的内容与对象中部对齐。

bottom：将支持valign特性的对象的内容与对象底端对齐。

text-bottom：将支持valign特性的对象的文本与对象顶端对齐。

length：由浮点数字和单位标识符组成的长度值或百分数，可为负数。它定义由基线算起的偏移量。基线对于数值来说为0，对于百分数来说就是0%。

4．text-decoration属性

该属性用于设置文本对象的特殊效果，如给文本对象加下划线、删除线或围绕线等。

【语法】

text-decoration:line-through|overline|underline|none|inherit

【取值】

line-through：在文本中间画线。

overline：在文本顶端之上画一条线。

underline：在文本底端之下画一条线。

none：默认值，不加任何修饰。

inherit：使用围绕线。

【例5-10】

案例说明：使用CSS文本属性设置例5-8中ch5-4.xml文档元素。

程序名称：ch5-7.css

01Book{

02display:block;

03background-color:#FFE4C4;

04}

05Title {

06display:block;

07text-align:center;08font-weight:bold;

09font-size:25px;

10font-family:"华文隶书",Arial,Helvetica,sans-serif;

11background-color:#A9A9A9;

12}

13Author {

14display:block;

15text-align:center;

16text-decoration:underline;

17line-height:150%;

18font-style:italic;19font-size:10px;

20font-family:Arial,Helvetica,sans-serif;

21color:#FF0000;

22}

23PubInfo {

24display:block;

25text-align:center;

26text-decoration:underline;

27line-height:250%;

28font-size:10px;

29font-family:Arial,Helvetica,sans-serif;30color:blue;

31}

32Picture#1 {

33display:inline;

34background-image:url(cover1.jpg);

35float:left;

36width:75px;

37height:105px;

38}

39Abstract {40display:block;

41text-indent:30px;

42font-size:15px;

43font-family:“楷体_GB2312”,Arial,Helvetica,sans-serif;

44}

案例分析：例5-10第07行设置Title元素标题文字居中。第15行和第16行设置Author元素文字居中，并加下划线。第41行设置Abstract元素文字首行宿进30px。5.3.6边距、边框与填充设置

可以在元素周围增加边框(border)，在元素与其边框之间设定空格填充(padding)，还可以设置边框与周围元素之间的边距(margins)。边框、空格填充、边距和元素主体可以用盒子模型来描述，如图5-2所示。图5-2边距、边框、填充区和元素主体之间的关系

1．设置边距

CSS使用margin-top、margin-bottom、margin-left、margin-right设定上、下、左、右页边距。也可以使用margin一次性设定页边距。如果提供全部四个参数值，将按上－右－下－左的顺序作用于四边。如果只提供一个，将用于全部的四边；如果提供两个，则第一个用于上－下，第二个用于左－右；如果提供三个，则第一个用于上，第二个用于左－右，第三个用于下。

2．设置边框

CSS使用border-top、border-bottom、border-left、border-right设定上、下、左、右边框线样式(border-style)、宽度(border-width)和颜色(border-color)。也可以用border一次性设定边框线。使用border同时设定上、下、左、右边框线时，其应用规则与margin一致。

border-top-color、border-top-style、border-top-width分别设置对象上边框的颜色、样式和宽度；border-right-color、border-right-style、border-right-width分别设置对象右边框的颜色、样式和宽度；border-bottom-color、border-bottom-style、border-bottom-width分别设置对象下边框的颜色、样式和宽度；border-left-color、border-left-style、border-left-width设置对象左边框的颜色、样式和宽度。

border-style——设置边框线样式。

【语法】

border-style:none|hidden|dotted|dashed|solid|double|groove|ridge|inset|outset

【取值】

none：默认值。无边框。

hidden：隐藏边框。IE不支持。

dotted：点线边框。

dashed：虚线边框。

solid：实线边框。

double：双线边框。

groove：根据border-color的值画3D凹槽。

ridge：根据border-color的值画3D凸槽。

inset：根据border-color的值画3D凹边。

outset：根据border-color的值画3D凸边。

border-width——设置对象边框的宽度。

【语法】

border-width:medium|thin|thick|length

【取值】

medium：默认值。默认宽度。

thin：小于默认宽度。

thick：大于默认宽度。

length：固定值，如10px。

border-color——设定对象边框的颜色。

【语法】

border-color:color

【取值】

color：指定颜色。

3．填充设置

CSS使用填充(padding)指定边框(border)和元素主体(content)之间的间距，属性值为绝对长度或父元素宽度的百分比，同时指定上、下、左、右填充间距时，其应用规则与margin一致。也可以使用padding-top、padding-bottom、padding-left、padding-right来单独设置上、下、左、右填充区。

【例5-11】

案例说明：使用边距、边框和填充属性设置例5-8中程序ch5-4.xml文档元素。

程序名称：ch5-8.css

01Book {

02display:block;

03background-color:#FFE4C4;

04margin:5px;

05padding-top:10px;

06padding-bottom:80px;

07padding-left:10px;08padding-right:10px;

09border:1pxsolidblack;

10}

11Title {

12display:block;

13text-align:center;

14font-weight:bold;

15font-size:25px;

16font-family:"华文隶书",Arial,Helvetica,sans-serif;

17}18Author {

19display:block;

20text-align:center;

21text-decoration:underline;

22line-height:150%;

23font-style:italic;

24font-size:10px;

25font-family:Arial,Helvetica,sans-serif;

26color:#FF0000;

27}28PubInfo {

29display:block;

30text-align:center;

31text-decoration:underline;

32line-height:250%;

33font-size:10px;

34font-family:Arial,Helvetica,sans-serif;

35color:blue;

36}37Picture#1 {

38display:inline;

39background-image:url(cover1.jpg);

40float:left;

41width:75px;

42height:105px;

43}44Abstract {

45display:block;

46text-indent:30px;

47font-size:15px;

48font-family:“楷体_GB2312”,Arial,Helvetica,sans-serif;

49}

案例分析：第04行设置Book元素块四个页边距为5px，第05行设置内部元素到上边框线10px，第06行设置内部元素到下边框线80px，第07、08行设置内部元素分别到左、右边框线为10px，第09行设置Book元素块的边框线为黑色的实线、线宽为1px。

5.4元素定位

CSS在确定XML元素在页面中的位置时，把XML文档中各个元素放在一个简单的方框中(矩形容器)，通过控制矩形容器在网页中的位置以及元素在容器中的位置来实现页面内容的精确定位。图5-3是基于CSS矩形容器思想创建的网页页面布局示意图。装有XML元素的各容器可以通过CSS定位技术放在网页的任何地方。它们之间可以是包含和被包含的关系，也可以是重叠关系。常用的CSS定位XML元素规则有相对定位(relative)和绝对定位(absolute)。图5-3使用CSS布局网页元素定位的基本语法与取值如下：

【语法】

position:static|relative|absolute

【取值】

static：默认值。无特殊定位，对象遵循HTML定位规则。

relative：相对定位。对象相对于原始位置做偏移。使用left、right、top、bottom等属性相对于其原始位置进行相对定位。

absolute：绝对定位。对象相对于浏览器左上角或上级元素左上角做位置移动。使用left、right、top、bottom等属性相对于其父对象进行绝对定位。5.4.1相对定位

元素以其原始位置的左上角作为坐标原点确定自身位置的新坐标。图5-4中的元素A相对于其原始位置向下移动的距离由top确定，向右移动的距离由left确定。图5-4元素相对定位5.4.2绝对定位

元素以浏览器左上角或其上一级元素的左上角为坐标原点来确定自身的位置。图5-5中元素A在网页中的位置由top属性和left属性确定，与其他兄弟子元素在网页中的位置

无关。图5-5元素绝对定位【例5-12】

案例说明：描述若干图书信息的XML文档。

程序说明：ch5-5.xml

01<?xmlversion="1.0"encoding="gb2312"?>

02<?xml-stylesheettype="text/css"href="ch5-9.css"?>

03<BookList>

04<Book>

05<Title>软件系统开发技术(修订版)</Title>

06<Author>潘锦平，施小英，姚天昉</Author>

07<PubInfo>08<Publisher>西安电子科技大学出版社</Publisher>

09<PubDate>2002-01-01</PubDate>

10<ISBN>7-5606-0492-7</ISBN>

11<Price>

12<Unit>￥</Unit>

13<Amount>16.00</Amount>

14</Price>

15</PubInfo>

16<PictureID="1"/>17<Abstract>本书介绍大型软件系统的开发技术，主要是目前软件界最为流行也较实用的结构化方法，包括支持这一方法的工具和环境；还简述了其他一些方法和技术，如Jackson方法、面向对象的软件开发方法、测试和维护技术以及数据库设计等，使材料更系统化，并有所比较。</Abstract>18</Book>

19<Book>

20<Title>软件工程(第二版)</Title>

21<Author>邓良松，刘海岩，陆丽娜</Author>

22<PubInfo>

23<Publisher>西安电子科技大学出版社</Publisher>

24<PubDate>2004-09-01</PubDate>

25<ISBN>7-5606-0924-4</ISBN>

26<Price>28<Unit>￥</Unit>

27<Amount>22.00</Amount>

29</Price>

30</PubInfo>

31<PictureID="2"/>

32<Abstract>本书比较系统全面地介绍了软件工程的瀑布模型、增量模型、结构化方法、Jackson方法、面向对象开发方法。全书共16章。概述了软件工程、各种生存周期模型和开发方法......</Abstract>

33</Book>

34</BookList>【例5-13】

案例说明：使用CSS的定位属性设置例5-12中ch5-5.xml文档元素。

程序说明：ch5-9.css

01Book {

02display:block;

03background-color:#FFE4C4;

04position:relative;

05left:150px;

06width:550px;

07margin:5px;08padding-top:10px;

09padding-bottom:30px;

10padding-left:10px;

11padding-right:10px;

12border:1pxsolidblack;

13}

14Title {

15display:block;

16text-align:center;

17font-weight:bold;18font-size:25px;

19font-family:"华文隶书",Arial,Helvetica,sans-serif;

20}

21Author {

22display:block;

23text-align:center;

24text-decoration:underline;

25line-height:150%;

26font-style:italic;

27font-size:10px;28font-family:Arial,Helvetica,sans-serif;

29color:#FF0000;

30}

31PubInfo {

32display:block;

33text-align:center;

34text-decoration:underline;

35line-height:250%;

36font-size:10px;

37font-family:Arial,Helvetica,sans-serif;38color:blue;

39}

40Picture#1 {

41display:inline;

42background-image:url(cover1.jpg);

43float:left;

44width:75px;

45height:105px;

46}47Abstract {

48display:block;

49text-indent:30px;

50font-size:15px;

51font-family:“楷体_GB2312”,Arial,Helvetica,sans-serif;

52}

案例分析：第04行和第05行设置Book元素块相对于它左上角原始位置向左做相对偏移150px。第06行设置Book元素块的宽度为550px。

5.5综合实例

下面使用本章介绍的知识为图书出版领域或图书馆设计一个图书简要信息显示目录。图书目录简要信息包含图书标题、图书作者、出版社信息、图书简介信息、图书类别信息和封面插图，其中出版社信息包含出版社名称、出版日期、国际标准书号和书价。图书简要信息目录词汇表如图5-6所示。图5-6图书简要信息目录词汇表

1．图书简要信息列表

现有计算机类图书和小说类图书两类图书，并各含两本图书，具体数据描述如下：

计算机类图书(IT)

书名：软件系统开发技术(修订版)

作者：潘锦平施小英姚天昉

出版社：西安电子科技大学出版社

出版日期：2002-1-1

ISBN：7-5606-0492-7

价格：16.00元简介：本书介绍大型软件系统的开发技术，主要是目前软件界最为流行也较实用的结构化方法，包括支持这一方法的工具和环境，还简述了其他一些方法和技术，如Jackson方法、面向对象的软件开发方法、测试和维护技术以及数据库设计等，使材料更系统化，并有所比较。书名：软件工程(第二版)

作者：邓良松刘海岩陆丽娜

出版社：西安电子科技大学出版社

出版日期：2004-9-1

ISBN：7-5606-0924-4

价格：22.00元

简介：本书比较系统全面地介绍了软件工程的瀑布模型、增量模型、结构化方法、Jackson方法、面向对象开发方法。全书共16章。概述了软件工程、各种生存周期模型和开发方法……

小说类图书(Novels)

书名：基督山伯爵(上下册)

作者：大仲马(法)

出版社：上海译文出版社

出版日期：2001-8-1

ISBN：7-5327-2651-7

价格：38.00元简介：本书是法国著名作家大仲马的名作，描述一位青年海员遭人陷害被监禁，越狱后报恩复仇的故事。主要内容有船抵马赛、父与子、加泰罗尼亚人、阴谋、订婚宴席、代理检察官、审讯、伊夫堡……书名：诸葛孔明

作者：陈舜臣

出版社：北京图书馆出版社

出版日期：2001-8-1

ISBN：7-5013-2419-0

价格：39.00元

简介：三国局势的关键人物诸葛孔明，他的生涯之所以感动众人，正是因为他那坦然地面对乱世的诚实，以及壮志未酬身先死的悲剧性……

2．编写图书简要信息的XML文档

根据前面词汇表的定义和图书简要信息列表来组织XML文档内容。结构标准化工作可以按照如下几个步骤进行。

第一步：定义根元素起始标记<Library>和结束标记</Library>，文档的其他内容包含在根元素中。

第二步：定义根元素下的子元素。使用标记Category对图书分类，设置元素Category的属性Type说明图书的类别。01<Library>

02<CategoryType=图书类别>

03图书的具体内容定义

04</Category>

05</Library>

第三步：定义图书类别(Category)内的具体图书(Book)。具体图书信息包含图书标题(Title)、图书作者(Author)、出版社信息(PubInfo)、封面插图(Picture)和图书简介信息(Abstract)。01<Book>

02<Title>图书标题</Title>

03<Author>作者或编者姓名</Author>

04<PubInfo>出版社信息</PubInfo>

05<PictureID="封面插图ID"/>

06<Abstract>内容简介</Abstract>

07</Book>第四步：定义PubInfo元素的子元素。出版社信息一般包含如下子元素：出版社名称(Publisher)、出版日期(PubDate)、国际标准书号(ISBN)和书价(Price)。其中书价为处理方便可以分解为两个子元素：货币单位(Unit)和单价金额(Amount)。结构描述如下：01<PubInfo>

02<Publisher>出版社名称</Publisher>

03<PubDate>出版日期</PubDate>

04<ISBN>国际标准书号</ISBN>

05<Price>

06<Unit>货币单位</Unit>

07<Amount>单价金额</Amount>

08</Price>

09</PubInfo>

根据以上结构化标准和XML声明语句，上述四本图书的简要信息可以用例5-14中的book.xml文档进行描述。【例5-14】

案例说明：按类别描述图书信息的XML文档。

程序名称：book.xml

01<?xmlversion="1.0"encoding="UTF-8"?>

02<?xml-stylesheettype="text/css"href="book.css"?>

03<Library>

04<CategoryType="IT">

05<Book>15<Title>