XML程序設(shè)計(jì)第4章

《XML程序設(shè)計(jì)》第4章配合<XML程序設(shè)計(jì)>例子源代碼一起使用Powerpoint制作：耿祥義張躍平XML與CSS2009-10-201第4章導(dǎo)讀本章主要內(nèi)容XML關(guān)聯(lián)CSS標(biāo)記與樣式表設(shè)置文本的顯示方式字體文本樣式邊框顏色和背景顯示圖像設(shè)置鼠標(biāo)的形狀難點(diǎn)設(shè)置文本的顯示方式2009-10-202第4章XML與CSS

XML關(guān)心的是數(shù)據(jù)的結(jié)構(gòu)，并能很好、方便地描述數(shù)據(jù)，但它不提供數(shù)據(jù)的顯示功能。因此，瀏覽器不能直接顯示XML文件中標(biāo)記的文本內(nèi)容，如果想讓瀏覽器顯示XML文件中標(biāo)記的文本內(nèi)容，那么必須以某種方式告訴瀏覽器如何顯示。W3C為XML數(shù)據(jù)顯示發(fā)布了兩個(gè)建議規(guī)范CSS（層疊樣式表）和XSL（可擴(kuò)展樣式語言），當(dāng)XML文件和CSS文件或XSL文件相關(guān)聯(lián)后，瀏覽器將按著CSS文件或XSL文件給出的顯示方式來顯示XML文件中標(biāo)記的文本內(nèi)容。

2009-10-203§4.1初識CSSCSS中的一個(gè)樣式表是一組規(guī)則,通過這組規(guī)則告訴瀏覽器用什么樣式來顯示數(shù)據(jù)。一個(gè)CSS文件就是由若干個(gè)樣式表構(gòu)成的文本文件,該文本文件可以使用“ANSI”或“UTF-8”編碼來保存，文件的擴(kuò)展名是“.css”。一個(gè)樣式表的格式如下：

樣式表名稱{樣式規(guī)則}例：name{display:block;font-size:12pt;font-weight:bold;}

2009-10-204§4.2XML關(guān)聯(lián)CSS

為了讓XML使用層疊樣式表，XML文件必須使用操作指令

<?xml-stylesheethref="樣式表的URI"type="text/css"?>

將當(dāng)前XML文件關(guān)聯(lián)到某個(gè)層疊樣式表。

例如：<?xml-stylesheethref="show.css"type="text/css"?>指令：<?xml-stylesheethref="樣式表的URI"type="text/css"?>將一個(gè)XML文件與CSS樣式表相關(guān)聯(lián)。

例題4.1p752009-10-205§4.3標(biāo)記與樣式表

CSS中的樣式表負(fù)責(zé)給出XML文件中標(biāo)記包含的文本數(shù)據(jù)的顯示外觀，為此，樣式表的名稱必然要和XML文件中標(biāo)記的名稱建立某種聯(lián)系。2009-10-206§4.3.1標(biāo)記的名字與樣式表的名稱

樣式表中的“樣式表名稱”可以是標(biāo)記的名稱，也可以是標(biāo)記的名稱與該標(biāo)記的ID屬性值用“#”連接起來的字符串。當(dāng)XML有許多標(biāo)記具有相同的名字，如果要使用不同的外觀來顯示他們的內(nèi)容時(shí)，“樣式表名稱”使用“標(biāo)記名稱”+“#”+“ID屬性值”。

例：time#a001{display:block;font-size:19pt;font-weight:bold;}time#a002{display:line;font-size:16pt;font-weight:bold;}

2009-10-207§4.3.2CSS的顯示規(guī)則

用瀏覽器打開XML文件時(shí)，瀏覽器將按著標(biāo)記在XML文件中出現(xiàn)的“順序”，并用該標(biāo)記在CSS中對應(yīng)的樣式表顯示該標(biāo)記包含的文本數(shù)據(jù)，如果標(biāo)記在CSS中沒有對應(yīng)的樣式表，瀏覽器將使用默認(rèn)的顯示規(guī)則顯示該標(biāo)記中的文本數(shù)據(jù)。例題4.2p76

2009-10-208§4.4數(shù)據(jù)結(jié)構(gòu)與顯示相分離

XML的核心是描述數(shù)據(jù)的組織結(jié)構(gòu)，其標(biāo)記名稱是對標(biāo)記所包含的數(shù)據(jù)內(nèi)容含義的抽象，而不是數(shù)據(jù)的顯示格式，XML文件通過使用若干個(gè)標(biāo)記來表示數(shù)據(jù)的組織結(jié)構(gòu)，通過和CSS或XSL相關(guān)聯(lián)來顯示標(biāo)記中的文本數(shù)據(jù)，從而有效地分離了數(shù)據(jù)的組織結(jié)構(gòu)和顯示外觀。例題4.3p782009-10-209§4.5設(shè)置文本的顯示方式樣式表中通過指定屬性display的值來設(shè)置文本的顯示方式。2009-10-2010§4.5.1塊方式_1

通過將屬性“display”的值指定為“block”:dislpaly:block

使得文本在瀏覽器的一個(gè)塊區(qū)域中顯示。例如：name{display:block;}可以通過設(shè)置width和height屬性的值來準(zhǔn)確地設(shè)置塊區(qū)域的寬度和高度，例如：name{display:block;width=280;height=180}特點(diǎn):

1.同級別標(biāo)記:如果有若干同級別的標(biāo)記所對應(yīng)的樣式表都是使用塊區(qū)域顯示文本，那么這些塊區(qū)域?qū)粗鴺?biāo)記的先后順序靠左對齊。

2．子標(biāo)記:如果樣式表指定某個(gè)標(biāo)記的顯示方式是block；而另外一個(gè)樣式表為當(dāng)前標(biāo)記的子標(biāo)記指定的顯示方式也是block，那么為子標(biāo)記指定的塊區(qū)域?qū)⒈话跒楦笜?biāo)記指定的塊區(qū)域中。

2009-10-2011§4.5.1塊方式_2可以通過設(shè)置position屬性的值為absolution改變塊區(qū)域默認(rèn)地靠左對齊方式，但必須要同時(shí)設(shè)置left，top，width和height屬性的值，以便準(zhǔn)確地設(shè)置塊區(qū)域的位置和大小

，例如：name{display:block;position:absolute;left=100;top=120;width=200;height=120;

}例題4.4p792009-10-2012§4.5.2行方式

通過將屬性“display”的值指定為“l(fā)ine”

dislpaly:line使得文本以行的方式在瀏覽器中顯示。例如：

name{display:line;}特點(diǎn)如下：1．同級別標(biāo)記:如果有若干同級別的標(biāo)記所對應(yīng)的樣式表都是使用行方式來顯示文本，那么這些行將按著標(biāo)記的先后順序首尾相接。2．子標(biāo)記:如果樣式表為某個(gè)標(biāo)記指定的顯示方式是block；而另外一個(gè)樣式表為當(dāng)前標(biāo)記的子標(biāo)記指定的顯示方式是line，那么為子標(biāo)記指定的行將被包含在為父標(biāo)記指定的塊區(qū)域中。

可以通過設(shè)置position屬性的值為absolution改變某行默認(rèn)地按先后順序尾隨在另一行首尾之后，但必須要同時(shí)設(shè)置left，topt屬性的值。name{display:line;position:absolute;left=100;top=120;}例題4.5p81

2009-10-2013§4.5.3按列表方式通過將屬性“display”的值指定為“l(fā)ist-item”dislpaly:list-item使得文本按列表方式在瀏覽器中顯示。例如：name{dislpaly:list-item;}特點(diǎn)如下：1．同級別標(biāo)記:如果有若干同級別的標(biāo)記對應(yīng)的樣式表都使用列表來顯示文本，那么這些列表將按著標(biāo)記的先后獨(dú)行顯示，而且列表的項(xiàng)目符號會按先后順序遞增。2．子標(biāo)記:如果樣式表為某個(gè)標(biāo)記指定的顯示方式是block；而另外一個(gè)樣式表為當(dāng)前標(biāo)記的子標(biāo)記指定的顯示方式是list-item，那么為子標(biāo)記指定的列表將被包含在為父標(biāo)記指定的塊區(qū)域中；如果樣式表為某個(gè)標(biāo)記指定的顯示方式是list-item；而另外一個(gè)樣式表為當(dāng)前標(biāo)記的子標(biāo)記指定的顯示方式也是list-item，那么為子標(biāo)記指定的列表將成為父標(biāo)記指定的列表的子列表。

和“l(fā)ist-item”屬性有關(guān)的屬性是“l(fā)ist-style-type”，通過設(shè)置該屬性可以更改項(xiàng)目符號的外觀?！發(fā)ist-item”屬性取值情況如下：disc、circle、square、decimal、lower-roman、upper-roman、lower-alpha、upper-alpha、none。例如：list-style-type:lower-roman例題4.6p832009-10-2014§4.5.4不顯示標(biāo)記中的文本

“display:none”不顯示文本，例如：name{display:none;}

對應(yīng)name樣式表的標(biāo)記將不顯示標(biāo)記中的文本.2009-10-2015§4.6字體與字體有關(guān)的屬性包括以下5種：1.font-family屬性:屬性的默認(rèn)值是瀏覽器確定的默認(rèn)字體名稱,如果名稱中有空格，屬性值需用雙引號擴(kuò)起來，例如：font-family:Arial;font-family:"TimeNewRoman";2.font-style屬性:該屬性的值指定字體否使用斜體，該屬性值可以是“normal”或“italic”，例如：font-style:italicfont-style:normal3.font-variant屬性:該屬性的值指定是否使用小體的大寫字母來顯示文字,例如：font-variant:small-caps4.font-weight屬性:該屬性的值用來設(shè)置字體線條的粗細(xì),例如font-weight:boldfont-weight:600

5.font-size屬性:該屬性的值用來設(shè)置字體的大小，單位為pt（鎊),例如

font-size:12pt例題4.7p852009-10-2016§4.7文本樣式樣式表中與文本樣式有關(guān)的屬性包括以下6種：1.text-align屬性:該屬性的值用來設(shè)置文本的對齊方式,例如：

text-align:center

2.text-indent屬性:屬性的值用來設(shè)置文本首行的縮進(jìn)量,單位是像素px或磅pt，例如：

text-indent:16pt

3.text-transformt屬性:該屬性的值指定是否將文本中的字母全部大寫、全部小寫或者首字母大寫,例如：

text-transform:uppercase

4.text-decoration屬性:該屬性的值用來設(shè)置是否將文本加劃線,例如text-decoration:underline5.vertical-align屬性:該屬性的值用來設(shè)置文本的垂直對齊方式,例如

vertical-align:baseline6.line-height屬性:該屬性的值用來設(shè)置文本之間的行距,例如

line-height:1.5

例題4.8p872009-10-2017§4.8邊框樣式表中與文本邊框有關(guān)的屬性包括以下4種：1.border-style屬性:修改該屬性的值，使得文本具有邊框,例如：

border-style:dotted

2.border-right-width等屬性:重新設(shè)置這些屬性的值來改變邊框的上邊、底邊、右邊和左底邊的寬度，例如：

border-top-width:12;border-left-width:22;

3.border-right-style等屬性:該屬性修改邊框的某個(gè)邊的樣式,例如：

border-bottom-style:dashed4.border-right-color等屬性:為這些屬性重新設(shè)置顏色值,改變邊框的顏色,例如

border-right-color:blue例題4.9p892009-10-2018§4.9邊緣

邊緣是文本周圍不可見的區(qū)域。和邊緣有關(guān)的屬性包括：

margin-top,margin-right,margin-bottom,margin-left例如：margin-top:20;margin-right:120;margin-left:10;例題4.10p902009-10-2019§4.10顏色和背景使用屬性color和background-color可以設(shè)置文本的字符顏色和背景顏色。

margin-top,margin-right,margin-bottom,margin-left例如：

color:rgb(120,225,220);color:red;

background-color:rgb(10,225,220);background-color:yellow;

2009-10-2020§4.11顯示圖像

樣式表中與圖像有關(guān)的屬性包括以下2種通過設(shè)置background-im