使用CSS格式化顯示XML文件

1、使用CSS格式化顯示XML文件 第第5章章 使用使用CSS格式化顯示格式化顯示 XML 5.1 CSS技術(shù)簡介 5.2 XML與CSS結(jié)合的方式 5.3 CSS格式化XML XML是一種數(shù)據(jù)存儲語言，沒有任何數(shù)據(jù)顯示樣式。 因此，瀏覽器不能直接顯示其中的文本數(shù)據(jù)，如果想讓瀏 覽器只顯示其中的數(shù)據(jù)，就需要借助于其它方法。本章主 要介紹CSS技術(shù)及CSS與XML的結(jié)合應(yīng)用。 使用CSS格式化顯示XML文件 CSS（Cascading Style Sheet，層疊樣式表）是由W3C在1996年正 式推出的，最初的版本是CSS1。1998年W3C又正式推出了CSS2，現(xiàn) 在正在使用的是CSS2.1。C

2、SS3現(xiàn)在還處于開發(fā)中。CSS是一種樣式控 制語言，用來設(shè)置字體樣式等內(nèi)容，最初是為彌補HTML的不足而出 現(xiàn)的。后來，又應(yīng)用在XML，用來格式化XML數(shù)據(jù)內(nèi)容。CSS就是 一組規(guī)則的集合。 5.1 CSS技術(shù)簡介技術(shù)簡介 CSS語法非常簡單，組成CSS語法的元素只有CSS選擇符與CSS屬 性。每個CSS選擇符由一個或多個CSS屬性組成?；靖袷饺缦拢?選擇符屬性:屬性值 使用CSS格式化顯示XML文件 5.2 XML與與CSS結(jié)合的方式結(jié)合的方式 5.2.2 將樣式語句嵌入到XML文件 5.2.1 調(diào)用獨立樣式文件 5.2.3 混合方法指定樣式 5.2.4 使用多個樣式文件 使用CSS格式化

3、顯示XML文件 一個獨立的CSS樣式文件是一個文本文件，擴(kuò)展名是“.css”，可 以用記事本編輯。將XML文件和獨立的CSS文件結(jié)合的方法是在 XML文件中加入下面一條處理指令： 調(diào)用獨立樣式文件調(diào)用獨立樣式文件 CSS文件的URI必須是一個有效的資源。如果CSS文件與XML 文件位于同一目錄下，CSS文件的URI可以是CSS文件名，否則必須 是CSS文件的路徑。 使用CSS格式化顯示XML文件 將樣式語句嵌入到將樣式語句嵌入到XML文件文件 (1)(1) CSS語句還可以直接寫在XML文件內(nèi)部。例如: persion display:block; font-size:25pt; color:

4、red; 使用CSS格式化顯示XML文件 將樣式語句嵌入到將樣式語句嵌入到XML文件文件 (2)(2) 另外還有一種方法，在標(biāo)記內(nèi)使用“style”屬性來定義樣式，例如: xiaoli male 25 xiaowang female 24 說明：這種方法可以靈活地設(shè)置各標(biāo)記的樣式，但會使 XML文件變得不夠簡潔，不建議使用。 使用CSS格式化顯示XML文件 混合方法指定樣式混合方法指定樣式 綜合應(yīng)用內(nèi)部CSS樣式和外部CSS樣式。例如： persion display:block; font-size:20pt; color:red; /省略的XML代碼 說明：如果內(nèi)部樣式表和外部樣式表之間發(fā)

5、生沖突，則以內(nèi) 部的樣式為準(zhǔn)。 使用CSS格式化顯示XML文件 使用多個樣式文件使用多個樣式文件 一個XML文件也可以同時調(diào)用多個樣式表文件。例如： 說明：一個XML文件同時引用多個外部樣式表文件時，如果樣式表文 件中的內(nèi)容發(fā)生沖突，則以聲明靠后的樣式表文件中所定義 的樣式為準(zhǔn)。 使用CSS格式化顯示XML文件 5.3 CSS格式化格式化XML文件文件 5.3.1 定義樣式 5.3.2 文本顯示方式設(shè)置 5.3.7 環(huán)繞文本 5.3.3 文本屬性設(shè)置 5.3.4 設(shè)置元素 5.3.5 元素定位顯示 5.3.6 圖片設(shè)置 使用CSS格式化顯示XML文件 定義樣式定義樣式 CSS語法簡單，一個標(biāo)記

6、內(nèi)容的樣式的定義由選擇符、屬性和屬 性值組成。 選擇符屬性:屬性值 為XML定義樣式時，選擇符通常是“標(biāo)記的名稱”，這樣，所 有同名的標(biāo)記都具有相同的顯示樣式。如果對于相同名稱的標(biāo)記想 使用不同的顯示樣式，則選擇符可以是“#”加該名稱的ID屬性值。 如果想對不同名稱的標(biāo)記使用相同的樣式，則選擇符可以是點號“.” 加標(biāo)記的CLASS屬性值。 使用CSS格式化顯示XML文件 文本顯示方式設(shè)置文本顯示方式設(shè)置 （1） 文本顯示方式是指文本內(nèi)容在瀏覽器中以何種形式來顯示。文 本的顯示方式有4種方式：塊顯示方式、行顯示方式、列表顯示方式 和不顯示方式，通過display屬性來設(shè)置。 q 塊顯示方式 塊顯

7、示方式是指文本內(nèi)容以塊的方式來顯示，塊的大小取決于文 本內(nèi)容的大小，文本內(nèi)容默認(rèn)為左對齊。定義塊顯示方式是將display 屬性的值指定為block。還可以通過position、width和height屬性值設(shè) 置塊的大小。 例如，有下面的XML文件： 使用CSS格式化顯示XML文件 文本顯示方式設(shè)置文本顯示方式設(shè)置 （2） 水滸傳 施耐庵 52.30 全書以描寫農(nóng)民戰(zhàn)爭為主要題材，塑造了李逵、 武松、林沖、魯智深等梁山英雄，揭示了當(dāng)時的 社會矛盾。故事曲折、語言生動、人物性格鮮明， 具有很高的藝術(shù)成就。 使用CSS格式化顯示XML文件 文本顯示方式設(shè)置文本顯示方式設(shè)置 （3） 將其設(shè)置成塊顯

8、示方式，CSS文件代碼如下 ： title display:block; background-color:yellow; authordisplay:block; background-color:cyan; price display:block; background-color:yellow; discretiondisplay:block;background-color:cyan; position:absolute;width:300px;height:60px; 用IE瀏覽器打開XML文件，得到的結(jié)果如圖所示： 使用CSS格式化顯示XML文件 文本顯示方式設(shè)置文本顯示方式設(shè)置

9、（4） q 行顯示方式 行顯示方式是指文本內(nèi)容以行的方式來顯示，各標(biāo)記內(nèi)容按先后 順序首尾相連。行顯示將display屬性值設(shè)置為line。例如： title display:line; author display:line; price display:line; discretiondisplay:line; 用IE瀏覽器打開前面的XML文件，得到的結(jié)果如圖所示： 使用CSS格式化顯示XML文件 文本顯示方式設(shè)置文本顯示方式設(shè)置 （5） q 列表顯示方式 列表顯示方式是指文本內(nèi)容在瀏覽器中以列表的方式顯示，通過 將display屬性值指定為list-item來實現(xiàn)。例如： book di

10、splay:list-item; list-style-type:square; margin-left:100px; author display:list-item; list-style-type:circle; margin-left:110px; price display:list-item; list-style-type:circle; margin-left:110px; discretiondisplay:list-item; list-style-type:circle; margin-left:110px; 用IE瀏覽器打開XML文件，得到的結(jié)果如圖所示： 使用CSS格

11、式化顯示XML文件 文本顯示方式設(shè)置文本顯示方式設(shè)置 （6） q 列表顯示方式 在列表顯示方式中，list-style-type屬性用來指定項目符號的外觀， 可取的值有: disc - 圓盤 circle - 圓圈 square - 方塊 decimal - 十進(jìn)制數(shù) lower-roman - 小寫的羅馬數(shù)字 upper-roman - 大寫的羅馬數(shù)字 lower-alpha - 小寫英文字母 upper-alpha - 大寫英文字母 none - 無符號 使用CSS格式化顯示XML文件 文本屬性設(shè)置（文本屬性設(shè)置（1 1） 文本屬性設(shè)置包括：文字的屬性設(shè)置和文本樣式設(shè)置 。 q 文字的屬性

12、設(shè)置 文本屬性包括文字大小、字體、顏色等。下面詳細(xì)介紹各個 有關(guān)的屬性。 （1）設(shè)置文字的大小 設(shè)置文字的大小通過font-size屬性來完成。屬性值是一個具 體的數(shù)值，單位為pt，pt的中文譯為磅或點，用來表示文字的大 小。其他的單位還有px、cm或mm。例如： font-size:15pt; 使用CSS格式化顯示XML文件 文本屬性設(shè)置（文本屬性設(shè)置（2 2） （2）設(shè)置文字的顏色和背景色 設(shè)置文字的顏色通過設(shè)置color屬性來完成。它的屬性值可以 為顏色的英文名稱，也可以是顏色的16進(jìn)制RGB的值。例如 ： color:green; color:#00ff00; （3）設(shè)置文字的字體 設(shè)

13、置文字的字體使用屬性font-family，屬性值是系統(tǒng)的字體 名稱，如果名稱中含有空格，需要用雙引號括起來。為了防止用 戶缺少某種字體，font-family屬性的值最好列出多個字體，用逗 號分隔。在顯示的時候，瀏覽器會從前向后依次匹配用戶已安裝 的字體，并以該字體顯示。例如 ： font-family:”Time New Romar” font-family:arial,”Time New Romar”,sans-serif 使用CSS格式化顯示XML文件 文本屬性設(shè)置（文本屬性設(shè)置（3 3） （4）其它文字樣式設(shè)置 其它的文字樣式的屬性還包括：font-style、font-weight

14、和 font-variant。 font-style屬性用來表示文字是否使用斜體，屬性值可以是 normal（不使用斜體）或italic（使用斜體）。 font-weight屬性用來表示文字的粗細(xì)，屬性的值可以是extra- light、lighter、light、normal、bold、bolder或extra-bold，上面的順序 由細(xì)到粗。font-weight屬性值還可以是具體的數(shù)值，數(shù)值越大文字越 粗。 font-variant屬性用來表示是否使用小型的大寫字母來顯示。屬 性值可以是normal或small-caps。 使用CSS格式化顯示XML文件 文本屬性設(shè)置（文本屬性設(shè)置（4

15、4） q 文本樣式設(shè)置 文本樣式指的是一段文字的樣式，與之相關(guān)的書信包括：text- align、vertical-align、line-height、text-transform、text-decoration和 text-indent。 （1）text-align屬性用來設(shè)置文本的對齊方式，該屬性的值可以 為：left、right、center或justify。 （2）vertical-align屬性用來設(shè)置文本 垂直對齊方式，屬性的值 可以為：baseline、sub、super、top、text-top、middle、bottom或text- bottom。 （3）line-heigh

16、t屬性用來設(shè)置文本的行間距，屬性值是一個具體 的數(shù)值。 使用CSS格式化顯示XML文件 文本屬性設(shè)置（文本屬性設(shè)置（5 5） q 文本樣式設(shè)置 （4）text-transform屬性用來設(shè)置是否將文本中的字母全部大寫 或全部小寫或首字母大寫。屬性的值可以是uppercase、lowercase、 capitalize或none。 （5）text-decoration屬性用來設(shè)置是否給文本加劃線，屬性值可 以取none、underline、overline、line-through或blink。 （6）text-indent屬性用來設(shè)置文本的首行縮進(jìn)，屬性值是具體的 數(shù)字值，單位為px或pt。

17、使用CSS格式化顯示XML文件 文本屬性設(shè)置（文本屬性設(shè)置（6 6） 一個實例，XML文件代碼如下： 氫氣燃燒產(chǎn)生水: 2h2+o2=2h2o 這一反應(yīng)過程中有大量熱放出，火焰呈淡藍(lán)色。 使用CSS格式化顯示XML文件 文本屬性設(shè)置（文本屬性設(shè)置（7 7） CSS文件代碼如下： chemistry display:block; font-size:15pt; text-decoration:underline; text-transform:uppercase; bottom display:line; font-size:10pt; vertical-align:bottom; discre

18、tion display:block; font-size:12pt; text-align:center; background-color:yellow; font-style:italic; bold font-weight:bolder; 用IE瀏覽器打開XML文件，得到的結(jié)果如圖所示： 使用CSS格式化顯示XML文件 設(shè)置元素設(shè)置元素 （1） 一個網(wǎng)頁元素包含4個部分：元素內(nèi)容、邊框（ border ）、內(nèi)容與 邊框之間填充（padding）和邊框與周圍元素的邊距（margin）。如圖所 示： 元素內(nèi)容元素內(nèi)容 邊框（border）填充（padding） 邊距（margin） 元素內(nèi)

19、容可以是一段文字、一張圖片或其它的內(nèi)容。 使用CSS格式化顯示XML文件 設(shè)置元素設(shè)置元素 （2） q 設(shè)置邊框（border）： 與邊框有關(guān)的屬性有： （1）border-style：用來設(shè)置元素的邊框，并且四周的邊框具有相 同的樣式和寬度。該屬性可以取的值有：none（無）、dotted（點虛 線）、dash（短線虛線）、solid（普通邊框）、double（雙實線）、 groove（3D溝狀邊框）、ridge（3D脊?fàn)钸吙颍?、inset（3D內(nèi)嵌邊框） 和outset（3D外嵌邊框）。 （2）border-right、border-bottom和border-left：這3個屬性可用來

20、單獨設(shè)置右邊、底邊和左邊的邊框樣式，這3個屬性的取值同border- style屬性的取值。 使用CSS格式化顯示XML文件 設(shè)置元素設(shè)置元素 （3） q 設(shè)置邊框（border）： （3） border-top-width、border-right-width、border-bottom-width和 border-left-width這4個屬性用來設(shè)置邊框4邊的寬度，屬性值為具體的 數(shù)值。 （4） border-color屬性用來設(shè)置邊框的顏色。這個屬性的值可以設(shè) 置成1個、2個或4個。如果該屬性有一個值，表示邊框的4個邊都為這 個顏色。如果有兩個值，表示邊框的上邊和下邊為第一個顏色，左邊

21、 和右邊為第二個顏色。如果有4個值，按順序依次為上、右、底、左的 顏色。 注意：只有設(shè)置了border-style屬性后才能設(shè)置其它的屬性。 使用CSS格式化顯示XML文件 設(shè)置元素設(shè)置元素 （4） q 設(shè)置邊框（border）： 例： XML文件： 邊框1 邊框2 邊框3 CSS文件： frame1 display:block; border-style:double; border-color:blue; width:200; height:130; frame2 display:block; border-style:dotted; border-color:red green; wid

22、th:150; height:100; frame3 display:block; border-style:ridge; border-top-width:10; width:100; height:70; 顯示效果如圖所示： 使用CSS格式化顯示XML文件 設(shè)置元素設(shè)置元素 （5） q 設(shè)置填充（padding）： 與填充有關(guān)的屬性有：padding-top、padding-right、padding- bottom和padding-left。分別表示上、右、下、左的填充。如果4個填充 的大小一樣，則可以只寫padding屬性。該屬性的值是具體的數(shù)值，單 位是像素。 例如： frame1d

23、isplay:line; border-style:inset; padding-left:15; frame2display:line; border-style:inset; padding-top:10; frame3display:line; border-style:inset; padding:10; 使用CSS格式化顯示XML文件 設(shè)置元素設(shè)置元素 （6） q 設(shè)置填充（padding）： 下面的XML文件使用前面的CSS樣式，顯示的效果如圖所示： padding-left:20 padding-top:10 padding:10 使用CSS格式化顯示XML文件 設(shè)置元素設(shè)置元素

24、 （7） q 設(shè)置邊距（margin） ： 與邊距有關(guān)的屬性有：margin-top、margin-right、margin-bottom和 margin-left。分別代表上、右、下、左的距離。如果4個邊距的大小一 樣，則可以只寫margin屬性。該屬性的值是具體的數(shù)值，單位是像素。 例如 ： frame1 display:line; border-style:inset; width:100;height:50; margin-bottom:20; frame2 display:line; border-style:inset; width:100;height:50; margin-le

25、ft:20; margin-top:20; frame3 display:block; border-style:inset; width:200;height:50; margin:20; 使用CSS格式化顯示XML文件 設(shè)置元素設(shè)置元素 （8） q 設(shè)置邊距（margin） ： margin-bottom:20 margin-left:20 margin-top:20 margin:20 利用前面的CSS樣式顯示下面的XML文件，效果如圖所示： 使用CSS格式化顯示XML文件 元素定位顯示（元素定位顯示（1） 元素的定位是指指定元素的顯示位置。CSS中定位分為兩種：絕 對定位和相對定位。

26、元素定位通過position屬性設(shè)置，該屬性有兩種取值：absolute或 relative，分別代表絕對定位法和相對定位法。 絕對定位是以自身父元素的左上角為原點，通過偏移量來決定顯 示的位置。 相對定位是指相對于自身的偏移量來決定顯示的位置。 偏移量通過left屬性和top屬性來決定。left屬性值代表元素距離坐 標(biāo)遠(yuǎn)點的向右水平距離，top屬性的值代表元素距離坐標(biāo)遠(yuǎn)點的向下垂 直距離。 使用CSS格式化顯示XML文件 元素定位顯示（元素定位顯示（2） 實例： XML文件： root 元素1 元素2 元素3 root display:block; background-color:yell

27、ow;width:300; height:200; position:absolute; top:25; left:50; frame1 display:block; background-color:blue; width:200; height:120; position:absolute; top:25; left:50; frame2 display:block; background-color:green; width:100; height:50; position:relative; top:25; left:50; frame3 display:block; background-color:red; width:100; height:50; position:relative; top:25; left:50; CSS樣式： 使用CSS格式化顯示XML文件 元素定位顯示（元素定位顯示（3） 顯示效果： 在圖中看到，元素