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

第5章使用樣式表格式化XML文檔5.1CSS概述5.2XML中引用CSS5.3使用CSS屬性設(shè)置XML文檔5.4元素定位5.5綜合實(shí)例5.6本章小結(jié)習(xí)題5

5.1CSS概述

CSS是CascadingStyleSheet(層疊樣式表)的縮寫，它是萬維聯(lián)盟(W3C)在1996年制定并發(fā)布的網(wǎng)頁排版樣式標(biāo)準(zhǔn)，是網(wǎng)頁排版標(biāo)記語言。CSS文檔是純文本文檔，可以使用文本編輯器進(jìn)行編輯。CSS通過對選擇符進(jìn)行設(shè)定，實(shí)現(xiàn)對網(wǎng)頁中的字體、顏色、背景、圖片以及其他元素的統(tǒng)一控制。CSS把表現(xiàn)樣式文檔和HTML文檔或XML文檔內(nèi)容進(jìn)行分離，簡化了Web頁面編寫過程和網(wǎng)站維護(hù)的工作。

CSS在應(yīng)用中具有兩個(gè)不同層次的標(biāo)準(zhǔn)：CSS1和CSS2。CSS1發(fā)布于1996年12月17日，提供簡單樣式機(jī)制，網(wǎng)頁設(shè)計(jì)者通過附屬樣式對HTML表現(xiàn)進(jìn)行描述。CSS1的易讀性和可寫性都比較強(qiáng)。CSS2發(fā)布于1998年5月12日，它包含CSS1所有的特色和功能，在多個(gè)領(lǐng)域進(jìn)行了完善。CSS2支持多媒體樣式表，使用者能夠根據(jù)不同的輸出設(shè)備為文檔定制不同的表現(xiàn)樣式。

5.2XML中引用CSS

鏈接CSS和XML文檔有多種方式。在XML文檔中可以使用HTML:STYLE標(biāo)記直接引用CSS顯示XML元素，也可以使用處理指令xml:stylesheet將外部CSS引入到XML文檔中格式化XML，還可以使用style屬性在XML文檔的元素標(biāo)記內(nèi)直接設(shè)置XML元素的顯示格式。5.2.1內(nèi)部CSS引用

可以使用HTML:STYLE標(biāo)記創(chuàng)建內(nèi)聯(lián)樣式，在XML文檔中直接使用HTML:STYLE標(biāo)記引用CSS格式化XML元素。

內(nèi)部CSS引用的語法格式如下：

<HTML:STYLE>

CSS樣式指令

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

案例說明：使用內(nèi)嵌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>西安電子科技大學(xué)出版社</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>本書比較系統(tǒng)全面地介紹了軟件工程的瀑布模型、增量模型、結(jié)構(gòu)化方法、Jackson方法、面向?qū)ο箝_發(fā)方法。全書共16章。概述了軟件工程、各種生存周期模型和開發(fā)方法......</Abstract>

56</Book>案例分析：例5-1中的第02行使用處理指令xml-stylesheet聲明使用CSS顯示XML文檔。第03行聲明了XHTML默認(rèn)命名空間，第04行和第43行中的STYLE屬于該命名空間。第05行至第42行為CSS樣式指令，該指令序列格式化顯示第44行至第56行的XML文檔。程序ch5-1.xml的運(yùn)行結(jié)果如圖5-1所示。圖5-1使用內(nèi)部CSS顯示描述圖書信息的XML文檔5.2.2外部CSS引用

XML文檔本身不含有樣式信息，可以通過引用外部獨(dú)立的CSS文件定義文檔的表現(xiàn)形式。具體的方法是，將CSS定義的樣式存儲(chǔ)為一個(gè)獨(dú)立的文件，在XML文檔的序言區(qū)使用操作指令<?xml-stylesheet?>引用外部CSS樣式表。

外部CSS引用的語法格式為：

<?xml-stylesheettype="text/css"href="css_uri"?>對這一格式的說明如下：

(1)?type屬性：指出使用的樣式表種類，CSS樣式表則為“text/css”。

(2)?href屬性指定外部CSS文件路徑?？梢允峭ㄟ^網(wǎng)址標(biāo)識(shí)的文件路徑，也可以是具體的磁盤文件路徑。

(3)獨(dú)立存儲(chǔ)的CSS文件通常使用擴(kuò)展名?.css?！纠?-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>西安電子科技大學(xué)出版社</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>本書比較系統(tǒng)全面地介紹了軟件工程的瀑布模型、增量模型、結(jié)構(gòu)化方法、Jackson方法、面向?qū)ο箝_發(fā)方法。全書共16章。概述了軟件工程、各種生存周期模型和開發(fā)方法......</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屬性創(chuàng)建的內(nèi)聯(lián)樣式和外部CSS引用樣式混合使用。當(dāng)STYLE屬性顯示樣式與外部CSS顯示樣式?jīng)_突時(shí)，瀏覽器優(yōu)先使用文檔中的STYLE顯示樣式?！纠?-4】

案例說明：內(nèi)嵌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>西安電子科技大學(xué)出版社</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>本書比較系統(tǒng)全面地介紹了軟件工程的瀑布模型、增量模型、結(jié)構(gòu)化方法、Jackson方法、面向?qū)ο箝_發(fā)方法。全書共16章。概述了軟件工程、各種生存周期模型和開發(fā)方法......</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屬性設(shè)置XML文檔

CSS中使用選擇符格式化XML。選擇符使用的語法規(guī)則如下：

選擇符{

屬性1：屬性值1；

屬性2：屬性值2：

}

“選擇符”一般為一個(gè)或多個(gè)XML元素標(biāo)記，“屬性”用于控制元素的各種特性。5.3.1顯示屬性設(shè)置

CSS使用display屬性設(shè)置元素的顯示方式。

【語法】

display:none|block|inline|list-item

【取值】

none：隱藏元素，使元素在頁面中不可見。

block：將元素顯示在塊中，塊級(jí)元素通過換行與其他元素分隔。

inline：以內(nèi)聯(lián)方式顯示元素，元素內(nèi)容緊接在前一元素內(nèi)容之后。

display：以列表方式顯示元素。例5-5中語句02設(shè)置Book元素顯示在塊中。語句11、語句15、語句23和語句37分別設(shè)置Book元素的子元素Title、Author、PubInfo和Abstract塊顯示方式。語句31和語句34定義PubInfo元素的子元素Publisher、PubDate、ISBN、Price以內(nèi)聯(lián)方式顯示在同一行。5.3.2字體設(shè)置

CSS使用font設(shè)置字體屬性。其語法如下：

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

1．font-style屬性

該屬性用于設(shè)置或檢索對象中的字體樣式。

【語法】

font-style:normal|italic|oblique

【取值】

normal：默認(rèn)值。正常的字體。

italic：斜體。對于沒有斜體變量的特殊字體，將應(yīng)用oblique。

oblique：傾斜的字體。

2．font-variant屬性

該屬性用于設(shè)置或檢索對象中的文本是否為小型的大寫字母。

【語法】

font-variant:normal|small-caps

【取值】

normal：默認(rèn)值。正常的字體。

small-caps：小型的大寫字母字體。

3．font-weight屬性

該屬性用于設(shè)置或檢索對象中的文本字體的粗細(xì)。

【語法】

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

【取值】

normal：默認(rèn)值。正常的字體，相當(dāng)于400。聲明此值將取消之前任何設(shè)置。

bold：粗體。相當(dāng)于700，也相當(dāng)于b對象的作用。

bolder：比normal粗。

lighter：比normal細(xì)。

100：字體至少像200那樣細(xì)。

200：字體至少像100那樣粗，像300那樣細(xì)。

300：字體至少像200那樣粗，像400那樣細(xì)。

400：相當(dāng)于normal。

500：字體至少像400那樣粗，像600那樣細(xì)。

600：字體至少像500那樣粗，像700那樣細(xì)。

700：相當(dāng)于bold。

800：字體至少像700那樣粗，像900那樣細(xì)。

900：字體至少像800那樣粗。

4．font-size屬性

該屬性用于設(shè)置或檢索對象中的字體尺寸。

【語法】

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

【取值】

xx-small：絕對字體尺寸——最小。根據(jù)對象字體進(jìn)行調(diào)整。

x-small：絕對字體尺寸——較小。根據(jù)對象字體進(jìn)行調(diào)整。

small：絕對字體尺寸——小。根據(jù)對象字體進(jìn)行調(diào)整。

medium：默認(rèn)值——正常。絕對字體尺寸。根據(jù)對象字體進(jìn)行調(diào)整。

large：絕對字體尺寸——大。根據(jù)對象字體進(jìn)行調(diào)整。

x-large：絕對字體尺寸——較大。根據(jù)對象字體進(jìn)行調(diào)整。

xx-large：絕對字體尺寸——最大。根據(jù)對象字體進(jìn)行調(diào)整。

larger：相對字體尺寸。相對于父對象中字體尺寸進(jìn)行相對增大。使用成比例的em單位計(jì)算。

smaller：相對字體尺寸。相對于父對象中字體尺寸進(jìn)行相對減小。使用成比例的em單位計(jì)算。

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

5．line-height屬性

該屬性用于檢索或設(shè)置對象的行高，即字體最底端與字體內(nèi)部頂端之間的距離。

【語法】

line-height:normal|length

【取值】

normal：默認(rèn)值。默認(rèn)行高。

length：百分比、固定行間距或數(shù)字，如150%，10px，2。其百分比取值是基于字體的高度尺寸。

6．font-family屬性

該屬性用于設(shè)置或檢索對象中文本的字體名稱序列。其默認(rèn)值為“TimesNewRoman”。序列可包含嵌入字體。

【語法】

font-family:name

【取值】

name：字體名稱。按優(yōu)先順序排列，以逗號(hào)隔開。如果字體名稱包含空格，則應(yīng)使用引號(hào)括起?！纠?-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行設(shè)置Book元素及其子元素首選字體為“宋體”。第07行設(shè)置Title元素為粗體顯示。第08行設(shè)置Title元素字號(hào)為25px。第12行～第14行設(shè)置Author元素行高為字號(hào)的1.5倍、斜體、大小為10px顯示。第18行和第19行設(shè)置元素PubInfo行高為字號(hào)的2.5倍，大小為10px顯示。第23行設(shè)置Abstract元素字號(hào)大小為15px。5.3.3字體顏色設(shè)置

CSS使用color屬性設(shè)置字體顏色。color屬性用于檢索或設(shè)置對象的文本顏色，無默認(rèn)值。注意，用顏色名稱指定color不被一些瀏覽器接受。但使用RGB值指定顏色能被所有瀏覽器識(shí)別并正確顯示。

【語法】

color:color

【取值】

color:指定顏色。

顏色單位：#RRGGBB，rgb(R,G,B)，ColorName。

#RRGGBB

【參數(shù)】

RR：紅色值。十六進(jìn)制正整數(shù)。

GG：綠色值。十六進(jìn)制正整數(shù)。

BB：藍(lán)色值。十六進(jìn)制正整數(shù)。

【說明】

以上三個(gè)參數(shù)的取值范圍為00～FF。參數(shù)必須是兩位數(shù)，對于只有一位的，應(yīng)在前面補(bǔ)零。如果每個(gè)參數(shù)各自在兩位上的數(shù)字都相同，那么本單位也可縮寫為#RGB的方式。例如，#FF8800可以縮寫為#F80。

rgb(R,G,B)

【參數(shù)】

R：紅色值。正整數(shù)|百分?jǐn)?shù)。

G：綠色值。正整數(shù)|百分?jǐn)?shù)。

B：藍(lán)色值。正整數(shù)|百分?jǐn)?shù)。

【說明】

以上三個(gè)參數(shù)，正整數(shù)值的取值范圍為0～255，百分?jǐn)?shù)值的取值范圍為0.0%～100.0%。超出范圍的數(shù)值將被截至其最接近的取值極限。并非所有瀏覽器都支持使用百分?jǐn)?shù)值。

ColorName

ColorName即顏色名稱。不同的瀏覽器會(huì)有不同的預(yù)定義顏色名稱，例如color:red?！纠?-7】

案例說明：使用字體顏色屬性設(shè)置例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行設(shè)置Title元素的字體顏色為“#191970”。第16行設(shè)置Author元素的字體顏色為“#FF0000”。第22行設(shè)置PubInfo元素及其子元素的字體顏色為“blue”。5.3.4背景顏色與圖像設(shè)置

CSS使用background屬性設(shè)置背景顏色或背景圖像。其語法如下：

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

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

1．background-color屬性

該屬性用于設(shè)置或檢索對象的背景顏色。

【語法】

background-color:transparent|color

【取值】

transparent：默認(rèn)值。背景色透明。

color：指定顏色。

2．background-image屬性

該屬性用于設(shè)置或檢索對象的背景圖像(background-image)。當(dāng)背景顏色與背景圖像都被設(shè)定了時(shí)，背景圖像將覆蓋于背景顏色之上。

【語法】

background-image:none|url(url)

【取值】

none：默認(rèn)值。無背景圖像。

url(url)：使用絕對或相對url地址指定背景圖像。

3．background-repeat屬性

該屬性用于設(shè)置或檢索對象的背景圖像是否及如何鋪排。必須先指定對象的背景圖像。

【語法】

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

【取值】

repeat：默認(rèn)值。背景圖像在縱向和橫向上平鋪。

no-repeat：背景圖像不平鋪。

repeat-x：背景圖像僅在橫向上平鋪。

repeat-y：背景圖像僅在縱向上平鋪。

4．background-attachment屬性

該屬性用于設(shè)置或檢索背景圖像是隨對象內(nèi)容滾動(dòng)還是固定的。

【語法】

background-attachment:scroll|fixed

【取值】

scroll：默認(rèn)值。背景圖像隨對象內(nèi)容滾動(dòng)。

fixed：背景圖像固定。

5．background-position屬性

該屬性用于設(shè)置或檢索對象的背景圖像位置。必須先指定background-image屬性。該屬性定位不受對象的補(bǔ)丁(padding)屬性設(shè)置的影響。其默認(rèn)值為為0%0%，此時(shí)背景圖片將被定位于對象不包括補(bǔ)丁的內(nèi)容區(qū)域的左上角。如果只指定了一個(gè)值，該值將用于橫坐標(biāo)，縱坐標(biāo)將默認(rèn)為50%。如果指定了兩個(gè)值，第二個(gè)值將用于縱坐標(biāo)。如果設(shè)置值為rightcenter，因?yàn)閞ight作為橫坐標(biāo)值將會(huì)覆蓋center值，所以背景圖片將被居右定位。

【語法】

background-position:length||length

background-position:position||position

【取值】

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

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

案例說明：包含圖片引用標(biāo)記的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>西安電子科技大學(xué)出版社</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>本書比較系統(tǒng)全面地介紹了軟件工程的瀑布模型、增量模型、結(jié)構(gòu)化方法、Jackson方法、面向?qū)ο箝_發(fā)方法。全書共16章。概述了軟件工程、各種生存周期模型和開發(fā)方法......</Abstract>

17</Book>

案例分析：例5-8中ch5-4.xml文檔描述了一本圖書的信息，第15行使用Picture元素定義圖書的封面圖片，使用屬性ID標(biāo)識(shí)封面圖片?！纠?-9】

案例說明：使用CSS標(biāo)記設(shè)置例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行設(shè)置整個(gè)Book元素及其子元素的背景色為“#FFE4C4”。第08行設(shè)置元素Title的背景色為“#A9A9A9”，子元素“Title”當(dāng)前背景色覆蓋其父元素Book的背景色。第25行使用選擇符Picture#1在頁面中顯示圖片，Picture為例5-8中第15行定義的圖片元素，1為Pictrue元素的屬性ID的值。第27行至第30行引入背景圖片“cover1.jpg”，圖片浮動(dòng)在元素Abstract顯示文字的左邊，圖片寬75px，高105px。5.3.5文本設(shè)置

CSS中文本設(shè)置的常用屬性為text-indent、text-align、vertical-align和text-decoration。

1．text-indent屬性

該屬性用于檢索或設(shè)置對象中的文本的縮進(jìn)，默認(rèn)值為0。在被另一個(gè)對象(如br)斷開的對象內(nèi)不能應(yīng)用本屬性。

【語法】

text-indent:length

【取值】

length：固定縮進(jìn)值或基于父元素寬度的百分比縮進(jìn)，允許為負(fù)值。

2．text-align屬性

該屬性用于設(shè)置或檢索對象中文本的對齊方式。此屬性作用于所有塊對象(blockelements)。在一個(gè)div對象里的所有塊對象會(huì)繼承此屬性值。假如屬性沒有設(shè)置，這個(gè)參數(shù)將獲取null值。

【語法】

text-align:left|right|center|justify

【取值】

left：默認(rèn)值。左對齊。

right：右對齊。

center：居中對齊。

justify：兩端對齊。

3．vertical-align屬性

該屬性用于設(shè)置或檢索對象內(nèi)容的垂直對齊方式。

【語法】

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

【取值】

auto：CSS1根據(jù)layout-flow屬性的值對齊對象內(nèi)容。

baseline：默認(rèn)值。將支持valign特性的對象的內(nèi)容與基線對齊。

sub：垂直對齊文本的下標(biāo)。

super：垂直對齊文本的上標(biāo)。

top：將支持valign特性的對象的內(nèi)容與對象頂端對齊。

text-top：將支持valign特性的對象的文本與對象頂端對齊。

middle：將支持valign特性的對象的內(nèi)容與對象中部對齊。

bottom：將支持valign特性的對象的內(nèi)容與對象底端對齊。

text-bottom：將支持valign特性的對象的文本與對象頂端對齊。

length：由浮點(diǎn)數(shù)字和單位標(biāo)識(shí)符組成的長度值或百分?jǐn)?shù)，可為負(fù)數(shù)。它定義由基線算起的偏移量?；€對于數(shù)值來說為0，對于百分?jǐn)?shù)來說就是0%。

4．text-decoration屬性

該屬性用于設(shè)置文本對象的特殊效果，如給文本對象加下劃線、刪除線或圍繞線等。

【語法】

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

【取值】

line-through：在文本中間畫線。

overline：在文本頂端之上畫一條線。

underline：在文本底端之下畫一條線。

none：默認(rèn)值，不加任何修飾。

inherit：使用圍繞線。

【例5-10】

案例說明：使用CSS文本屬性設(shè)置例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行設(shè)置Title元素標(biāo)題文字居中。第15行和第16行設(shè)置Author元素文字居中，并加下劃線。第41行設(shè)置Abstract元素文字首行宿進(jìn)30px。5.3.6邊距、邊框與填充設(shè)置

可以在元素周圍增加邊框(border)，在元素與其邊框之間設(shè)定空格填充(padding)，還可以設(shè)置邊框與周圍元素之間的邊距(margins)。邊框、空格填充、邊距和元素主體可以用盒子模型來描述，如圖5-2所示。圖5-2邊距、邊框、填充區(qū)和元素主體之間的關(guān)系

1．設(shè)置邊距

CSS使用margin-top、margin-bottom、margin-left、margin-right設(shè)定上、下、左、右頁邊距。也可以使用margin一次性設(shè)定頁邊距。如果提供全部四個(gè)參數(shù)值，將按上－右－下－左的順序作用于四邊。如果只提供一個(gè)，將用于全部的四邊；如果提供兩個(gè)，則第一個(gè)用于上－下，第二個(gè)用于左－右；如果提供三個(gè)，則第一個(gè)用于上，第二個(gè)用于左－右，第三個(gè)用于下。

2．設(shè)置邊框

CSS使用border-top、border-bottom、border-left、border-right設(shè)定上、下、左、右邊框線樣式(border-style)、寬度(border-width)和顏色(border-color)。也可以用border一次性設(shè)定邊框線。使用border同時(shí)設(shè)定上、下、左、右邊框線時(shí)，其應(yīng)用規(guī)則與margin一致。

border-top-color、border-top-style、border-top-width分別設(shè)置對象上邊框的顏色、樣式和寬度；border-right-color、border-right-style、border-right-width分別設(shè)置對象右邊框的顏色、樣式和寬度；border-bottom-color、border-bottom-style、border-bottom-width分別設(shè)置對象下邊框的顏色、樣式和寬度；border-left-color、border-left-style、border-left-width設(shè)置對象左邊框的顏色、樣式和寬度。

border-style——設(shè)置邊框線樣式。

【語法】

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

【取值】

none：默認(rèn)值。無邊框。

hidden：隱藏邊框。IE不支持。

dotted：點(diǎn)線邊框。

dashed：虛線邊框。

solid：實(shí)線邊框。

double：雙線邊框。

groove：根據(jù)border-color的值畫3D凹槽。

ridge：根據(jù)border-color的值畫3D凸槽。

inset：根據(jù)border-color的值畫3D凹邊。

outset：根據(jù)border-color的值畫3D凸邊。

border-width——設(shè)置對象邊框的寬度。

【語法】

border-width:medium|thin|thick|length

【取值】

medium：默認(rèn)值。默認(rèn)寬度。

thin：小于默認(rèn)寬度。

thick：大于默認(rèn)寬度。

length：固定值，如10px。

border-color——設(shè)定對象邊框的顏色。

【語法】

border-color:color

【取值】

color：指定顏色。

3．填充設(shè)置

CSS使用填充(padding)指定邊框(border)和元素主體(content)之間的間距，屬性值為絕對長度或父元素寬度的百分比，同時(shí)指定上、下、左、右填充間距時(shí)，其應(yīng)用規(guī)則與margin一致。也可以使用padding-top、padding-bottom、padding-left、padding-right來單獨(dú)設(shè)置上、下、左、右填充區(qū)。

【例5-11】

案例說明：使用邊距、邊框和填充屬性設(shè)置例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行設(shè)置Book元素塊四個(gè)頁邊距為5px，第05行設(shè)置內(nèi)部元素到上邊框線10px，第06行設(shè)置內(nèi)部元素到下邊框線80px，第07、08行設(shè)置內(nèi)部元素分別到左、右邊框線為10px，第09行設(shè)置Book元素塊的邊框線為黑色的實(shí)線、線寬為1px。

5.4元素定位

CSS在確定XML元素在頁面中的位置時(shí)，把XML文檔中各個(gè)元素放在一個(gè)簡單的方框中(矩形容器)，通過控制矩形容器在網(wǎng)頁中的位置以及元素在容器中的位置來實(shí)現(xiàn)頁面內(nèi)容的精確定位。圖5-3是基于CSS矩形容器思想創(chuàng)建的網(wǎng)頁頁面布局示意圖。裝有XML元素的各容器可以通過CSS定位技術(shù)放在網(wǎng)頁的任何地方。它們之間可以是包含和被包含的關(guān)系，也可以是重疊關(guān)系。常用的CSS定位XML元素規(guī)則有相對定位(relative)和絕對定位(absolute)。圖5-3使用CSS布局網(wǎng)頁元素定位的基本語法與取值如下：

【語法】

position:static|relative|absolute

【取值】

static：默認(rèn)值。無特殊定位，對象遵循HTML定位規(guī)則。

relative：相對定位。對象相對于原始位置做偏移。使用left、right、top、bottom等屬性相對于其原始位置進(jìn)行相對定位。

absolute：絕對定位。對象相對于瀏覽器左上角或上級(jí)元素左上角做位置移動(dòng)。使用left、right、top、bottom等屬性相對于其父對象進(jìn)行絕對定位。5.4.1相對定位

元素以其原始位置的左上角作為坐標(biāo)原點(diǎn)確定自身位置的新坐標(biāo)。圖5-4中的元素A相對于其原始位置向下移動(dòng)的距離由top確定，向右移動(dòng)的距離由left確定。圖5-4元素相對定位5.4.2絕對定位

元素以瀏覽器左上角或其上一級(jí)元素的左上角為坐標(biāo)原點(diǎn)來確定自身的位置。圖5-5中元素A在網(wǎng)頁中的位置由top屬性和left屬性確定，與其他兄弟子元素在網(wǎng)頁中的位置

無關(guān)。圖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>軟件系統(tǒng)開發(fā)技術(shù)(修訂版)</Title>

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

07<PubInfo>08<Publisher>西安電子科技大學(xué)出版社</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>本書介紹大型軟件系統(tǒng)的開發(fā)技術(shù)，主要是目前軟件界最為流行也較實(shí)用的結(jié)構(gòu)化方法，包括支持這一方法的工具和環(huán)境；還簡述了其他一些方法和技術(shù)，如Jackson方法、面向?qū)ο蟮能浖_發(fā)方法、測試和維護(hù)技術(shù)以及數(shù)據(jù)庫設(shè)計(jì)等，使材料更系統(tǒng)化，并有所比較。</Abstract>18</Book>

19<Book>

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

21<Author>鄧良松，劉海巖，陸麗娜</Author>

22<PubInfo>

23<Publisher>西安電子科技大學(xué)出版社</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>本書比較系統(tǒng)全面地介紹了軟件工程的瀑布模型、增量模型、結(jié)構(gòu)化方法、Jackson方法、面向?qū)ο箝_發(fā)方法。全書共16章。概述了軟件工程、各種生存周期模型和開發(fā)方法......</Abstract>

33</Book>

34</BookList>【例5-13】

案例說明：使用CSS的定位屬性設(shè)置例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行設(shè)置Book元素塊相對于它左上角原始位置向左做相對偏移150px。第06行設(shè)置Book元素塊的寬度為550px。

5.5綜合實(shí)例

下面使用本章介紹的知識(shí)為圖書出版領(lǐng)域或圖書館設(shè)計(jì)一個(gè)圖書簡要信息顯示目錄。圖書目錄簡要信息包含圖書標(biāo)題、圖書作者、出版社信息、圖書簡介信息、圖書類別信息和封面插圖，其中出版社信息包含出版社名稱、出版日期、國際標(biāo)準(zhǔn)書號(hào)和書價(jià)。圖書簡要信息目錄詞匯表如圖5-6所示。圖5-6圖書簡要信息目錄詞匯表

1．圖書簡要信息列表

現(xiàn)有計(jì)算機(jī)類圖書和小說類圖書兩類圖書，并各含兩本圖書，具體數(shù)據(jù)描述如下：

計(jì)算機(jī)類圖書(IT)

書名：軟件系統(tǒng)開發(fā)技術(shù)(修訂版)

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

出版社：西安電子科技大學(xué)出版社

出版日期：2002-1-1

ISBN：7-5606-0492-7

價(jià)格：16.00元簡介：本書介紹大型軟件系統(tǒng)的開發(fā)技術(shù)，主要是目前軟件界最為流行也較實(shí)用的結(jié)構(gòu)化方法，包括支持這一方法的工具和環(huán)境，還簡述了其他一些方法和技術(shù)，如Jackson方法、面向?qū)ο蟮能浖_發(fā)方法、測試和維護(hù)技術(shù)以及數(shù)據(jù)庫設(shè)計(jì)等，使材料更系統(tǒng)化，并有所比較。書名：軟件工程(第二版)

作者：鄧良松劉海巖陸麗娜

出版社：西安電子科技大學(xué)出版社

出版日期：2004-9-1

ISBN：7-5606-0924-4

價(jià)格：22.00元

簡介：本書比較系統(tǒng)全面地介紹了軟件工程的瀑布模型、增量模型、結(jié)構(gòu)化方法、Jackson方法、面向?qū)ο箝_發(fā)方法。全書共16章。概述了軟件工程、各種生存周期模型和開發(fā)方法……

小說類圖書(Novels)

書名：基督山伯爵(上下冊)

作者：大仲馬(法)

出版社：上海譯文出版社

出版日期：2001-8-1

ISBN：7-5327-2651-7

價(jià)格：38.00元簡介：本書是法國著名作家大仲馬的名作，描述一位青年海員遭人陷害被監(jiān)禁，越獄后報(bào)恩復(fù)仇的故事。主要內(nèi)容有船抵馬賽、父與子、加泰羅尼亞人、陰謀、訂婚宴席、代理檢察官、審訊、伊夫堡……書名：諸葛孔明

作者：陳舜臣

出版社：北京圖書館出版社

出版日期：2001-8-1

ISBN：7-5013-2419-0

價(jià)格：39.00元

簡介：三國局勢的關(guān)鍵人物諸葛孔明，他的生涯之所以感動(dòng)眾人，正是因?yàn)樗翘谷坏孛鎸y世的誠實(shí)，以及壯志未酬身先死的悲劇性……

2．編寫圖書簡要信息的XML文檔

根據(jù)前面詞匯表的定義和圖書簡要信息列表來組織XML文檔內(nèi)容。結(jié)構(gòu)標(biāo)準(zhǔn)化工作可以按照如下幾個(gè)步驟進(jìn)行。

第一步：定義根元素起始標(biāo)記<Library>和結(jié)束標(biāo)記</Library>，文檔的其他內(nèi)容包含在根元素中。

第二步：定義根元素下的子元素。使用標(biāo)記Category對圖書分類，設(shè)置元素Category的屬性Type說明圖書的類別。01<Library>

02<CategoryType=圖書類別>

03圖書的具體內(nèi)容定義

04</Category>

05</Library>

第三步：定義圖書類別(Category)內(nèi)的具體圖書(Book)。具體圖書信息包含圖書標(biāo)題(Title)、圖書作者(Author)、出版社信息(PubInfo)、封面插圖(Picture)和圖書簡介信息(Abstract)。01<Book>

02<Title>圖書標(biāo)題</Title>

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

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

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

06<Abstract>內(nèi)容簡介</Abstract>

07</Book>第四步：定義PubInfo元素的子元素。出版社信息一般包含如下子元素：出版社名稱(Publisher)、出版日期(PubDate)、國際標(biāo)準(zhǔn)書號(hào)(ISBN)和書價(jià)(Price)。其中書價(jià)為處理方便可以分解為兩個(gè)子元素：貨幣單位(Unit)和單價(jià)金額(Amount)。結(jié)構(gòu)描述如下：01<PubInfo>

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

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

04<ISBN>國際標(biāo)準(zhǔn)書號(hào)</ISBN>

05<Price>

06<Unit>貨幣單位</Unit>

07<Amount>單價(jià)金額</Amount>

08</Price>

09</PubInfo>

根據(jù)以上結(jié)構(gòu)化標(biāo)準(zhǔn)和XML聲明語句，上述四本圖書的簡要信息可以用例5-14中的book.xml文檔進(jìn)行描述?！纠?-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>