第 6 章CSS—XML文體表現(xiàn)

1、第 6 章 CSSXML文體表現(xiàn) 的另一種選擇 主要內(nèi)容：CSS簡(jiǎn)介CSS 的基本規(guī)則CSS樣式表和XML文檔CSS屬性值的類型CSS的基本屬性CSS的新發(fā)展 本章將講述XML文檔的顯示方法CSS（級(jí)聯(lián)樣式表）。通過(guò)實(shí)例重點(diǎn)介紹了CSS1的樣式規(guī)則及相關(guān)屬性，本章最后還介紹了CSS2的新增特點(diǎn)和有關(guān)屬性。6.1 CSS 簡(jiǎn)介一、什么是 CSS CSS（Cascading Style Sheets的簡(jiǎn)稱）即級(jí)聯(lián)樣式表，又名串聯(lián)樣式表，由多條規(guī)則組成。 每條規(guī)則又由選擇符（即標(biāo)記或元素）和“樣式屬性：樣式屬性值”組成。如：CnGamedisplay：block；color：blue CSS目前有兩

2、個(gè)版本：CSS1和CSS2，而CSS3正在審議階段。 CSS最初是用來(lái)顯示HTML文檔的，由于XML、HTML都屬于SGML的子集，因此也可顯示XML文檔，且其效果更佳，因?yàn)閄ML的數(shù)據(jù)與顯示是分開(kāi)的。二、 HTML中使用CSS和XML中使用CSS的對(duì)比 HTML中使用CSS和XML中使用CSS的區(qū)別為： （1）規(guī)則在XML中可適用于幾乎所有標(biāo)記，而在HTML中的應(yīng)用范圍有限（常見(jiàn)的有P、PRE、LI、DIV、H1H6和SPAN）； （2）HTML不能識(shí)別處理指令，因而在HTML中出現(xiàn)了LINK標(biāo)記來(lái)鏈接外部樣式表； （3）XML能更好地體現(xiàn)CSS限定的規(guī)則，尤其在表格處理方面。三、如何顯示

3、XML文檔 要想利用CSS來(lái)顯示XML文檔，只需在 XML文檔的開(kāi)始部分加上如下處理指令： ?xml-stylesheet type=“text/css” href=“CSS的URI”?例EX6-1.xml(另)例EX6-1.css(下)CnGame display:block;font-size:15px; background-color:yellowTeamName color:redCoach font-size:20px;color:greenDate:first-letter font-size:300%; float:left;vertical-align:text-topTea

4、mName:first-letter font-size:200%; color:greenbr display:block【說(shuō)明】（1）由于 XML文檔要引用外部 CSS文檔，所以在第一行 standalone屬性值為“ no”。（2）在 XML文檔的序中使用 ?xml-stylesheet type=“text/css” href=“EX6-1.css”? 引用外部CSS文檔。（3）CSS文檔由多條規(guī)則構(gòu)成，選擇符和屬性之間的空格不一定是必需的。其中具體的屬性設(shè)置見(jiàn)第四節(jié)的介紹。 【注意】本章所要顯示的XML文檔如無(wú)特殊聲明都以EX6-1.xml為例，只要在XML文檔的開(kāi)始處做相應(yīng)的改變！

5、6.2 css基本規(guī)則一、選擇元素 如前所述，規(guī)則由選擇符和屬性及其值構(gòu)成，本節(jié)重點(diǎn)解決選擇符問(wèn)題。那么什么是選擇符呢？所謂選擇符就是CSS規(guī)則中用來(lái)指定規(guī)則適用于那些元素的部分。其具體形式有如下幾種： 1直接指定元素名稱 其規(guī)則為： 元素名屬性1：屬性值1；屬性2：屬性值2； 屬性n：屬性值n 例如：TeamNamedisplay:block;font-size:16pt; weight:bold 2成組選擇符 將應(yīng)用一組相同屬性及其值的元素用逗號(hào)分隔這組元素便構(gòu)成組選擇符。 其規(guī)則為： 元素名1,元素名2,元素名n屬性1:屬性值1;屬性2:屬性值2;屬性n:屬性值n; 例如：TeamNam

6、e,Place,Time,Datedisplsy:block;font-size:16pt; font- weight:bold3偽元素 CSS中有兩種偽元素: 首字母和首行，這是英文文章的需要。不過(guò)，目前網(wǎng)景的Netscape瀏覽器已經(jīng)支持這兩種偽元素了。 首字母： 一個(gè)元素的第一個(gè)字母稱為首字母，它常常用來(lái)與元素中的其他字母區(qū)別。 其格式為： 元素名:first-letter 例如： TeamName:first-letterfont-size:300; float:left;vertical-align:text-top 首行： 一個(gè)元素的第一行稱為首行，它常常被格式化為與眾不同的格式。

7、 其格式為： 元素名:first-line 例如： TeamName:first-linefont-size:300; float:left;vertical-align:text-top例EX6-2.xml(另 )例EX6-2.csspeom:first-letter font-size:30px; color:greenpeom:first-line font-size:40px; color:red; background-color:yellow; font-variant:small-capsBr display:block【說(shuō)明】(1)本實(shí)例是利用偽元素顯示一首英文小詩(shī)，詩(shī)名的第一

8、個(gè)英文字母字體大小為30像素且顏色為綠色，第一行為40像素、顏色為紅色、背景為黃色且字體變體為小寫字母。(2)將空標(biāo)記Br/的display屬性設(shè)置為“block”，可以起到換行的作用。(3)目前IE5.X對(duì)偽元素支持不好，本例用 Netscape6.0進(jìn)行瀏覽 【注意】首行選擇什么內(nèi)容依賴于當(dāng)前窗 口的大小，但無(wú)論如何它只對(duì)首行有效！4偽類 CLASS 以上所介紹的樣式表規(guī)則只能為每種XML標(biāo)志定義一種樣式，然而有時(shí)候會(huì)碰到這種情況：同一個(gè)XML元素需要呈現(xiàn)不同的風(fēng)格；有若干個(gè)不同的XML元素采用相同的樣式規(guī)則。 樣式表提供了解決方法，創(chuàng)建類（CLASS）可以創(chuàng)建同一個(gè) XML標(biāo)志的多種風(fēng)格

9、。 其規(guī)則為： 元素.類名標(biāo)志屬性1:屬性值1;標(biāo)志屬性2:屬性值2; ;標(biāo)志屬性n:屬性值n 在XML文件中定義類名： 元素名 CLASS=“類名” 例如：打算讓巴西隊(duì)顯示為黃色，土耳其隊(duì)顯示為綠色，哥斯達(dá)黎加隊(duì)顯示為紅色，采用Opponent標(biāo)記便可實(shí)現(xiàn)。例EX6-3.cssCnGame display:block;color:blackOpponent.BX color:yellowOpponent.TRQ color:blueOpponent.GSDLJ color:redBr display:block【說(shuō)明】(1)在實(shí)例 EX6-1 中為元素 Opponent設(shè)置了 CLASS屬性

10、，以便引用 CSS文檔中的偽類選擇符。(2)在實(shí)例EX6-3.CSS中利用偽類Opponent .BX等設(shè)置樣式規(guī)則。 此外，可以在XML文檔中直接定義CLASS，其語(yǔ)法只是比上面的少了一個(gè)標(biāo)志，其規(guī)則為： .類名標(biāo)志屬性1:屬性值1;標(biāo)志屬性2:屬性值2; ;標(biāo)志屬性n:屬性值n例EX6-4.cssCnGame display:block;color:black.BX color:black.TRQ color:blue.GSDLJ color:redBr display:block同樣可以實(shí)現(xiàn)EX6-3.css格式的要求。5ID特性 創(chuàng)建CLASS并不是建立多種風(fēng)格的一唯手段，ID也可以用

11、來(lái)實(shí)現(xiàn)同一規(guī)則被應(yīng)用到頁(yè)面中不同的地方，對(duì)特殊的元素施加不同的樣式。 其規(guī)則為： #id值標(biāo)志屬性1:屬性值1;標(biāo)志屬性2:屬性值2; ;標(biāo)志屬性n:屬性值n 在XML文件中定義ID名： 元素名 ID=“ID名” 例如：打算讓巴西隊(duì)隊(duì)名顯示為黃色，土耳其隊(duì)名顯示為綠色，哥斯達(dá)黎加隊(duì)名顯示為紅色，采用TeamName標(biāo)記便可實(shí)現(xiàn)。例EX6-5.cssCnGame display:block;color:black#c1 color:yellow#c2 color:green#c4 color:redBr display:block【說(shuō)明】(1)在實(shí)例EX6-1.xml中為元素TeamName設(shè)置

12、了ID屬性，以便引用CSS文檔中的ID特性。(2)在實(shí)例EX 6-5.css中利用偽類C1、C2等設(shè)置樣式規(guī)則。 6上下文選擇符 有時(shí)候需要根據(jù)XML文檔的樹(shù)型結(jié)構(gòu)來(lái)精確定制子元素的樣式，可以采用上下文選擇符完成。其規(guī)則為：祖元素 父元素子元素 標(biāo)志屬性1:屬性值1; 標(biāo)志屬性2:屬性值2;標(biāo)志屬性n:屬性值n例如：打算讓主教練姓名為紅色粗體，其余信息為黑色。例EX6-6.cssCnGame display:block;color:black;font-weight:lighterCnGame Opponent Coach Name color:red;font-weight:boldBr d

13、isplay:block【說(shuō)明】(1)在實(shí)例EX6-1.xml中元素CnGame、Opponent、 Coach、Name存在多級(jí)父子關(guān)系。(2)在實(shí)例EX6-6.css中利用“CnGame Opponent Coach Name”上下文選擇符來(lái)設(shè)置樣式規(guī)則?！咀⒁狻可舷挛倪x擇符一般很少使用，而是通過(guò)繼承和級(jí)聯(lián)來(lái)格式化元素！7STYLE特性 有時(shí)候需要將特定的樣式一次性應(yīng)用于特定的元素而無(wú)須單獨(dú)的CSS文檔。其規(guī)則為： 元素名 STYLE=“標(biāo)志屬性1:屬性值1; 標(biāo)志屬性2:屬性值2;標(biāo)志屬性n:屬性值n”例如：打算讓主教練姓名為紅色粗體，其余信息為黑色。例EX6-3.xml巴西韓國(guó)西歸埔2

14、002年6月8日19:30羅納爾多里瓦爾多斯科拉里1948年9月11日上網(wǎng)【說(shuō)明】 （l）XML文檔引用了一個(gè)不存在的 CSS文檔。（2）對(duì)球星羅納爾多直接指定： STYLE=“font-size:30px;color:red” 使之顯示為30PX且為紅色?！咀⒁狻?STYLE特性優(yōu)先級(jí)高于CSS文檔，但一般很少使用！二、繼承 前一小節(jié)所舉的實(shí)例中有很多元素都沒(méi)指定樣式，而它們又的確實(shí)實(shí)在在地按照某種樣式顯示出來(lái)了。這究竟是什么原因呢？其實(shí)它們是繼承了父元素的樣式。 所謂繼承即如果在CSS文檔中沒(méi)有為某些元素定義樣式規(guī)則，那么這些元素將使用其父元素的樣式設(shè)置。不過(guò)，父元素的背景和框?qū)傩詿o(wú)法被繼

15、承。當(dāng)然，如果子元素也指定了自己的樣式，那么以它自己的樣式為準(zhǔn)?！菊f(shuō)明】（l）CnGame font-family: “隸書”,“Times New Roman”,arial,serif;color:red是父元素的樣式規(guī)則，可供子元素繼承。（2）TeamNamefont-weight:bolder;font-style:itailc; color:green和coach,star display:none是子元素的樣式規(guī)則，此時(shí)將以子元素自己的規(guī)則為準(zhǔn)。（3）在顯示結(jié)果中隊(duì)名為斜體綠色，教練球星不顯示便是子元素自己的樣式規(guī)則，而其余子元素為紅色隸書就是繼承了CnGame父元素的樣式規(guī)則。EX

16、6-7.cssCnGame font-family:“隸書”,“Times New Roman”,arial,serif;color:redTeamName font-weight:bolder;font-style:italic;color:green Br display:block三、級(jí)聯(lián)順序 將一個(gè)樣式表與一個(gè)XML文檔相聯(lián)系，就是級(jí)聯(lián)。在級(jí)聯(lián)中有可能造成多個(gè)級(jí)聯(lián)規(guī)則作用于一個(gè)元素的沖突，本小節(jié)重點(diǎn)講述級(jí)聯(lián)的優(yōu)先級(jí)，有關(guān)多個(gè)CSS與XML文檔的聯(lián)系請(qǐng)參閱6.3節(jié)。級(jí)聯(lián)的優(yōu)先級(jí)有如下規(guī)則：越專門的規(guī)則，其優(yōu)先級(jí)越高。如:ID特性優(yōu)先于CLASS偽類，CLASS偽類優(yōu)先于元素。XML文檔中

17、引入的CSS文檔比CSS文檔中用IMPORT指令導(dǎo)入的CSS文檔優(yōu)先。作者標(biāo)記為!important的聲明，讀者標(biāo)記為!important的聲明，作者未標(biāo)記為!important的聲明，讀者未標(biāo)記為 !important的聲明這4種規(guī)則的優(yōu)先級(jí)依次遞減。例EX6-8.css#c1,#c2,#c6 font-size:20px;color:red.bx,.trq,.gsdlj font-size:15px; color:greenbr display:block【說(shuō)明】 bx,.trq,.gsdlj font-size:15px; color:green出現(xiàn)在父元素Opponent中，按繼承要求

18、，具有ID屬性的子元素也應(yīng)為此樣式規(guī)則，但I(xiàn)D屬性的優(yōu)先級(jí)高于CLASS偽類，所以子元素顯示為20像素紅色?！咀⒁狻繎?yīng)盡量避免級(jí)聯(lián)順序顯示元素！6.3 樣式表和文檔的聯(lián)系一、XML-STYLESHEET處理指令 我們已知道，要想利用 CSS來(lái)顯示 XML文檔只需在 XML文檔的序（PROLOG）部分加上如下處理指令： ?xml-stylesheet type=“text/css” href=“css的 URI”? 就可以將CSS文檔包含在XML文檔中。在此需要特別指出的是，如果XML中僅包含了一個(gè)無(wú)法定位的CSS文檔，那么瀏覽器將以自己的默認(rèn)方式顯示XML文檔。二、IMPORT指令 在CSS文

19、檔中使用import指令來(lái)導(dǎo)入其他一個(gè)或多個(gè)CSS文檔，可以將多張樣式表作用于XML文檔。其格式為：絕對(duì)地址import uri(CSS的URI)使用時(shí)應(yīng)注意:import指令必須出現(xiàn)在CSS的開(kāi)頭并在任何規(guī)則之前。應(yīng)用樣式時(shí)，XML文檔處理指令使用的樣式表中的規(guī)則總要覆蓋被導(dǎo)入的樣式表中的規(guī)則；如果在CSS文檔中導(dǎo)入了多張樣式表，則以它們導(dǎo)入的順序級(jí)聯(lián)排列。此外，不能循環(huán)導(dǎo)入，即在a.css導(dǎo)入b.css，而b.css又要導(dǎo)入a.css。例EX6-9.cssimport url(EX6-7.css)CnGame font-family:“宋體”,“Times New Roman”,arial

20、,serif;color:redTeamName font-weight:bolder; font-style:italic;color:green Br display:block【注意】目前IE5.X不支持import指令顯示XML文檔！三、其它方法 1!important重要聲 !important指令可以提升規(guī)則的優(yōu)先級(jí)，尤其在處理開(kāi)發(fā)者和使用者的規(guī)則誰(shuí)優(yōu)先方面更為重要，因而在CSS的版本中作出了大的調(diào)整。 其語(yǔ)法為： 元素名屬性:屬性值 !important 使用時(shí)的情況是復(fù)雜多變的，而使用者決定樣式規(guī)則尤其重要，在CSS2中使用者就可決定最終的樣式。 2瀏覽器為大多數(shù)屬性提供默認(rèn)的

21、樣式 當(dāng)為XML文檔指定一個(gè)無(wú)法找到的CSS文檔時(shí)，瀏覽器將以自己理解的方式為XML文檔提供默認(rèn)的樣式以進(jìn)行顯示。6.4 CSS屬性值的類型 CSS屬性具有名稱和值，其中屬性值有4種類型：長(zhǎng)度、URL、顏色、關(guān)鍵字，分別介紹如下。一、長(zhǎng)度值 在CSS中，長(zhǎng)度是一種度量尺寸，用于寬度、高度、字號(hào)、字和字母間距、文本的縮排、行高、頁(yè)邊距、貼邊、邊框線寬以及許許多多的其他屬性。 三種指定方法：絕對(duì)單位、相對(duì)單位、百分比。絕對(duì)單位： 表6-1長(zhǎng)度的絕對(duì)單位 使用時(shí)在長(zhǎng)度單位前加上數(shù)值即可。 例如3mm、12pt等。英寸in厘米cm毫米mm磅pt十二點(diǎn)pc英寸1.02.5425.4726厘米0.3937

22、11028.34644.7244毫米0.039370.11.02.834640.47244磅0.01389 0.0352806 0.3528061.00.83333十二點(diǎn) 0.166670.42334.233121.0相對(duì)單位： 長(zhǎng)度的相對(duì)單位有三種，其中“em”表示當(dāng)前字體中字母的寬度；“ex”表示當(dāng)前字體中字母的高度；“px”表示像素的大小，一般不常使用。長(zhǎng)度的百分比單位： 長(zhǎng)度也可以用某一百分比來(lái)指定。一般地，它是以父屬性的當(dāng)前值為基準(zhǔn)。 例如： 如果 CnGame元素的 font-size為 20磅，子元素 Place的font-size設(shè)置為 200，那么 Place的 font-s

23、ize將為 40磅。二、URL值 有三個(gè)CSS屬性可以包括URL值： background-image、list-style-image和list-style。出現(xiàn)在URL中的圓括號(hào)、逗號(hào)、空格字符、單引號(hào)（）和雙引號(hào)（“）必須加以轉(zhuǎn)義方才有效，具體如表6-2所示。 表6-2 URL的轉(zhuǎn)義碼表 符號(hào)轉(zhuǎn)義碼空格 SPACE%20逗號(hào)，%2C單引號(hào)%27雙引號(hào)”%22左括號(hào)(%28右括號(hào))%29三、顏色值 CSS能夠使網(wǎng)頁(yè)五光十色，絢麗多姿，關(guān)鍵在于它可以設(shè)置網(wǎng)頁(yè)的前景色和背景色，并可應(yīng)用于任何元素。 在 CSS中使用顏色值的屬性有： color、background-color、border-c

24、olor。 CSS提供了4種方式來(lái)指定顏色： 名稱、十六進(jìn)制分量、十進(jìn)制分量、百分比。具體如表6-3所示。表6-3 CSS屬性的顏色顏色十進(jìn)制RGB十六進(jìn)制RGBRGB百分比純紅rgb(255,0,0)#FF0000rgb(100%,0%,0%)純藍(lán)rgb(0,0,255)#0000FFrgb(0%,100%,100%)純綠rgb(0,255,0)#00FF00rgb(0%,100%,0%)白色rgb(255,255,255)#FFFFFFrgb(100%,100%,100%)黑色rgb(0,0,0)#000000rgb(0%,0%,0%)淺紫rgb(255,204,255)#FFCCFFrg

25、b(100%,80%,100%)淺灰rgb(153,153,153)#999999rgb(60%,60%,60%)褐色rgb(153,102, 51)#996633rgb(60%,40%,20%)粉紅rgb(255,204,204)#FFCCCCrgb(100%,80%,80%)橙色rgb(255,204,204)#FFCC00rgb(100%,80%,80%)四、 關(guān)鍵字值 CSS中的關(guān)鍵字隨屬性而變，無(wú)法一一列舉，但相類似的屬性一般支持類似關(guān)鍵字。 【注意】 本節(jié)的屬性值將在下節(jié)討論和使用，自行參閱下一節(jié)！6.5 CSS基本屬性一、display 屬性 在CSS1中，元素的display屬

26、性有四個(gè)可能的值，這些值由關(guān)鍵字構(gòu)成。 表6-4 display的屬性值屬性值作用Block塊級(jí)元素，可包含內(nèi)聯(lián)元素和其它塊級(jí)元素，為CSS1的默認(rèn)值Inline內(nèi)聯(lián)元素，可包含其它內(nèi)聯(lián)元素，但不包含塊級(jí)元素，為CSS2的默認(rèn)值List-item列表項(xiàng)元素，相當(dāng)于Word中的項(xiàng)目符號(hào)，又可包含三個(gè)附加屬性None使元素不可見(jiàn) 前面己經(jīng)有很多使用block屬性值的實(shí)例，inline與之相差不大。 1List-item 屬性值 如果將display設(shè)置為listitem，則進(jìn)一步設(shè)置list-item的三個(gè)附加屬性。表105 list-item的附加屬性附加屬性作用 list-style-type

27、指定項(xiàng)目符號(hào)的形狀，如disc,circle,square,decimal,lower-roman,upper-alpha,none等list-style-image從文件加載gif等點(diǎn)位圖像作為項(xiàng)目符號(hào)list-style-position指定項(xiàng)目符號(hào)出現(xiàn)在列表項(xiàng)中的位置，可取值inside和outside list-style簡(jiǎn)略屬性，可一次性設(shè)置list-style-type,list-style-image,list-style-position的值 例EX6-10CnGame display:block;font-family:“隸書”, “Times New Roman”, ari

28、al, serif Opponent display:list-item; list-style-type:square; list-style-image:url(“ssi.gif”); list-style-position:insideBr display:block 【說(shuō)明】 Opponent display:list-item;list-style-type:square;list-style-image:url(“ssi.gif”);list-style-position:inside規(guī)則先將display屬性值設(shè)置為listitem，然后設(shè)置其附加屬性，此規(guī)則也可用list-st

29、yle簡(jiǎn)略屬性設(shè)置，其規(guī)則Oppoentdisplay:list-item;list-style:square url(“ssi.gif”) inside。 【注意】目前IE5.X不支持附加屬性！ 2whitespace屬性 whitespace屬性告訴瀏覽器如何處理元素內(nèi)部空格符、制表符和換行符。其值可以有三種。表10-6 Whitespace屬性的三種取值屬性值作用Normal 將多個(gè)空格轉(zhuǎn)換成一個(gè)空格，換行視屏幕和頁(yè)面而定Pre空格按實(shí)際的多少而顯示Nowrap 將多個(gè)空格轉(zhuǎn)換成一個(gè)空格，但換行按原文檔原樣輸出例EX6-11.csspeom display:blocktitle disp

30、lay:inline;whitespace:nomalcontent display:block;whitespace:nowrapbr display:block【說(shuō)明】title display:inline;whitespace:nomal 規(guī)則將title元素顯為nomal ；content display:block;whitespace:nowrap規(guī)則將 content 元素顯不為 nowrap?！咀⒁狻磕壳癐E5.X不支持nowrap屬性值！display屬性不能被繼承。二、 字體屬性 CSS支持5種字體屬性： 字體家族（font-family） 字體黑度（font-weigh

31、t） 字體變體（font-variant） 字體風(fēng)格（font-style） 字體尺寸（font-size） 此外font屬性是一個(gè)總體屬性，可一次性指定以上各種屬性和屬性值。 字體屬性主要是設(shè)置字體的外觀，能被子元素繼承。1字體家族（font-family） 在CSS中可以通過(guò)font-family指定字體。其規(guī)則為： 元素名font-family :字族,字族,字族例如： CnGamefont-family: “宋體”,“Times New Roman”， arial,serif使用時(shí)：如果字族之間有空格，就像 Times New Roman，必須用引號(hào)將之括起；中文字體也須用引號(hào)括起；用

32、逗號(hào)列出多種類型的列表，按先后次序確定個(gè)字族的優(yōu)先級(jí)，以防瀏覽用戶無(wú)前面的字體類型時(shí)，可以用后一種字體類型將之取代。表6-7 CSS的字族表通用名稱具體字族 Serif(襯線體)Times,Times New RomanSans-Serif(非襯線體)Helvetica,VerdanaMonosace(等寬字體)Courier,MonacoCursive(草書)Zapf,ChanceryFantasy(夢(mèng)幻體)Westerm,Critter例EX6-12.cssCnGame font-family:“隸書”, “Times New Roman”, arial, serif Br display

33、:block【說(shuō)明】 CnGame font-family:“隸書”, “Times New Roman”, arial, serif 使元素 CnGame顯示時(shí)有多個(gè)字族可選擇，但優(yōu) 先順序由規(guī)則中屬性值的先后順序而定。 2字體黑度（font-weight） font-weight屬性用以指定字體的粗細(xì)。其可能的屬性值有： normal（相當(dāng)于 400） bold（相當(dāng)于700） lighter、bolder以及數(shù)值100-900 默認(rèn)值為normal 并不是所有字體都可以顯示這些指定的加粗程度，因此有些情況下這些指定值會(huì)被替代。 例如：100到300被lighter替代，600到900則替

34、換bolder， 反之亦然。例EX6-13.cssCnGame font-family:“隸書”, “Times New Roman”, arial, serif Time font-weight:900place font-weight:100;font-family:“宋體”Br display:block【說(shuō)明】Timefont-weight:900和Place font-weight:100;font-family:“宋體”規(guī)則中 font-weight屬性分別顯示為粗體和細(xì)線體。【注意】細(xì)線體在100-300之間區(qū)分不是很明顯！3 . 字體變體（font-variant） font-

35、 variant屬性用以指定字體的變體。 屬性值有： normal（普通） small-caps(小型大寫字母) 默認(rèn)值為：normal 該屬性是讓字體以小型大寫字母方式來(lái)顯示，看上去是一般大寫字母的7580左右。它適用于某些需要特殊表現(xiàn)的標(biāo)題中。例EX6-14.cssPeom font-family:“隸書”,“Times New Roman”， arial，serif title font-variant: small-capsAuthour color:redContent font-variant: normalBr display:block【說(shuō)明】title font-varian

36、t: small-caps和Content font-variant: normal規(guī)則中font-variant屬性分別顯示為小寫字母和正常狀態(tài)。 4字體風(fēng)格（font-Style） font-Style的屬性值有： normal（普通） italic（斜體） oblique（傾斜） 其默認(rèn)值為normal例EX6-15.csspeom font-family:“隸書”, “Times New Roman”, arial, serif Authour font-variant: small-caps;font-style: italicContent font-style: italicBr

37、 display:block【說(shuō)明】 Authour font-variant: small-caps;font-style: italic 和 Content font-style: italic 規(guī)則中font-style屬性分別顯示為斜體和正常狀態(tài)。【注意】 目前IE5.X不能很好地支持font-style屬性！ 5字體尺寸（font-size） font-size的屬性值可設(shè)置為： 絕對(duì)尺寸、相對(duì)尺寸、長(zhǎng)度、百分比。絕對(duì)尺寸從小到大依次有： xx-small、x-small、small、medium、Large、x-large、xx-large等七種。其默認(rèn)值為medium。它們以各種

38、字體的medium尺寸成比例縮放，每一級(jí)15倍。相對(duì)尺寸有： Larger和smaller兩種。根據(jù)父元素字體的大小來(lái)決定子元素縮放后的大小。長(zhǎng)度是以pt、points、cm、mm、inch 等度量單位用具體數(shù)值來(lái)指定字體的尺寸大小 (這種方式盡量少用)。百分比是把字體設(shè)置成父元素尺寸的百分比值，可以任意指定百分比數(shù)值。例EX6-16.cssCnGame font-family:“隸書”, “Times New Roman”;font-size:10pt TeamName font-size:120%Coach,Star font-size: 0.15in;color:greenTime,Pl

39、ace,Date font-size:large;color:navyBr display:block【說(shuō)明】 在實(shí)例中出現(xiàn)了各種font-size的屬性值，它們很多都以 父元素的尺寸為基準(zhǔn)。 6字體（font） font總體屬性可以把上述字體的各種屬性合并指定，即提供了一個(gè)實(shí)現(xiàn)字體屬性的快捷方式。使用時(shí)各種屬性值之間用空格隔開(kāi)，且按以下順序指定： font-style、font-variant、font-weigh首先出現(xiàn)，三者無(wú)先后之分，但都可省略。 font-size其次出現(xiàn)，且不可省略。 font-family最后出現(xiàn)，且不可省略。例Ex6-17.cssCnGame font:bold

40、 small-caps 10pt “隸書”, “Times New Roman” Coach,Star font:400 0.15in “宋體”, “Times New Roman”;color:greenBr display:block 【說(shuō)明】 以規(guī)則CnGame font:bold small-caps 10pt “隸書”, “Times New Roman”為例:font為總體屬性;屬性值“bold small-caps”指定 font-weigh和 font-variant屬性在前; “10pt”指定 font-size屬性在其次; “隸書”，“Times New Roman”指定

41、font-family屬性在最后。三、 color顏色屬性 color顏色屬性主要是設(shè)置文檔中元素的顏色，也可用來(lái)指定文本段落、標(biāo)題、背景等的顏色。其值有： 顏色名稱、十六進(jìn)制分量、十進(jìn)制分量以及百分比。 顏色屬性它能被子元素繼承。例EX6-18.cssCnGame font:bold small-caps 12pt “隸書”, “Times New Roman”;color:red Time,Place,Date color:#126afcStar color:rgb(100%,30%,5%)Coach color:rgb(156,115,199)Br display:block【說(shuō)明】 實(shí)

42、例中使用了顏色的各種設(shè)置方法，使各個(gè)元素呈現(xiàn)不 同的顏色?？蓞㈤喌谒墓?jié)的顏色值類型。四、 background背景同性 CSS支持 5種背景屬性：背景顏色（background-color）背景圖像（ background-image）背景圖像的平鋪（ background-repeat）背景附加（ background-attachment）背景位置（ background-position） 此外 background屬性是一個(gè)總體屬性，可一次性指定以上各種屬性和屬性值。 背景屬性主要是設(shè)置整個(gè)文檔的背景，它不能被子元素繼承。1背景顏色（background-color） backgrou

43、nd-color屬性用來(lái)指定頁(yè)面或元素的背景顏色，其設(shè)置方法與 color顏色屬性相同。例Ex6-19.cssCnGame font:bold small-caps 12pt “隸書”, “Times New Roman”;background-color:red Time,Place,Date background-color:#126afcCoach,Star background-color: rgb(156,115,199)Br display:block【說(shuō)明】 實(shí)例將各個(gè)元素設(shè)置為不同的背景顏色，所用的屬性值請(qǐng)參閱第四節(jié)的顏色值類型。 2背景圖像（background-image）

44、 background-image屬性用來(lái)指定對(duì)象的背景圖像，其屬性值有none、unl（圖像的相對(duì)路徑或絕對(duì)路徑）。例Ex6-20.cssCnGame font:12pt “隸書”; background-image:url(refresh.gif) Br display:block【說(shuō)明】 實(shí)例中為父元素CnGame添加了背景圖像。3背景圖像的平鋪（background-repeat） background-repeat屬性用來(lái)指定背景圖像的顯示方式，其屬性值有： no-repeat（無(wú)平鋪） repeat（平鋪） repeat-x（x方向平鋪） repeat-y（y方向平鋪） 默認(rèn)值為r

45、epeat 該屬性需要與background-image和background-position組合使用。例EX6-21.cssCnGame font:12pt “隸書”; background-image:url(refresh.gif); background-repeat:no-repeat Br display:block【說(shuō)明】 實(shí)例中欲使圖象無(wú)平鋪，即只有一個(gè)圖象，但目前IE5.X不能很好地支持?！咀⒁狻?目前IE5.X不能很好地支持background-repeat屬性！ 4背景附加（background-attachment） background-attchment屬性用來(lái)指

46、定對(duì)象的背景圖像是否與對(duì)象一起滾動(dòng)，或是固定在頁(yè)面上的某一個(gè)位置，其屬性值有： soroll（隨對(duì)象一起滾動(dòng)） fixed（固定） 默認(rèn)值為 scroll 該屬性需要與 background-image組合使用。例EX6-22.cssCnGame background-image:url(refresh.gif); background-repeat:no-repeat; background-attachment:fixed Br display:block【說(shuō)明】 實(shí)例中欲使圖象固定，不隨文檔一起滾動(dòng)?！咀⒁狻?目前IE5.X支持background- attachment屬性！ 5背景位

47、置（background-position） background-position屬性用來(lái)指定背景圖像在整個(gè)文檔中的位置，其屬性值有：垂直位置（vertical）用 top、center、bottom和具體數(shù)值、百分比給定；水平位置（horizontal）用left、center、right和具體數(shù)值、百分比給定。例Ex6-23.cssCnGame background-image:url(refresh.gif); background-repeat:no-repeat; background-position:center Br display:block 【說(shuō)明】 實(shí)例中利用backg

48、round-position屬性將圖像設(shè)置為居中。 【注意】 目前IE5.X不支持background-position屬性！ 6背景屬性（background） background總體屬性可以把上述背景的各種屬性合并指定，即提供了一個(gè)實(shí)現(xiàn)背景屬性的快捷方式。使用時(shí)各種屬性值之間用空格隔開(kāi)，且順序可以任意指定，也省略任意不需要指定的值。例如： CnGame background- image: url(refresh.gif); background-repeat:no-repeat; background-position:20px 50px; background-attachment:

49、fixed 用 background屬性簡(jiǎn)寫為： CnGamebackground：url (refresh.gif) no-repeat 20px 50px fixed 其具體含義參閱以上各分屬性。五、text文本屬性 CSS支持八種文本屬性：文本對(duì)齊（text-align）、單詞間距（word-spacing）、文本縮進(jìn)（text-indent）、行高（line-height）、字母間距（letter-spacing）、文本裝飾（text-decoration）、垂直對(duì)齊（verticalalign）、文本變換（text-transform）。 文本屬性主要是設(shè)置文本的一些顯示特性，例如文

50、本對(duì)齊、文本縮進(jìn)、行間距、字間距等。它不能被子元素繼承。 1文本對(duì)齊（text-align） text-lign用來(lái)設(shè)置元素的對(duì)齊方式，其屬性值有：left（左對(duì)齊）、right（右對(duì)齊）、center（居中對(duì)齊）和 justify（兩端對(duì)齊）。它只適用于塊級(jí)元素。例EX6-24.cssPeom display:block;background-color:red TItle text-align:centerAuthour text-align:justifyBr display:block【說(shuō)明】 實(shí)例中的text-align屬性欲使顯示的Title元素居中，Authour元素兩端對(duì)齊。

51、【注意】 目前IE5.X不支持text-align屬性！ 2單詞間距（word-spacing） word-spacing屬性用來(lái)設(shè)置元素中單詞之間的間距，其屬性值可用長(zhǎng)度類型給予指定。例 Ex6-25.cssPeom display:block;word-spacing:1em Title word-spacing:0.02incontent word-spacing:0.1mmBr display:block【說(shuō)明】 實(shí)例中分別對(duì)元素Peom、Title、Authour的單詞間距進(jìn) 行了設(shè)置。3文本縮進(jìn)（text-indent） text-indent屬性用來(lái)控制文本段落第一行的縮進(jìn)，相當(dāng)

52、于Word段落中的首行縮進(jìn)，其屬性值可以是絕對(duì)長(zhǎng)度或段落寬度的百分比。例 Ex6-26.cssCnGame display:block;word-spacing:1em Opponent text-indent:2cmBr display:block【說(shuō)明】 實(shí)例中對(duì)元素Oppoent進(jìn)行了文本縮進(jìn)控制。 4行高（line-height） line-height屬性用來(lái)設(shè)置行與行之間的間距，其屬性值可以為數(shù)值、長(zhǎng)度或百分比，百分比以行高為基準(zhǔn)。例Ex6-27.cssCnGame display:block;word-spacing:1em Opponent text-indent:1cm;li

53、ne-height:200%Br display:block【說(shuō)明】 實(shí)例中設(shè)置了元素Oponent的行高。5字母間距（letter-spacing） letter-spacing屬性用來(lái)設(shè)置字中字母與字母之間的距離，同樣可以用數(shù)值、長(zhǎng)度或百分比來(lái)指定，百分比以字符大小為基準(zhǔn)。例Ex6-28.cssPeom display:block;word-spacing:1em Authour letter-spacing:0.12inContent letter-spacing:1.0mmBr display:block【說(shuō)明】實(shí)例中利用letter-spacing屬性為Authour元素設(shè)置了字母間

54、距。 6文本裝飾（text-decoration） text-decoration屬性用來(lái)裝飾文檔，其屬性值有： underline（下劃線）、overline（底線）、 line-through（刪除線）、blink（閃爍）、 none（無(wú)裝飾）。例EX6-29.cssCnGame display:block;word-spacing:1em Opponent text-indent:1cm; line-height:200%TeamName text-decoration:underlineStarName text-decoration:blinkBr display:block【說(shuō)明】

55、實(shí)例中為元素TeamName加上下劃線，元素StarName加上閃爍效果?！咀⒁狻磕壳?IE5.X不支持blink屬性值！ 7垂直對(duì)齊（vertical-align） vertical-align屬性用來(lái)指定元素如何根據(jù)文本的基線定位，即元素相對(duì)于其他文本的位置，特別有用的是利用它可設(shè)置上標(biāo)、下標(biāo)。其屬性值：baseline（基準(zhǔn)線） super（上標(biāo)）sub（下標(biāo)） top（頂部）text-top（文本頂部） middle（中）bottom（底部） textbottom（文本底部）百分比例EX6-30.cssCnGame display:block;word-spacing:1em Oppo

56、nent text-indent:1cm;line-height:250%TeamName vertical-align:sub;color:navyStarName vertical-align:super;color:redTime vertical-align:bottom;color:purpleBr display:block【說(shuō)明】 實(shí)例中利用verticla-align屬性為多個(gè)元素進(jìn)行了基線定位。 8文本變換（text-transform） text-transform屬性用來(lái)指定英文字母的大小寫形式.其屬性值：capitalize（首字母大寫） uppercase（大寫）lo

57、wercase（小寫） none（無(wú)）默認(rèn)值為none例EX6-31.cssPeom display:blockTitle text-transform:uppercase;color:red Authour text-transform:lowercase;color:purpleContent text-transform:noneBr display:block【說(shuō)明】實(shí)例中利用text-transform屬性為多個(gè)元素進(jìn)行了大小寫轉(zhuǎn)換。六、 框?qū)傩?CSS支持六種框?qū)傩裕哼吘啵╩argin） 邊界（border）填充（padding） 尺寸（width和height）浮動(dòng)（float）

58、 清除（clear）每種屬性又有許多附加屬性?？?qū)傩灾g的關(guān)系如圖所示: 邊界 邊距 填充 元素FfffffffffffffffffffffffffffGggggggggggggggggggHhhhhhhhhhhhhhhhhhhjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjjj 每一個(gè)網(wǎng)頁(yè)都可以理解成是被一個(gè)大方框框起來(lái)的，而頁(yè)面中不同的部分又可以分為一個(gè)個(gè)小的方框，因此定義框?qū)傩员憧蓾M足此方面的要求。它不能被子元素繼承。 1邊距屬性（margin） 邊距屬性margin用來(lái)指定頁(yè)面四邊與框的邊框線之間的空白距離，其附加屬性有： 左邊距（ margin-left） 右邊距（

59、 margin-right） 上邊距（ margin-top） 下邊距（ margin-bottom） 每一個(gè)附加屬性只影響到一條邊。 此外，還有一個(gè)總體屬性margin，它提供了一個(gè)同時(shí)設(shè)置四個(gè)邊距的機(jī)會(huì)，其值的個(gè)數(shù)有4種情況，滿足一定的規(guī)律。另外，這些規(guī)律也滿足本小節(jié)中具有四邊的其它實(shí)行。表6-8 總體屬性之個(gè)數(shù)規(guī)律個(gè) 數(shù)規(guī) 律1個(gè)同時(shí)應(yīng)用于四邊2個(gè)第一個(gè)應(yīng)用于上邊、下邊，第二個(gè)應(yīng)用于左邊、右邊3個(gè)第一個(gè)應(yīng)用于上邊，第二個(gè)應(yīng)用于左邊、右邊，第三個(gè)應(yīng)用下邊4個(gè)依次應(yīng)用于上、右、下、左四邊例EX6-32.cssCnGame display:block;color:black; font-wei

60、ght:lighter; margin:6mm 5mm 4mm 9mmCnGame Opponent Coach Name color:redBr display:block【說(shuō)明】實(shí)例中依次將整個(gè)文檔的上、右、下、左四個(gè)邊距設(shè)置為6mm、5mm、4mm、9mm。 2邊界屬性（border） 邊界屬性border用來(lái)設(shè)置文檔周圍的邊框線，可以更加突出邊距效果。它包含如下附加屬性：邊界寬度（ border-width）包含 上邊界寬（ border-top-width） 右邊界寬（ border-right-width） 下邊界寬（ border-bottom-width） 左邊界寬（ bord