第4章XML與CSS

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

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

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

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

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

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

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

8、4_1.xml 北京時(shí)間: 12點(diǎn) 56分 格林威治時(shí)間: 4點(diǎn) 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 標(biāo)記與樣式表標(biāo)

9、記與樣式表 3.一個(gè)一個(gè)CSS就是由若干個(gè)樣式表組成的文本就是由若干個(gè)樣式表組成的文本文件，該文本文件可以使用文件，該文本文件可以使用ANSI和和UTF-8來(lái)來(lái)保存。保存。 4. 關(guān)聯(lián)樣式表關(guān)聯(lián)樣式表CSS 的編碼方式與的編碼方式與XML文件必文件必須一致。須一致。 5. 當(dāng)瀏覽器打開(kāi)當(dāng)瀏覽器打開(kāi)XML文件時(shí)，所有的標(biāo)記將文件時(shí)，所有的標(biāo)記將根據(jù)樣式表給出的顯示規(guī)則、按照標(biāo)記在根據(jù)樣式表給出的顯示規(guī)則、按照標(biāo)記在XML文件中出現(xiàn)的順序顯示自己標(biāo)記中內(nèi)容。文件中出現(xiàn)的順序顯示自己標(biāo)記中內(nèi)容。 張三 男 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 設(shè)置文本的顯示方式 1.塊方式 通過(guò)將屬性display的值指定為block display:block; 使得文本在瀏覽器的一個(gè)塊區(qū)域中顯示 例如 time display:block; 4.3 設(shè)置文本的顯示方式設(shè)置文本的顯示方式 注意：注意： 1.

11、塊的大小依賴于顯示在文本中字符的數(shù)量和字塊的大小依賴于顯示在文本中字符的數(shù)量和字符的大小符的大小,位置默認(rèn)是靠左對(duì)齊位置默認(rèn)是靠左對(duì)齊.如果有若干個(gè)如果有若干個(gè)”文本代表文本代表”都指定自己代表的文本在塊區(qū)域中顯都指定自己代表的文本在塊區(qū)域中顯示示,那么這些塊區(qū)域?qū)凑障群箜樞蚩孔髮?duì)齊那么這些塊區(qū)域?qū)凑障群箜樞蚩孔髮?duì)齊. 2.如果為父標(biāo)記指定的顯示方式為如果為父標(biāo)記指定的顯示方式為”block”;那么那么,當(dāng)子標(biāo)記指定的顯示方式也是當(dāng)子標(biāo)記指定的顯示方式也是”block”時(shí)時(shí),子標(biāo)子標(biāo)記的顯示區(qū)域就是包含于父標(biāo)記的顯示塊區(qū)域中記的顯示區(qū)域就是包含于父標(biāo)記的顯示塊區(qū)域中的一個(gè)塊區(qū)域的一個(gè)塊區(qū)域

12、.4.3 設(shè)置文本的顯示方式 如果想設(shè)置文本塊在瀏覽器中顯示的大小,通過(guò)設(shè)置position,left,top,width和height屬性的值來(lái)準(zhǔn)確地設(shè)置塊區(qū)域的位置和大小。namedisplay:block; position:absolute;left:100;top:120;width:200;height:120;例子2（P78） Cha4_2.xml 劉德華說(shuō)：“我是第一塊！靠左對(duì)齊！” 郭德剛說(shuō)：“我是第二塊！靠左對(duì)齊！” 芙蓉姐姐說(shuō)：“我是第三塊！靠左對(duì)齊！” 范偉說(shuō)：“我牛！我距左面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 設(shè)置文本的顯示方式 設(shè)置塊方式顯示的效果圖 2.行方式 通過(guò)將屬性display的值指定為line display:line; 使得文本以行的方式在瀏覽器中顯示 time display:line; 4.3 設(shè)置文本的顯示方式4.3 設(shè)置文本的顯示方式 注意： 1. 如果有許多“文本代表”都指定自己代表的文本按行的方式在瀏覽器中顯示，那么各行按先后順

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

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

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

17、k”，那么當(dāng)為子標(biāo)記指定的方式是“l(fā)ist-item”時(shí)，子標(biāo)記的列表是指在父標(biāo)記的塊區(qū)域中的列表。 3. 如果為父標(biāo)記指定的顯示方式是“l(fā)ist-item”，那么當(dāng)為子標(biāo)記指定的方式是“l(fā)ist-item”時(shí)，子標(biāo)記的列表是指在父標(biāo)記列表中的子標(biāo)記。例子4（P81）Cha4_4.xml 液晶電視機(jī) 三種價(jià)格： 21寸1500元/臺(tái) 25寸2500元/臺(tái) 29寸3500元/臺(tái) 生產(chǎn)日期：2007.8 軟件學(xué)院硬件部 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 設(shè)置文本的顯示方式 設(shè)置列表方式顯示的效果圖4.3 設(shè)置文本的顯示方式 4.不顯示 通過(guò)將屬性display的值指定為none displ

20、ay:none; 在瀏覽器中不顯示該文本。 time display:none; 4.4 字體與字體有關(guān)的屬性及取值情況與字體有關(guān)的屬性及取值情況: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。（文本的粗細(xì)（文本的粗細(xì) ）font-weight:bold;5. font-size：?jiǎn)挝皇牵簡(jiǎn)挝皇莗t（磅）。（磅）。（字體大小）（字體大?。ゝont-size:12pt; 4.4 字體 字體各個(gè)屬性值顯示的效果圖 4.5 文本樣式與文本樣式有關(guān)的屬性及取值情況:1. text-align：left 、right、center和justify。（對(duì)齊方式）（對(duì)齊方式）例如: text-align: left;2. text-indent：?jiǎn)挝皇窍袼豴x或磅pt。

22、（文本首行縮進(jìn)）（文本首行縮進(jìn)）例如: text-indent: 16pt;4.5 文本樣式文本樣式3. text-transform3. text-transform：uppercaseuppercase、 lowercaselowercase、capitalizecapitalize和和none none 。none none 默認(rèn)。定義帶有小寫字母和默認(rèn)。定義帶有小寫字母和大寫字母的標(biāo)準(zhǔn)的文本。大寫字母的標(biāo)準(zhǔn)的文本。 capitalize capitalize 文本中的每個(gè)單詞以大寫字文本中的每個(gè)單詞以大寫字母開(kāi)頭。母開(kāi)頭。 uppercase uppercase 定義僅有大寫字母。定義

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

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

25、ine;4.5 文本樣式 文本樣式各個(gè)屬性值顯示的效果圖4.5 文本樣式6. line-height例如例如 line-height:2;注意注意:如果子標(biāo)記的樣式表中不指定文本的樣如果子標(biāo)記的樣式表中不指定文本的樣式屬性式屬性,子標(biāo)記就會(huì)使用父標(biāo)記樣式表中的有子標(biāo)記就會(huì)使用父標(biāo)記樣式表中的有關(guān)文本樣式的屬性關(guān)文本樣式的屬性. 例子5（P85） Cha4_5.xmI 請(qǐng)看一個(gè)數(shù)學(xué)公式： (A+B)2= A2+2AB+B2 請(qǐng)看二個(gè)化學(xué)分子式： 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 文本樣式 設(shè)置文本樣式顯示的效果圖XML文檔(練習(xí)1)要求寫出其CSS文件 下面是四種文本的顯示方式 塊方式顯示：我的顯示方式是塊，靠左對(duì)齊 行顯示方式：我是第一行語(yǔ)句，請(qǐng)注意 行顯示方式：我是第二行語(yǔ)句，請(qǐng)?jiān)敿?xì)觀察 列表方式顯示： 第一個(gè)列表 第二個(gè)列表 第三個(gè)列表 我不顯示嗎 效果圖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 邊框 邊框?qū)傩缘暮x： border-style border-top-width border-right-width border-bottom-width border-left-width border-right border- bottom border-left border-color4.6 邊框 注意： 1. 必須首先設(shè)置border-style屬性，使得文本具有邊框，然后再設(shè)置其他屬性。 2

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

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

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

34、也可以是一個(gè)三元組構(gòu)成的顏色border-color:rgb(12,255,220);border-color：上、右、底、左：上、右、底、左 例子6（P87） Cha4_6.xml 我是最大的點(diǎn)邊框: 我是其中的雙線小邊框: 我是其中的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 邊框 設(shè)置邊框顯示的效果圖4.7 邊緣 和邊緣有關(guān)的屬性： margin-top, margin-right, margin-bottom, margin-left 例如: margin-top:20 margin-right:40 例子7（P89） Cha3_7.xmI 高級(jí)灌水師 姓名：劉

36、德華 發(fā)證單位：白宮 初級(jí)灌水師 姓名：華德劉 發(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 邊緣 設(shè)置邊框的邊緣顯示的效果圖4.8 顏色和背景 1. 如果需要指定文本的字符顏色，可以設(shè)置color 屬性，例如 color：rgb（100，255，23）； color：red； 2. 如果需要

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

39、標(biāo)記指定一幅背景圖像即可，由于空標(biāo)記沒(méi)有文本內(nèi)容，其背景的大小為0*0，所以必須用block來(lái)組織文本，并使用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