第4章XML與CSS

1、第四章 XML與CSS主要內容主要內容介紹規(guī)范 CSS(Cascading Style Sheets 層疊樣式表) 講述怎樣用CSS規(guī)范在瀏覽器中來顯示XML標記中的文本內容。XML與樣式表 在XML中內容和表現(xiàn)形式是分開的，XML文檔中沒有關于顯示數(shù)據(jù)樣式的信息。我們在編寫XML文件時，仍然只需要關注文件中的數(shù)據(jù)和數(shù)據(jù)結構，至于它的顯示則交給CSS（層疊樣式表）和XSL（可擴張樣式語言）來完成。 CSS的發(fā)展史 1 CSS是Cascading Style Sheet（層疊樣式表）的英文縮寫。它是HTML網(wǎng)頁標準語言制定者W3C萬維網(wǎng)聯(lián)盟制定并發(fā)布的一個網(wǎng)頁排版樣式標準，用來對HTML有限的表

2、現(xiàn)功能進行補充。CSS的發(fā)展史 2 CSS1（CSS Level 1）是 CSS的第一層次標準，它正式發(fā)布于1996年12月17日。后來1999年1月11日進行了修改。該標準提供簡單的樣式表機制，使的網(wǎng)頁的制作者通過附屬的樣式對HTML文檔的表現(xiàn)進行描述。CSS的發(fā)展史 3 CSS2（CSS Level 2） 1998年 5月 12日被正式作為標準發(fā)布，CSS2基于 CSS1，包含CSS1的所有的特色和功能，并在多個領域進行完善，把表現(xiàn)樣式文檔和文檔內容進行分離。CSS2支持多媒體樣式表，使得我們能夠根據(jù)不同的輸出設備來給文檔制定不同的表現(xiàn)形式。CSS技術優(yōu)勢 1 數(shù)據(jù)重用：編寫好的樣式（CS

3、S）文檔；可以用于多個XML文檔，從而數(shù)據(jù)就達到了重用的目的，節(jié)省了編寫代碼的時間，統(tǒng)一了多個XML文檔的風格。 2 輕松地增加網(wǎng)頁的特殊效果：使用CSS標記，可以非常簡單地對圖片、文本信息進行修飾，設置相關屬性。 3 使元素更加準確定位：使顯示的信息按我們自己的意愿出現(xiàn)在指定的地方。4.1 使用CSS 為了讓XML使用CSS,XML文件必須使用操作指令 將當前XML文件關聯(lián)到某個層疊樣式表。樣式表的URI如果是一個文件的名字，該文件必須和XML文件在同一目錄中，如果是一個鏈接，該鏈接必須是有效的可訪問的。CSS樣式的基本語法樣式的基本語法標志標志標志屬性：標志值；標志屬性：標志標志屬性：標志

4、值；標志屬性：標志值；值；如：如：RootColor:red;font-size:12pt;注意：注意：標記的標記的在在CSS中沒有中沒有“” 標志已標志已“ ”開始，以開始，以“ ”結束結束每個屬性中以每個屬性中以“；”斷開斷開CSS常用屬性常用屬性文字屬性文字屬性說明說明color顏色顏色font-weight字體粗細字體粗細font-size字體大小字體大小left左邊左邊top上端上端width寬度寬度height高度高度4.2 標記與樣式表 一個XML文件在瀏覽器中所顯示的效果4.2 標記與樣式表 對XML應用CSS規(guī)范后顯示的效果 在在CSSCSS中，最重要的概念是樣式表。樣式中，

5、最重要的概念是樣式表。樣式表由一組樣式規(guī)則組成，表由一組樣式規(guī)則組成，通過這組樣式規(guī)則來通過這組樣式規(guī)則來告訴瀏覽器用什么樣的樣式來顯示文本告訴瀏覽器用什么樣的樣式來顯示文本。比如，。比如，告訴瀏覽器使用什么樣的字體、顏色和頁邊距告訴瀏覽器使用什么樣的字體、顏色和頁邊距來顯示文本。來顯示文本。 一個樣式規(guī)則由三部分組成：一個樣式規(guī)則由三部分組成：選擇符選擇符(selector)(selector)(文本代表文本代表) )、屬性屬性(properties)(properties)和屬性的取值和屬性的取值(value).(value).4.2 標記與樣式表標記與樣式表4.2 標記與樣式表 其語法為

6、： selectorproperty:value;(文本代表屬性:值;) 文本代表可以有多種形式，可以是自定義的標記。屬性和值要用冒號隔開，每種屬性之間用分號隔開。在XML文檔中通常是下面的形式：XML自定義元素屬性:屬性值;。4.2 標記與樣式表 例如：有一個XML文檔，該文檔中有這個自定義標記，對這個標記修飾，其格式如下，studentdisplay:block;font-size:35pt;font-weight:bold; ，這個樣式表主要用來顯示標記“student”中所含有的文本內容，其中“display:block;”告知瀏覽器將標記“”中的內容顯示在一個塊區(qū)域；“font-si

7、ze:35pt;”設定該區(qū)域的文本字體的大小為35磅；“font-weight:bold;”的作用是讓文本加重顯示。4.2 標記與樣式表 1. 如果有多個標記的內容需要由完全一樣的方式來顯示，“文本代表”就是把這些標記的名稱用逗號分隔的字符串。例如： name,sex,agedisplay:block;font-size:35pt;font-weight:bold;4.2 標記與樣式表 2. 當xml文件中有許多標記具有相同的名字,我們要使用不同的外觀來顯示他們的內容時, 在CSS文件中, ”文本代表”使用”標記名稱”+ ”#” + ”ID屬性值”來指定規(guī)范某個標記。 例子1（P76） Cha

8、4_1.xml 北京時間: 12點 56分 格林威治時間: 4點 56分 Show1.css time display:block;font-size:20pt;font-weight:bold; time#beijing display:block;font-size:20pt;font-weight:bold; color:rgb(255,0,0); hour display:line;font-size:16pt;color:rgb(0,255,0); minute display:line;font-size:8pt;color:rgb(255,30,120); 4.2 標記與樣式表標

9、記與樣式表 3.一個一個CSS就是由若干個樣式表組成的文本就是由若干個樣式表組成的文本文件，該文本文件可以使用文件，該文本文件可以使用ANSI和和UTF-8來來保存。保存。 4. 關聯(lián)樣式表關聯(lián)樣式表CSS 的編碼方式與的編碼方式與XML文件必文件必須一致。須一致。 5. 當瀏覽器打開當瀏覽器打開XML文件時，所有的標記將文件時，所有的標記將根據(jù)樣式表給出的顯示規(guī)則、按照標記在根據(jù)樣式表給出的顯示規(guī)則、按照標記在XML文件中出現(xiàn)的順序顯示自己標記中內容。文件中出現(xiàn)的順序顯示自己標記中內容。 張三 男 1970.12.28 李四 女 1977.11.25 showStudent.css stud

10、ent display:block;font-size:20pt;font-weight:bold; color:red; sex display:block;font-size:20pt;color:rgb(0,255,0); birthday display:block;font-weight:bold; color:green; 4.3 設置文本的顯示方式 1.塊方式 通過將屬性display的值指定為block display:block; 使得文本在瀏覽器的一個塊區(qū)域中顯示 例如 time display:block; 4.3 設置文本的顯示方式設置文本的顯示方式 注意：注意： 1.

11、塊的大小依賴于顯示在文本中字符的數(shù)量和字塊的大小依賴于顯示在文本中字符的數(shù)量和字符的大小符的大小,位置默認是靠左對齊位置默認是靠左對齊.如果有若干個如果有若干個”文本代表文本代表”都指定自己代表的文本在塊區(qū)域中顯都指定自己代表的文本在塊區(qū)域中顯示示,那么這些塊區(qū)域將按照先后順序靠左對齊那么這些塊區(qū)域將按照先后順序靠左對齊. 2.如果為父標記指定的顯示方式為如果為父標記指定的顯示方式為”block”;那么那么,當子標記指定的顯示方式也是當子標記指定的顯示方式也是”block”時時,子標子標記的顯示區(qū)域就是包含于父標記的顯示塊區(qū)域中記的顯示區(qū)域就是包含于父標記的顯示塊區(qū)域中的一個塊區(qū)域的一個塊區(qū)域

12、.4.3 設置文本的顯示方式 如果想設置文本塊在瀏覽器中顯示的大小,通過設置position,left,top,width和height屬性的值來準確地設置塊區(qū)域的位置和大小。namedisplay:block; position:absolute;left:100;top:120;width:200;height:120;例子2（P78） Cha4_2.xml 劉德華說：“我是第一塊！靠左對齊！” 郭德剛說：“我是第二塊！靠左對齊！” 芙蓉姐姐說：“我是第三塊！靠左對齊！” 范偉說：“我牛！我距左面180像素，距離上面16像素！” Show2.css name#01 display:bloc

13、k; background-color:yellow; width=160; height=100; name#02 display:block; background-color:cyan; width=140; height=100; 4.3 設置文本的顯示方式 設置塊方式顯示的效果圖 2.行方式 通過將屬性display的值指定為line display:line; 使得文本以行的方式在瀏覽器中顯示 time display:line; 4.3 設置文本的顯示方式4.3 設置文本的顯示方式 注意： 1. 如果有許多“文本代表”都指定自己代表的文本按行的方式在瀏覽器中顯示，那么各行按先后順

14、序首尾相接來顯示。 2. 如果為父標記指定的顯示方式是“block”,那么,當為子標記指定的方式是”line”時,子標記是指在父標記的”block”區(qū)域中的”line”。例子3（P79）Cha4-3.xml 這里是現(xiàn)代電影院！ 班級里的女同學先入座了 男同學尾隨著入座吧 這是馬路，不在電影院里哦！ Show3.css cinema display:block;font-size:18pt; color:black; position:absolute; left=100; top=10;width=250; height=100; 4.3 設置文本的顯示方式 設置行方式顯示的效果圖4.3 設置

15、文本的顯示方式 3.按列表方式 通過將屬性display的值指定為list-item display:list-item; 使得文本按列表的方式在瀏覽器中顯示。 time display:list-item; 4.3 設置文本的顯示方式 和list-item屬性有關的屬性是list-style-type,例如:list-style-type:lower-roman; 通過設置該屬性可以更改項目符號的外觀,項目符號的默認外觀是disc(實心圓)。4.3 設置文本的顯示方式list-style-type屬性值和具體的含義disc實心圓circle圓圈square方塊decimal十進制數(shù)lower

16、-roman小寫羅馬數(shù)字upper-roman大寫羅馬數(shù)字lower-alpha小寫英文字母upper-alpha大寫英文字母4.3 設置文本的顯示方式 列表方式各個屬性值顯示的效果圖4.3 設置文本的顯示方式 注意： 1. 如果若干個“文本代表”都指定自己代表的文本按列表的方式在瀏覽器中顯示，那么各個列表按先后順序獨行顯示，如果list-style-type屬性值設置為decimal, lower-roman,upper-roman, lower-alpha和upper-alpha,則這些列表的項目符號會按先后順序遞增。4.3 設置文本的顯示方式 2. 如果為父標記指定的顯示方式是“bloc

17、k”，那么當為子標記指定的方式是“l(fā)ist-item”時，子標記的列表是指在父標記的塊區(qū)域中的列表。 3. 如果為父標記指定的顯示方式是“l(fā)ist-item”，那么當為子標記指定的方式是“l(fā)ist-item”時，子標記的列表是指在父標記列表中的子標記。例子4（P81）Cha4_4.xml 液晶電視機 三種價格： 21寸1500元/臺 25寸2500元/臺 29寸3500元/臺 生產日期：2007.8 軟件學院硬件部 Show4.csstvdisplay:block; font-size:20pt; color:black;price display:list-item; font-size:1

18、8pt; list-style-type:decimal; margin-left:30; color:red;item1 display:list-item; font-size:18pt; list-style-type:square; margin-left:60; color:red; item2 display:list-item; font-size:18pt; list-style-type:square; margin-left:60; color:red; item3 display:list-item; font-size:18pt; list-style-type:squ

19、are; margin-left:60; color:red; date display:list-item; font-size:18pt; list-style-type:decimal; margin-left:30; color:blue; made display:list-item; font-size:18pt; list-style-type:decimal; margin-left:30; color:rgb(150,10,80);4.3 設置文本的顯示方式 設置列表方式顯示的效果圖4.3 設置文本的顯示方式 4.不顯示 通過將屬性display的值指定為none displ

20、ay:none; 在瀏覽器中不顯示該文本。 time display:none; 4.4 字體與字體有關的屬性及取值情況與字體有關的屬性及取值情況:1. font-family（字體）（字體）font-family:Arial;font-family:”Time New Roman”;2. font-style：normal或或italic。（是否斜體）（是否斜體）font-style:italic;4.4 字體3. font-variant：normal和和small-caps。（字母是否大寫）（字母是否大寫）font-variant:small-caps;4. font-weight：no

21、rmal、bold、bolder、lighter、100、200 、300、400、500、600 、700 、800 、900。（文本的粗細（文本的粗細 ）font-weight:bold;5. font-size：單位是：單位是pt（磅）。（磅）。（字體大?。ㄗ煮w大小）font-size:12pt; 4.4 字體 字體各個屬性值顯示的效果圖 4.5 文本樣式與文本樣式有關的屬性及取值情況:1. text-align：left 、right、center和justify。（對齊方式）（對齊方式）例如: text-align: left;2. text-indent：單位是像素px或磅pt。

22、（文本首行縮進）（文本首行縮進）例如: text-indent: 16pt;4.5 文本樣式文本樣式3. text-transform3. text-transform：uppercaseuppercase、 lowercaselowercase、capitalizecapitalize和和none none 。none none 默認。定義帶有小寫字母和默認。定義帶有小寫字母和大寫字母的標準的文本。大寫字母的標準的文本。 capitalize capitalize 文本中的每個單詞以大寫字文本中的每個單詞以大寫字母開頭。母開頭。 uppercase uppercase 定義僅有大寫字母。定義

23、僅有大寫字母。 lowercase lowercase 定義無大寫字母，僅有小寫定義無大寫字母，僅有小寫字母。字母。例如例如 text-transform: uppercase;text-transform: uppercase;4.5 文本樣式4. text-decoration：none、underline、overline、line-through和和blink 。例如例如 text-decoration: underline;none 默認。定義標準的文本。默認。定義標準的文本。 underline 定義文本下的一條線。定義文本下的一條線。 overline 定義文本上的一條線。定義文

24、本上的一條線。 line-through 定義穿過文本下的一條線。定義穿過文本下的一條線。 blink 定義閃爍的文本（無法運行在定義閃爍的文本（無法運行在 IE 和和 Opera 中中）baseline:與參照物的基準線對齊；sub：以下標形式顯示；super：以上標形式顯示；top：與參照物的最高部對齊；text-top：與參照物文字頂部對齊；middle：與參照物對象中間對齊；bottom：與參照物對象底部對齊；text-bottom：與參照物文字底部對齊。4.5 文本樣式5. vertical-align：baseline、top等等例如例如 vertical-align: basel

25、ine;4.5 文本樣式 文本樣式各個屬性值顯示的效果圖4.5 文本樣式6. line-height例如例如 line-height:2;注意注意:如果子標記的樣式表中不指定文本的樣如果子標記的樣式表中不指定文本的樣式屬性式屬性,子標記就會使用父標記樣式表中的有子標記就會使用父標記樣式表中的有關文本樣式的屬性關文本樣式的屬性. 例子5（P85） Cha4_5.xmI 請看一個數(shù)學公式： (A+B)2= A2+2AB+B2 請看二個化學分子式： H2O, CO2. Show5.css math display:block; font-size:16pt; font-style:italic; c

26、olor:black; chemistry display:block; font-size:16pt; color:green; 4.5 文本樣式 設置文本樣式顯示的效果圖XML文檔(練習1)要求寫出其CSS文件 下面是四種文本的顯示方式 塊方式顯示：我的顯示方式是塊，靠左對齊 行顯示方式：我是第一行語句，請注意 行顯示方式：我是第二行語句，請詳細觀察 列表方式顯示： 第一個列表 第二個列表 第三個列表 我不顯示嗎 效果圖titletitle position:absolute;position:absolute;width=200;width=200;background-color:pi

27、nk;background-color:pink;font-size=20;font-size=20; title1title1 display:block;display:block;font-size=26;font-size=26;font-weight:bold;font-weight:bold;color:yellow;color:yellow; title2#01title2#01 font-size=16;font-size=16;color:yellow;color:yellow; title2#02title2#02 display:block;display:block;f

28、ont-size=26;font-size=26;font-weight:bold;font-weight:bold;color:bule;color:bule; item1item1 display:list-item;display:list-item;list-style-type:square;list-style-type:square;margin-left:60;margin-left:60;font-size=16;font-size=16; item2item2 display:list-item;display:list-item;list-style-type:squar

29、e;list-style-type:square;margin-left:60;margin-left:60;font-size=16;font-size=16;item3item3 display:list-item;display:list-item;list-style-type:square;list-style-type:square;margin-left:60;margin-left:60;font-size=16font-size=16title3title3margin-left:20;margin-left:20;font-size=26;font-size=26;font

30、-weight:bold;font-weight:bold;color:bule;color:bule; title4title4display:nonedisplay:none4.6 邊框 邊框屬性的含義： border-style border-top-width border-right-width border-bottom-width border-left-width border-right border- bottom border-left border-color4.6 邊框 注意： 1. 必須首先設置border-style屬性，使得文本具有邊框，然后再設置其他屬性。 2

31、. border-style的屬性值用來設置文本具有邊框，并且邊框四條邊的寬度、樣式和顏色都相同，該屬性可以取值為none、dotted、dashed、solid、double、groove、ridge、inset、outset。4.6 邊框邊框各個屬值的具體含義： dotted 定義點狀邊框。在大多數(shù)瀏覽器中呈現(xiàn)為實線。 dashed 定義虛線。在大多數(shù)瀏覽器中呈現(xiàn)為實線。 solid 定義實線。 double 定義雙線。雙線的寬度等于 border-width 的值。 groove 定義 3D 凹槽邊框。其效果取決于 border-color 的值。 ridge 定義 3D 壟狀邊框。其效

32、果取決于 border-color 的值。 inset 定義 3D inset 邊框。其效果取決于 border-color 的值。 outset 定義 3D outset 邊框。其效果取決于 border-color 的值。 4.6 邊框 邊框各個屬性值顯示的效果圖4.6 邊框 3. border-top-width、 border-bottom-width 、 border-right-width 、 border-left-width等屬性用來設置邊框的上邊、底邊、右邊和左邊的寬度，例如： border-bottom-width:12; border-right-width:12;4.6

33、 邊框 4. border-right、 border-left、 border-bottom 、 border-right 等屬性可用來單獨設置邊框的右邊、左邊和底邊的樣式。即，在設置了border-style屬性后，可以再單獨設置這些屬性，修改邊框的某個邊的樣式。該3個屬性的取值范圍和border-style的相同。4.6 邊框 5. border-color 設置1個顏色值時，4個邊的顏色與設置的顏色相同；設置2個顏色值時，那么上邊和底邊的顏色與設置的第一個顏色相同，左邊和右邊的顏色與設置的第二個顏色相同；設置4個顏色值時，那么按：上、右、底、左的順序指定各邊的顏色4.6 邊框例如：顏色

34、也可以是一個三元組構成的顏色border-color:rgb(12,255,220);border-color：上、右、底、左：上、右、底、左 例子6（P87） Cha4_6.xml 我是最大的點邊框: 我是其中的雙線小邊框: 我是其中的3D小邊框: Show6.css bigFrame display:block; border-style:dotted; border-top-width:15; font-size:18pt; color:red; width=260; height=150; smallFrame#01 display:block; border-style:double

35、; font-size:12pt; color:blue; width=180; height=60;smallFrame#02 display:block; border-style:ridge; font-size:8pt; color:green; width=130; height=30;4.6 邊框 設置邊框顯示的效果圖4.7 邊緣 和邊緣有關的屬性： margin-top, margin-right, margin-bottom, margin-left 例如: margin-top:20 margin-right:40 例子7（P89） Cha3_7.xmI 高級灌水師 姓名：劉

36、德華 發(fā)證單位：白宮 初級灌水師 姓名：華德劉 發(fā)證單位：宮白 Show7.css grade1 display:block; border-style:ridge; border-top-width:15; margin-top:2; margin-left:2; margin-right:2; text-align:center; font-size:12pt; color:red; width=230; height=100; grade2 display:block; border-style:dotted; border-top-width:15; margin-top:12; ma

37、rgin-left:2; margin-right:2; text-align:center; font-size:18pt; color:blue; width=230; height=100;name,authorized display:list-item; margin-left:22; text-align:center; font-size:18pt; color:green;4.7 邊緣 設置邊框的邊緣顯示的效果圖4.8 顏色和背景 1. 如果需要指定文本的字符顏色，可以設置color 屬性，例如 color：rgb（100，255，23）； color：red； 2. 如果需要

38、指定文本的背景顏色，可以設置 background-color屬性，例如 background-color： rgb（150，205， 223）； background-color： yellow；4.9 顯示圖像 1. 可以通過background-image屬性的值為文本指定一幅背景圖像。例如 background-image：URL（文件名字） 2. 可以通過設置background-repeat屬性設置圖像是否通過重復出現(xiàn)來平鋪，例如 background-repeat：repeat、repeat-x、repeat-y、no-repeat 3. 為了單獨顯示一幅圖像，只要形式上為一個空

39、標記指定一幅背景圖像即可，由于空標記沒有文本內容，其背景的大小為0*0，所以必須用block來組織文本，并使用width和height屬性指定塊區(qū)域的大小。 例子8（P91） Cha4_8.xmI 俺是著名的演員潘江江，很多人使用俺的形象 Show8.css tom display:block; position:absolute; top:10; left:10; width:180px; height:300px; text-align:center; font-size:18pt; font-weight:bold; color:blue; border-style:double; background-image:URL(1.jpg); background-repeat:no-repeat; image display:block; position:absolute; top:10; left:200; width:300px; he