第5章使用CSS顯示XML文檔

1、XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔第1頁(yè)第第5章章 使用使用CSS顯示顯示XML文檔文檔本章概述 本章的學(xué)習(xí)目標(biāo)主要內(nèi)容XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔第2頁(yè)本章概述本章概述lW3C為為XML數(shù)據(jù)顯示發(fā)布了兩個(gè)建議規(guī)范：數(shù)據(jù)顯示發(fā)布了兩個(gè)建議規(guī)范：CSS（層疊樣式表）和（層疊樣式表）和XSL（可擴(kuò)展樣式語(yǔ)言）。當(dāng)（可擴(kuò)展樣式語(yǔ)言）。當(dāng)XML文件和文件和CSS文件或文件或XSL文件相關(guān)聯(lián)后，瀏覽文件相關(guān)聯(lián)后，瀏覽器將按著器將按著CSS文件或文件或XSL文件給出的顯示方式來(lái)文件給出的顯示方式來(lái)顯示顯示XML文件中標(biāo)記的文本內(nèi)容。文件中標(biāo)記的文本內(nèi)容。XML基礎(chǔ)教程第5章

2、使用CSS顯示XML文檔第3頁(yè)本章的學(xué)習(xí)目標(biāo)本章的學(xué)習(xí)目標(biāo)l樣式表的基本概念樣式表的基本概念l如何定義如何定義CSS樣式樣式lCSS選擇符選擇符lXML文檔調(diào)用文檔調(diào)用CSS的方式的方式l常用的常用的CSS屬性屬性XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔第4頁(yè)主要內(nèi)容主要內(nèi)容5.1 樣式表概述樣式表概述5.2CSS簡(jiǎn)介簡(jiǎn)介5.3CSS基本語(yǔ)法基本語(yǔ)法5.4XML與與CSS結(jié)合的方式結(jié)合的方式5.5CSS屬性屬性5.6CSS的顯示規(guī)則的顯示規(guī)則5.7本章小結(jié)本章小結(jié)XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔第5頁(yè)5.1 樣式表概述樣式表概述 樣式表是一種專(zhuān)門(mén)描述結(jié)構(gòu)文檔表現(xiàn)方式的文件，

3、樣式表是一種專(zhuān)門(mén)描述結(jié)構(gòu)文檔表現(xiàn)方式的文件，它既可以描述這些文檔如何在屏幕上顯示，也可它既可以描述這些文檔如何在屏幕上顯示，也可以描述它們的打印效果甚至聲音效果。樣式表一以描述它們的打印效果甚至聲音效果。樣式表一般不包含在般不包含在XML文檔的內(nèi)部，而是以獨(dú)立文檔的文檔的內(nèi)部，而是以獨(dú)立文檔的方式存在。方式存在。XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔5.1.1 顯示顯示XML的兩種常用樣式表的兩種常用樣式表lW3C給出了兩種推薦的樣式表標(biāo)準(zhǔn)：一種給出了兩種推薦的樣式表標(biāo)準(zhǔn)：一種是常見(jiàn)的是常見(jiàn)的CSS，另一種是，另一種是XSL。第6頁(yè)標(biāo)記語(yǔ)言的發(fā)展歷史標(biāo)記語(yǔ)言的發(fā)展歷史XML基礎(chǔ)教程第5

4、章 使用CSS顯示XML文檔第7頁(yè)5.1.2 樣式表的優(yōu)勢(shì)樣式表的優(yōu)勢(shì) 對(duì)于樣式表而言，不管是對(duì)于樣式表而言，不管是CSS，還是，還是XSL，都具，都具有如下優(yōu)點(diǎn)：有如下優(yōu)點(diǎn)：l表達(dá)效果豐富。表達(dá)效果豐富。l可讀性好?？勺x性好。l利于信息檢索。利于信息檢索。l文檔體積小。文檔體積小。XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔5.2 CSS簡(jiǎn)介簡(jiǎn)介l CSS（Cascading Style Sheet，層疊樣，層疊樣式表或級(jí)聯(lián)樣式表）是一種樣式控制語(yǔ)言式表或級(jí)聯(lián)樣式表）是一種樣式控制語(yǔ)言，其基本思想是為結(jié)構(gòu)文檔中的各個(gè)標(biāo)記，其基本思想是為結(jié)構(gòu)文檔中的各個(gè)標(biāo)記定義出相對(duì)應(yīng)的一組顯示樣式。定義出

5、相對(duì)應(yīng)的一組顯示樣式。CSS最初最初是為彌補(bǔ)是為彌補(bǔ)HTML的不足而出現(xiàn)的。后來(lái)，又的不足而出現(xiàn)的。后來(lái)，又應(yīng)用在應(yīng)用在XML上，用來(lái)格式化上，用來(lái)格式化XML數(shù)據(jù)內(nèi)容數(shù)據(jù)內(nèi)容。第8頁(yè)XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔 簡(jiǎn)單地說(shuō)，將簡(jiǎn)單地說(shuō)，將CSS與與XML結(jié)合有以下結(jié)合有以下3點(diǎn)點(diǎn)好處：好處：l實(shí)現(xiàn)數(shù)據(jù)與顯示方式分離，發(fā)揮實(shí)現(xiàn)數(shù)據(jù)與顯示方式分離，發(fā)揮XML的優(yōu)的優(yōu)勢(shì)。勢(shì)。l將顯示樣式統(tǒng)一于將顯示樣式統(tǒng)一于CSS中，便于對(duì)顯示樣中，便于對(duì)顯示樣式進(jìn)行統(tǒng)一管理。式進(jìn)行統(tǒng)一管理。lCSS語(yǔ)法結(jié)構(gòu)簡(jiǎn)單，兼容性強(qiáng)，適用平臺(tái)語(yǔ)法結(jié)構(gòu)簡(jiǎn)單，兼容性強(qiáng)，適用平臺(tái)廣泛。廣泛。第9頁(yè)XML基礎(chǔ)教程第

6、5章 使用CSS顯示XML文檔5.2.2 CSS的歷史的歷史l CSS是由是由W3C在在1996年正式推出的，最初年正式推出的，最初的版本是的版本是CSS 1。1998年年W3C又正式推出又正式推出了了CSS 2。CSS 2基本涵蓋基本涵蓋CSS 1，并增加，并增加了媒體類(lèi)型、特性選擇符、聲音樣式等功了媒體類(lèi)型、特性選擇符、聲音樣式等功能，還對(duì)原有的一些功能進(jìn)行了擴(kuò)充?，F(xiàn)能，還對(duì)原有的一些功能進(jìn)行了擴(kuò)充?，F(xiàn)在正在使用的是在正在使用的是CSS 2.1，CSS 3被分成四被分成四十多個(gè)十多個(gè)模塊模塊，現(xiàn)在還處于開(kāi)發(fā)中。，現(xiàn)在還處于開(kāi)發(fā)中。第10頁(yè)XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔第11

7、頁(yè)5.2.3 CSS的創(chuàng)建與應(yīng)用的創(chuàng)建與應(yīng)用1、建立建立XML文檔。文檔。2、創(chuàng)建樣式表文件。創(chuàng)建樣式表文件。3、鏈接樣式表文件到鏈接樣式表文件到XML文檔。文檔。4、在瀏覽器中瀏覽在瀏覽器中瀏覽。XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔第12頁(yè)5.3 CSS基本語(yǔ)法基本語(yǔ)法 CSS語(yǔ)句的基本格式如下：語(yǔ)句的基本格式如下：選擇符選擇符 屬性屬性1： 屬性值屬性值1； 屬性屬性2： 屬性值屬性值2； 屬性屬性n： 屬性值屬性值n； XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔第13頁(yè)5.3.2 對(duì)對(duì)XML文檔有效的文檔有效的CSS選擇符選擇符 常用的有以下幾類(lèi)。常用的有以下幾類(lèi)。 1.

8、類(lèi)型選擇符（類(lèi)型選擇符（Type Selector） 2. 類(lèi)選擇符（類(lèi)選擇符（Class Selector） 3. ID選擇符（選擇符（ID Selector） 4. 其他選擇方式其他選擇方式XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔第14頁(yè)5.4 XML與與CSS結(jié)合的方式結(jié)合的方式lXML文檔調(diào)用文檔調(diào)用CSS有有3種形式，即引用一個(gè)種形式，即引用一個(gè)外部外部CSS文件、將文件、將CSS語(yǔ)句嵌入到語(yǔ)句嵌入到XML文文檔、同時(shí)應(yīng)用內(nèi)部檔、同時(shí)應(yīng)用內(nèi)部CSS和外部和外部CSS。XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔第15頁(yè)5.4.1 調(diào)用外部樣式表文件調(diào)用外部樣式表文件l調(diào)用外部

9、樣式表文件是指調(diào)用外部樣式表文件是指XML文件本身不文件本身不含有樣式信息，而是通過(guò)引用外部含有樣式信息，而是通過(guò)引用外部CSS文文件來(lái)定義件來(lái)定義XML文件的表現(xiàn)形式。文件的表現(xiàn)形式。CSS樣式樣式表文件是一個(gè)擴(kuò)展名為表文件是一個(gè)擴(kuò)展名為“.css”的文本文的文本文件，可以在件，可以在XML文檔的開(kāi)頭加入以下處理文檔的開(kāi)頭加入以下處理指令將指定的指令將指定的CSS樣式表鏈接進(jìn)來(lái)。其格樣式表鏈接進(jìn)來(lái)。其格式為：式為：lXML基礎(chǔ)教程第5章 使用CSS顯示XML文檔5.4.2 在在XML文檔內(nèi)部定義樣式文檔內(nèi)部定義樣式l在在XML文檔內(nèi)部應(yīng)用文檔內(nèi)部應(yīng)用CSS是指將是指將CSS樣式樣式直接嵌入到

10、直接嵌入到XML文檔內(nèi)部，一般來(lái)說(shuō)，不文檔內(nèi)部，一般來(lái)說(shuō)，不建議在建議在XML文檔內(nèi)部定義文檔內(nèi)部定義CSS樣式。樣式。第16頁(yè)XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔5.4.3 混合方法指定樣式混合方法指定樣式 第第3種方法是綜合應(yīng)用內(nèi)部種方法是綜合應(yīng)用內(nèi)部CSS樣式和外部樣式和外部CSS樣式。在這種情況下，如果兩種樣式樣式。在這種情況下，如果兩種樣式之間發(fā)生沖突，則以?xún)?nèi)部的之間發(fā)生沖突，則以?xún)?nèi)部的CSS樣式為準(zhǔn)樣式為準(zhǔn)。第17頁(yè)XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔第18頁(yè)5.4.4 使用多個(gè)樣式文件使用多個(gè)樣式文件l一個(gè)樣式表文件可以被多個(gè)一個(gè)樣式表文件可以被多個(gè)XML文件

11、調(diào)用文件調(diào)用，同樣地，一個(gè)，同樣地，一個(gè)XML文件也可以同時(shí)調(diào)用文件也可以同時(shí)調(diào)用多個(gè)樣式表文件。多個(gè)樣式表文件。XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔5.5 CSS屬性屬性lCSS的樣式屬性有很多，通過(guò)設(shè)置這些屬的樣式屬性有很多，通過(guò)設(shè)置這些屬性的值可以改變相應(yīng)元素的顯示方式。最性的值可以改變相應(yīng)元素的顯示方式。最常用的元素屬性有字體屬性、顏色屬性、常用的元素屬性有字體屬性、顏色屬性、背景屬性、文本屬性、邊框?qū)傩缘?。背景屬性、文本屬性、邊框?qū)傩缘?。?9頁(yè)XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔5.5.1 字體屬性字體屬性 字體屬性（字體屬性（font）是最常用的）是最常用的C

12、SS屬性，屬性，通過(guò)設(shè)置字體屬性的值可以改變字體的顯通過(guò)設(shè)置字體屬性的值可以改變字體的顯示方式，包括字體的字型、風(fēng)格、大小、示方式，包括字體的字型、風(fēng)格、大小、拉伸等。拉伸等。第20頁(yè)XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔lfont-family屬性。屬性。lfont-style屬性。屬性。lfont-variant屬性。屬性。lfont-weight屬性。屬性。lfont-size屬性。屬性。第21頁(yè)XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔第22頁(yè)5.5.2 文本屬性文本屬性 CSS中與文本樣式有關(guān)的屬性包括以下中與文本樣式有關(guān)的屬性包括以下6種：種：ltext-align屬性

13、。屬性。ltext-indent屬性。屬性。ltext-transformt屬性。屬性。ltext-decoration屬性。屬性。lvertical-align屬性屬性。lline-height屬性屬性。XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔5.5.3 顏色和背景屬性顏色和背景屬性 在在CSS中，通過(guò)顏色屬性中，通過(guò)顏色屬性“color”可以設(shè)可以設(shè)置元素的前景色，設(shè)置元素的背景色需要置元素的前景色，設(shè)置元素的背景色需要用用“background-color”屬性。屬性。第23頁(yè)XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔表示顏色的方法，通常有以下幾種：表示顏色的方法，通常有以下幾

14、種：l名稱(chēng)表示法。名稱(chēng)表示法。l“#RGB”表示法。表示法。第24頁(yè)XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔 與背景有關(guān)的設(shè)置除了背景顏色外，還包括與背景有關(guān)的設(shè)置除了背景顏色外，還包括背景圖像，相關(guān)的背景圖像，相關(guān)的CSS屬性有以下幾種：屬性有以下幾種：lbackground-image屬性屬性lbackground-repeat屬性屬性lbackground-position屬性屬性第25頁(yè)XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔5.5.4 設(shè)置文本的顯示方式設(shè)置文本的顯示方式 文本顯示方式是指文本內(nèi)容在瀏覽器中以文本顯示方式是指文本內(nèi)容在瀏覽器中以何種形式來(lái)顯示。通過(guò)何種形式

15、來(lái)顯示。通過(guò)display屬性來(lái)設(shè)置屬性來(lái)設(shè)置。 其取值分別為：其取值分別為：lblock：塊顯示方式：塊顯示方式lline：行顯示方式：行顯示方式llist-item：列表顯示方式：列表顯示方式lnone：不顯示元素的內(nèi)容：不顯示元素的內(nèi)容第26頁(yè)XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔5.6 CSS的顯示規(guī)則的顯示規(guī)則l通常情況下，在通常情況下，在CSS中為某個(gè)元素所設(shè)置中為某個(gè)元素所設(shè)置的顯示格式屬性會(huì)影響到該元素所包含的的顯示格式屬性會(huì)影響到該元素所包含的所有子元素，除非這些子元素重新設(shè)置了所有子元素，除非這些子元素重新設(shè)置了不同的格式屬性。所以，如果沒(méi)有為子元不同的格式屬性。所

16、以，如果沒(méi)有為子元素設(shè)置特定的樣式規(guī)則，子元素將會(huì)自動(dòng)素設(shè)置特定的樣式規(guī)則，子元素將會(huì)自動(dòng)繼承父元素的規(guī)則。繼承父元素的規(guī)則。第27頁(yè)XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔l如果在樣式表中并沒(méi)有為某個(gè)元素設(shè)置樣如果在樣式表中并沒(méi)有為某個(gè)元素設(shè)置樣式規(guī)則，也沒(méi)有父元素的樣式規(guī)則可以繼式規(guī)則，也沒(méi)有父元素的樣式規(guī)則可以繼承，則瀏覽器將使用自己默認(rèn)設(shè)定的規(guī)則承，則瀏覽器將使用自己默認(rèn)設(shè)定的規(guī)則來(lái)顯示。來(lái)顯示。第28頁(yè)XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔 5.7 本章小結(jié)本章小結(jié)lXML關(guān)于文檔瀏覽的基本思想是將數(shù)據(jù)與關(guān)于文檔瀏覽的基本思想是將數(shù)據(jù)與數(shù)據(jù)的顯示分別定義，數(shù)據(jù)的顯示分別定義，XML文檔本身不涉文檔本身不涉及各種數(shù)據(jù)的具體顯示方式，文檔的顯示及各種數(shù)據(jù)的具體顯示方式，文檔的顯示是通過(guò)一個(gè)外部樣式表來(lái)描述的。是通過(guò)一個(gè)外部樣式表來(lái)描述的。第29頁(yè)XML基礎(chǔ)教程第5章 使用CSS顯示XML文檔l本章在講解完了本章在講解完了XML基