網(wǎng)頁(yè)設(shè)計(jì)基礎(chǔ)第五章

1、第5章 CSS基礎(chǔ)應(yīng)用第5章 CSS基礎(chǔ)應(yīng)用CSS是Cascading Style Sheets的縮寫，中文意思為層疊式樣式表，簡(jiǎn)稱樣式表。使用CSS可以快速對(duì)網(wǎng)頁(yè)中的元素的樣式進(jìn)行精確控制。與前面使用HTML標(biāo)簽控制網(wǎng)頁(yè)外觀不同，使用CSS來定義網(wǎng)頁(yè)的外觀樣式可以實(shí)現(xiàn)內(nèi)容和表現(xiàn)的相對(duì)分離，提高頁(yè)面瀏覽速度并有效減少網(wǎng)頁(yè)制作和維護(hù)的工作量。此外，CSS還提供了很多利用HTML無法控制和實(shí)現(xiàn)的顯示效果。5.1 CSS簡(jiǎn)介在HTML中，用、這樣的標(biāo)簽來表達(dá)“這里是段落”、“這里是表格”之類的信息，并可以通過瀏覽器來顯示出這些元素。為了使HTML標(biāo)簽在瀏覽器中顯示時(shí)能有不同的表現(xiàn)形式，就需要不斷地將

2、新的HTML標(biāo)簽和屬性（如字體標(biāo)簽和顏色屬性）添加到HTML規(guī)范中。給HTML增加很多的屬性，并通過這些添加的屬性來控制網(wǎng)頁(yè)的顯示效果，使得網(wǎng)頁(yè)中的HTML代碼變得很臃腫。5.1 CSS簡(jiǎn)介CSS解決了利用HTML進(jìn)行網(wǎng)頁(yè)排版和顯示不同效果時(shí)代碼臃腫的問題。CSS是一種定義樣式（如字體、顏色和位置）的語(yǔ)言，用于描述如何格式化和顯示網(wǎng)頁(yè)中的信息。CSS樣式可直接存儲(chǔ)在HTML網(wǎng)頁(yè)中，也可存儲(chǔ)為獨(dú)立的樣式表文件。不管以哪種方式保存，樣式表都包含將樣式應(yīng)用于特定類型元素的樣式規(guī)則。在外部使用時(shí)，樣式規(guī)則放在外部樣式表文檔中，文件擴(kuò)展名為.css。5.1 CSS簡(jiǎn)介樣式規(guī)則可應(yīng)用于網(wǎng)頁(yè)中的各種元素，如

3、文本段落或鏈接的格式化指令。樣式規(guī)則由一個(gè)或多個(gè)樣式屬性及其值組成。CSS中的“層疊（cascading）”表示樣式規(guī)則應(yīng)用于HTML文檔元素的方式。具體地說，CSS中的樣式形成一個(gè)層次結(jié)構(gòu)，更具體的樣式覆蓋通用樣式。樣式規(guī)則的優(yōu)先級(jí)由CSS根據(jù)這個(gè)層次結(jié)構(gòu)決定，從而實(shí)現(xiàn)層疊效果。可將CSS的層疊機(jī)制看成一種類似繼承的關(guān)系，在這種繼承關(guān)系中，父親的特征傳遞給子女，但子女有更特殊的特征。基本樣式規(guī)則適用于整個(gè)樣式表，但可被更具體的樣式規(guī)則覆蓋。5.1 CSS簡(jiǎn)介綜上所述，簡(jiǎn)單地說，HTML的標(biāo)簽主要是定義網(wǎng)頁(yè)元素的內(nèi)容，而CSS決定如何顯示HTML元素，就像HTML的字體標(biāo)簽和顏色屬性所起的作用

4、那樣。由于允許同時(shí)控制多重頁(yè)面的樣式和布局，CSS可以稱得上是Web設(shè)計(jì)領(lǐng)域中的一個(gè)突破。網(wǎng)站開發(fā)者能夠?yàn)槊總€(gè)HTML元素定義CSS樣式，并將其應(yīng)用于希望的任意多個(gè)頁(yè)面中。如果需要進(jìn)行全局更新，只需簡(jiǎn)單地改變樣式，網(wǎng)站中的所有元素就會(huì)自動(dòng)地更新。5.1.1 CSS語(yǔ)法要想使用CSS對(duì)網(wǎng)頁(yè)的布局、字體、顏色、背景和其他顯示效果進(jìn)行精確地控制，需要先掌握CSS的基本語(yǔ)法。1.CSS語(yǔ)法格式CSS語(yǔ)法由selector（選擇符）、property（屬性）和value（值）3部分構(gòu)成，語(yǔ)法格式如下：selectorproperty:valueselector通常是希望定義的HTML元素或標(biāo)簽，prop

5、erty是希望改變的屬性，每個(gè)屬性都有一個(gè)值。屬性和值用冒號(hào)分開，由花括號(hào)括起來，這樣就組成了一個(gè)完整的樣式聲明（declaration）。例如，bodycolor:blue表示將body元素內(nèi)的前景色（文字顏色）定義為藍(lán)色。其中，body是選擇符，花括號(hào)內(nèi)的部分是樣式聲明，color為屬性，blue為值。1.CSS語(yǔ)法格式如果屬性的值是由多個(gè)單詞組成的，則必須將值用引號(hào)引起來，例如：pfont-family:sans serif當(dāng)需要對(duì)一個(gè)選擇符的多個(gè)屬性指定值時(shí)，使用分號(hào)將所有的屬性和值分開，例如: ptext-align:center;color:red 為了提高CSS樣式代碼的可讀性，

6、也可以分行寫成下面的形式：Ptext-align:center;color:red2.選擇符CSS語(yǔ)法中的選擇符包括以下幾種類型，這里除了基本的HTML元素或標(biāo)簽之外，還有一些其他類型。1）類型選擇符類型選擇符以文檔語(yǔ)言對(duì)象類型（element）為選擇符。對(duì)于HTML文檔來說就是網(wǎng)頁(yè)，而文檔語(yǔ)言對(duì)象類型就是HTML中的元素或標(biāo)簽，類型選擇符的語(yǔ)法格式如下：EsRules例如，pfont-size:2px;定義的樣式是設(shè)置所有段落標(biāo)簽中文字的字號(hào)為12px，其中的段落標(biāo)簽p就是類型選擇符。2）類選擇符類選擇符能夠把相同的元素分類定義為不同的樣式，定義類選擇符時(shí)，需要在定義的類的名稱前面加一個(gè)點(diǎn)號(hào)

7、。類選擇符的語(yǔ)法格式如下：E.CLASSsRules例如，要對(duì)兩個(gè)段落進(jìn)行設(shè)置，一個(gè)段落設(shè)置為右對(duì)齊，一個(gè)段落設(shè)置為居中，可以先定義兩個(gè)類：p.righttext-align:rightp.centertext-align:center以后要將類用在不同的段落中時(shí)，只需在HTML標(biāo)簽中加入定義的class參數(shù)：2）類選擇符類選擇符還有一種用法，即在選擇符中省略HTML標(biāo)簽名，這樣可以把幾個(gè)不同的元素定義成相同的樣式，例如，.center text-align: center表示定義.center的類選擇符為文字居中排列。這樣的類可以被應(yīng)用到任何元素上。下面使h1元素（標(biāo)題1）和p元素（段落）都

8、歸為.center類，使兩個(gè)元素的樣式都跟隨.center這個(gè)類選擇符，語(yǔ)句如下：這種省略HTML標(biāo)簽的類選擇符是最常用的CSS選擇符類型，使用這種方法，用戶可以很方便地在任意元素上套用預(yù)先定義好的類樣式。3）ID選擇符ID選擇符以“#”來定義。ID選擇符可以為標(biāo)有特定ID的HTML元素指定特定的樣式。由于同一HTML文檔中元素的ID是唯一的，所以ID只能在一個(gè)頁(yè)面中出現(xiàn)一次。ID選擇符的語(yǔ)法格式如下：#IDsRules例如，#red color:red;表示定義元素的顏色為紅色，#green color:green;表示定義元素的顏色為綠色下面的HTML代碼中，id屬性為red的p元素顯示為

9、紅色，而id屬性為green的p元素顯示為綠色。 這個(gè)段落是紅色。這個(gè)段落是綠色。由于ID選擇符局限性很大，只能單獨(dú)定義某個(gè)元素的樣式，一般只在特殊情況下使用。4）包含選擇符如果需要單獨(dú)對(duì)某種元素的包含關(guān)系定義樣式表，如元素1中包含元素2，只對(duì)在元素1中的元素2進(jìn)行定義，對(duì)單獨(dú)的元素1或元素2無定義，那么可以使用包含選擇符，其語(yǔ)法格式為：E1 E2sRules例如，table afont-size:12px表示改變?cè)诒砀駜?nèi)的鏈接樣式文字大小為12像素，而表格外的鏈接的文字仍為默認(rèn)大小。5）選擇符分組為了減少樣式的重復(fù)定義，可以把相同屬性和值的選擇符組合起來書寫，用逗號(hào)將選擇符分開，其語(yǔ)法格式如

10、下：E1,E2,E3sRules例如：h1, h2, h3, h4, h5, h6 color: green表示該選擇符分組中包含的所有標(biāo)題元素，每個(gè)標(biāo)題元素的文字都為綠色。其效果完全等效于：h1 color: green h2 color: greenh3 color: green h4 color: greenh5 color: green h6 color: green5.1.2 層疊性層疊性就是繼承性，CSS的繼承規(guī)則是外部的元素樣式會(huì)保留下來給這個(gè)元素所包含的其他元素繼承。事實(shí)上，所有在元素中嵌套的元素都會(huì)繼承外層元素指定的屬性值，有時(shí)會(huì)把很多層嵌套的樣式疊加在一起，除非另外更改。例

11、如，在標(biāo)簽中嵌套標(biāo)簽，并對(duì)div進(jìn)行如下樣式定義：divcolor: red;font-size:9pt例如，HTML文檔中存在如下代碼時(shí)：這個(gè)段落的文字為紅色9號(hào)字5.1.2 層疊性p元素中的內(nèi)容會(huì)繼承div定義的屬性，在段落中的文字將均為紅色9號(hào)字。這就是層疊的概念或者說是繼承的概念。需要注意的是，有些情況下內(nèi)部選擇符不繼承其外部選擇符的值。例如，上邊框的屬性值是不會(huì)繼承的，但理論上這些都是特殊的個(gè)別現(xiàn)象，用戶只需要記住幾個(gè)特別不會(huì)進(jìn)行繼承的屬性值的就行了。另外，當(dāng)樣式表層疊或繼承遇到?jīng)_突時(shí)，總是以最后定義的樣式為準(zhǔn)。如果上例中定義了p元素的顏色：div color: red; font-

12、size:9ptp color: blue5.1.2 層疊性那么上面代碼中段落的文字應(yīng)該為藍(lán)色9號(hào)字。其中，段落中的文字大小為9號(hào)字是繼承div屬性的，而color屬性則依照最后p中定義的屬性進(jìn)行顯示。不同的選擇符定義相同的元素時(shí)，要考慮到不同的選擇符之間的優(yōu)先級(jí)。在ID選擇符、類選擇符和類型選擇符中，因?yàn)镮D選擇符是最后加到元素上的，所以優(yōu)先級(jí)最高，其次是類選擇符，最后是類型選擇符。5.1.3 注釋在CSS中可以插入注釋來說明代碼的意思。注釋有利于以后編輯和更改代碼時(shí)理解代碼的含義。在瀏覽器中，注釋是不顯示的。CSS注釋以“/*”開頭，以“*/”結(jié)尾，例如：/*定義段落樣式表*/Ptext-

13、align: center; /*文本居中排列 */ccs color: black; /*文字為黑色 */font-family: arial /*字體為arial */在網(wǎng)頁(yè)中嵌入的樣式表有4種，分別是：鏈接的外部樣式表、內(nèi)部樣式表、嵌入樣式表和導(dǎo)入的樣式表。在將這4種CSS文件插入HTML文件時(shí)，CSS文件的定義可以放置在HTML文件的頭部、主體和外部。其中，內(nèi)部樣式表定義在HTML文件頭部，嵌入樣式表定義在HTML文件主體，外部樣式表、導(dǎo)入樣式表定義在HTML文件的外部。5.1.4 在網(wǎng)頁(yè)中插入CSS插入鏈接的外部樣式表先要把樣式表保存為一個(gè)單獨(dú)的文件，然后在HTML文件中使用標(biāo)簽鏈接

14、，這個(gè)標(biāo)簽必須放到HTML代碼的中。插入鏈接的外部樣式表的語(yǔ)法格式如下：1.鏈接的外部樣式表其中，rel=“stylesheet”是指在HTML文件中使用的是外部樣式表，type=“text/css”指明該文件的類型是樣式表文件；href用于設(shè)置樣式表文件的地址，可以為絕對(duì)地址或相對(duì)地址。外部樣式表文件中不能包含有任何HTML標(biāo)簽，并且CSS要和HTML文件一起發(fā)布到服務(wù)器上，這樣在瀏覽器中打開網(wǎng)頁(yè)時(shí)，瀏覽器會(huì)按照HTML網(wǎng)頁(yè)所鏈接的外部樣式表來顯示。1.鏈接的外部樣式表一個(gè)鏈接的外部樣式表文件可以應(yīng)用于多個(gè)HTML文件中。當(dāng)改變這個(gè)樣式表文件時(shí)，所有鏈接了該樣式表的網(wǎng)頁(yè)都隨之改變。因此鏈接的

15、外部樣式表常用在制作大量相同樣式的網(wǎng)頁(yè)中，因?yàn)槭褂眠@種方法不僅能夠減少重復(fù)工作量，而且方便以后的修改和編輯，有利于站點(diǎn)的維護(hù)。同時(shí)，在瀏覽網(wǎng)頁(yè)時(shí)一次性將樣式表文件下載，減少了代碼的重復(fù)下載。1.鏈接的外部樣式表插入內(nèi)部樣式表是通過標(biāo)簽把樣式表的內(nèi)容直接定義在HTML文件的標(biāo)簽內(nèi)。插入內(nèi)部樣式表的語(yǔ)法格式如下：2.內(nèi)部樣式表其中，標(biāo)簽用來說明所要定義的樣式，type=“text/css”說明這是一段樣式表代碼。標(biāo)簽的加入是為了防止一些不支持CSS的瀏覽器將之間的CSS代碼當(dāng)成普通的字符串顯示在網(wǎng)頁(yè)中。插入內(nèi)部樣式表就是將所有的CSS樣式表信息都列于HTML文件的頭部，這些樣式就可以在這個(gè)HTML

16、文件內(nèi)部進(jìn)行調(diào)用。如果想對(duì)網(wǎng)頁(yè)一次性插入樣式表，則可選用該方法。2.內(nèi)部樣式表插入嵌入樣式表是在HTML代碼的主體，即內(nèi)的標(biāo)簽或元素中直接加入樣式表。用這種方法可以很直觀地對(duì)某個(gè)元素直接定義樣式。插入嵌入樣式表的語(yǔ)法格式如下：3.嵌入樣式表其中，HTML標(biāo)簽就是頁(yè)面中標(biāo)記HTML元素的標(biāo)簽，如、等。sytle參數(shù)后面引號(hào)中的內(nèi)容就相當(dāng)于樣式表花括號(hào)中的內(nèi)容，style參數(shù)可以應(yīng)用于HTML文件中的標(biāo)簽，以及除了、和之外的任意網(wǎng)頁(yè)元素。嵌入樣式表的效果只能控制某個(gè)標(biāo)簽，所以比較適用于指定網(wǎng)頁(yè)中某一小段文字的顯示風(fēng)格或某個(gè)元素的樣式。3.嵌入樣式表插入導(dǎo)入的外部樣式表是指在樣式表的區(qū)域內(nèi)引用一個(gè)外

17、部的樣式表文件，和插入外部樣式表的方法類似，但導(dǎo)入時(shí)需要使用import進(jìn)行聲明，一般都放在內(nèi)來使用。插入導(dǎo)入的外部樣式表的語(yǔ)法格式如下：import url(外部樣式表文件地址)；4.導(dǎo)入的外部樣式表在這里，import語(yǔ)句后的“；”是不可省略的，另外外部樣式表文件的擴(kuò)展名必須為.css，樣式表地址同樣既可以是絕對(duì)地址也可以是相對(duì)地址。某些瀏覽器可能會(huì)不支持導(dǎo)入的外部樣式表，所以此方法沒有鏈接的樣式表常用。4.導(dǎo)入的外部樣式表網(wǎng)頁(yè)中存在最多的元素就是文字，如何高效地控制文字的表現(xiàn)形式是網(wǎng)頁(yè)設(shè)計(jì)人員非常關(guān)心的問題。設(shè)置文字的字體屬性是CSS最常見的用途之一。CSS的字體屬性可以用于設(shè)置字體系列

18、（font-family）、字體大小（font-size）、字體加粗（font-weight）、字體風(fēng)格（font-style）和字體變形（font-variant）等。5.2 設(shè)置文本字體字體系列也就是平常所說的字體，如宋體、黑體、楷體等。在CSS中可以通過設(shè)置font-family屬性來設(shè)置在網(wǎng)頁(yè)中采用哪種字體系列，其語(yǔ)法格式如下：font-family:字體1,字體2,字體3應(yīng)用font-family屬性可以一次定義多個(gè)字體，在瀏覽器讀取字體時(shí)，會(huì)按照定義的先后順序來決定選用哪種字體。若瀏覽器在計(jì)算機(jī)上找不到第一種字體，則會(huì)自動(dòng)讀取第二種字體，若第二種字體也找不到，則自動(dòng)讀取第三種字體，

19、這樣依次類推。如果定義的所有字體都找不到，則選用計(jì)算機(jī)系統(tǒng)的默認(rèn)字體。5.2.1 字體系列在定義英文字體時(shí)，如果英文字體名稱是由多個(gè)單詞組成的，并且單詞之間有空格，那么一定要將字體名用引號(hào)引起來。例如，font-family:“Times News Roman”。如果在瀏覽器所在的計(jì)算機(jī)上找不到指定字體，則按順序選擇字體進(jìn)行顯示，如果所有指定字體都找不到，則用默認(rèn)字體進(jìn)行顯示。5.2.1 字體系列【例5-1】定義標(biāo)題2的字體為黑體，定義段落p的字體的先后順序是隸書、楷體、宋體。樣式的代碼如下：h2font-family:黑體pfont-family:隸書,楷體,宋體網(wǎng)頁(yè)中的元素應(yīng)用該樣式表后，

20、在瀏覽器中的顯示效果如圖5-1所示。圖5-1 設(shè)置字體系列網(wǎng)頁(yè)中文字字體大小的一致性和協(xié)調(diào)性直接決定了訪問者訪問網(wǎng)頁(yè)時(shí)的直接視覺感受。通過CSS中字體大小屬性font-size的設(shè)置，可以精確設(shè)置網(wǎng)頁(yè)中字體的大小。設(shè)置字體大小的語(yǔ)法格式如下：font-size:絕對(duì)尺寸|相對(duì)尺寸|關(guān)鍵字|百分比5.2.2 字體大小絕對(duì)尺寸是指字體大小不會(huì)受其他元素的影響而變化，如顯示分辨率、父元素字體大小等。使用絕對(duì)尺寸設(shè)置字體大小時(shí)，需要指定單位。常見的絕對(duì)尺寸單位包括in（英寸）、px（像素）、pt（點(diǎn)或磅值）等，最常用的單位是px。如果沒有指定單位，瀏覽器會(huì)默認(rèn)以px為單位。相對(duì)尺寸是指字體大小會(huì)繼承該

21、元素屬性的前一個(gè)屬性值。絕對(duì)尺寸和相對(duì)尺寸也可以使用關(guān)鍵字來定義字體大小。5.2.2 字體大小絕對(duì)尺寸的關(guān)鍵字有7個(gè)，分別是xx-small（極?。?、x-small（較?。mall（?。edium（標(biāo)準(zhǔn)）、large（大）、x-large（較大）、xx-large（極大）。相對(duì)尺寸有兩個(gè)關(guān)鍵字larger（較大）和smaller（較小）。相對(duì)尺寸larger是指在它上一個(gè)關(guān)鍵字基礎(chǔ)上擴(kuò)大一級(jí)，而smaller是指縮小一級(jí)。百分比是以父元素字體的大小為參考值，在父元素字體大小的基礎(chǔ)上增大或縮小的百分比。5.2.2 字體大小【例5-2】利用絕對(duì)尺寸定義類樣式p1的字體大小為0.2英寸，類樣

22、式p2的字體大小為16px，類樣式p3的字體大小為18pt。樣式代碼如下：.p1font-size:0.2in.p2font-size:16px.p3font-size:18pt網(wǎng)頁(yè)中元素應(yīng)用該樣式后，在瀏覽器中的顯示效果如圖5-2所示。圖5-2 用font-size設(shè)置字體大小利用關(guān)鍵字定義類樣式p1的字體大小為xx-small，類樣式p2的字體大小為x-small，類樣式p3的字體大小為small，類樣式p4的字體大小為medium，類樣式p5的字體大小為large，類樣式p6的字體大小為x-large，類樣式p7的字體大小為xx-large。樣式代碼如下：.p1font-size: xx

23、-small .p2font-size:x-small.p3font-size:small .p4font-size:medium.p5font-size:large .p6font-size:x-large.p7font-size:xx-large網(wǎng)頁(yè)中元素應(yīng)用這些樣式的顯示效果如圖5-3所示?！纠?-3】圖5-3 使用關(guān)鍵字設(shè)置字體大小在CSS中，使用font-weight屬性可設(shè)置字體加粗效果，相當(dāng)于HTML中的或標(biāo)簽。設(shè)置字體加粗效果的語(yǔ)法格式如下：font-weight: normal | bold | bolder | lighter | numberfont-weight的屬性值

24、normal代表正常粗細(xì)，bold表示粗體，bolder表示加粗體，lighter表示比正常字體還細(xì)的細(xì)體，number表示按照數(shù)值來進(jìn)行加粗，數(shù)值有100900共9個(gè)級(jí)別，數(shù)值越大字體越粗，而前面的bold值相當(dāng)于數(shù)值700。5.2.3 字體加粗定義5個(gè)字體加粗的樣式類.p1.p5。樣式代碼如下：.p1font-weight: normal .p2font-weight: lighter .p3font-weight: bold.p4font-weight: bolder .p5font-weight: 900網(wǎng)頁(yè)中元素應(yīng)用這些樣式后，在瀏覽器中的顯示效果如圖5-4所示?！纠?-4】圖5-4

25、 設(shè)置字體加粗效果在HTML中可以使用標(biāo)簽將字體設(shè)置為斜體，而在CSS中使用font-style屬性來設(shè)置字體的斜體效果。設(shè)置字體風(fēng)格的語(yǔ)法格式如下：font-style:normal | italic | oblique其中，normal表示正常顯示文字，italic表示斜體顯示文字，oblique表示比斜體italic傾斜角度更大的一種斜體顯示方式。5.2.4 設(shè)置斜體定義3個(gè)字體加粗的樣式類.p1.p3。樣式代碼如下：.p1font-style: normal.p2font-style: italic.p3font-style: oblique網(wǎng)頁(yè)中元素應(yīng)用這些樣式后，在瀏覽器中的顯示效

26、果如圖5-5所示。【例5-5】圖5-5 設(shè)置斜體效果設(shè)置字體變形，就是設(shè)置英文字體是否顯示為小型的大寫字母。在CSS中使用font-variant屬性設(shè)置英文字體變形效果。設(shè)置字體變形的語(yǔ)法格式如下：font-variant：normal|small-caps其中，normal表示正常字體，small-caps表示英文字體顯示為小型大寫字母。5.2.5 字體變形定義2個(gè)字體風(fēng)格的樣式類.p1和.p2，分別代表正常字體和將英文字體顯示為小型大寫字母。樣式代碼如下：.p1font-variant: normal.p2font-variant: small-caps網(wǎng)頁(yè)中元素應(yīng)用這些樣式后，在瀏覽器

27、中的顯示效果如圖5-6所示?！纠?-6】圖5-6 設(shè)置英文字體變形效果font是一種復(fù)合屬性，可以同時(shí)對(duì)字體的多個(gè)屬性進(jìn)行設(shè)置，包括字體系列、字體大小、字體風(fēng)格、字體加粗和字體變形。設(shè)置字體多個(gè)屬性的語(yǔ)法格式如下：font:font-family|font-size|font-style|font-weight|font-variantfont屬性用于在設(shè)置多個(gè)字體屬性時(shí)進(jìn)行略寫，直接寫字體屬性的屬性值，屬性值和屬性值之間用空格隔開。5.2.6設(shè)置字體的多個(gè)屬性定義樣式.p1，代表字體為黑體，字體大小為18px，字體風(fēng)格為斜體，字體加粗并將英文字體顯示為小型大寫字母等多個(gè)樣式屬性。樣式代碼如下

28、：.p1 font: small-caps bold italic 18px 黑體網(wǎng)頁(yè)中元素應(yīng)用這些樣式后，在瀏覽器中的顯示效果如圖5-7所示?！纠?-7】圖5-7 設(shè)置字體的多個(gè)屬性CSS中的文本樣式是指文本段落的樣式。通過設(shè)置文本樣式的相關(guān)屬性，可以改變文本縮進(jìn)、文本對(duì)齊、字間隔、文本裝飾，行間距等。通常這些外觀樣式很難通過HTML進(jìn)行控制，而CSS的文本樣式解決了相應(yīng)的問題。5.3 設(shè)置文本樣式text-indent屬性用來控制文本段落首行縮進(jìn)的距離。當(dāng)該屬性沒有設(shè)置屬性值時(shí)，默認(rèn)值為不進(jìn)行文本縮進(jìn)。設(shè)置段落縮進(jìn)的語(yǔ)法格式如下：text-indent:長(zhǎng)度|百分比其中，縮進(jìn)的長(zhǎng)度包括長(zhǎng)度

29、值和長(zhǎng)度單位，長(zhǎng)度單位可以使用之前提到的px（像素）、pt（點(diǎn)或磅值）等所有的單位。百分比則是相對(duì)上一級(jí)元素的寬度而定的。5.3.1 文本段落縮進(jìn)定義樣式.p1.p3，設(shè)置文本段落首行縮進(jìn)的距離為30px、30pt和10%。樣式代碼如下：.p1 text-indent:30px.p2 text-indent:30pt.p3 text-indent:10%網(wǎng)頁(yè)中元素應(yīng)用這些樣式后，在瀏覽器中的顯示效果如圖5-8所示?！纠?-8】圖5-8 設(shè)置文本段落縮進(jìn)text-align屬性用來控制文本對(duì)齊的方式，其功能類似于Word中的段落對(duì)齊方式。設(shè)置文本對(duì)齊方式的語(yǔ)法格式如下：text-align: l

30、eft | right | center | justify其中，left、right、center、justify分別表示左對(duì)齊、右對(duì)齊、居中對(duì)齊和兩端對(duì)齊。該屬性可以應(yīng)用于HTML中的任何塊級(jí)標(biāo)簽，如、等。5.3.2 文本對(duì)齊方式定義樣式.p1設(shè)置文本的水平對(duì)齊方式為左對(duì)齊，樣式.p2為右對(duì)齊，樣式.p3為居中對(duì)齊，樣式.p4為兩端對(duì)齊。樣式代碼如下：.p1text-align: left.p2text-align: right.p3text-align: center.p4text-align: justify網(wǎng)頁(yè)中的元素應(yīng)用這些樣式后，在瀏覽器中的顯示效果如圖5-9所示?！纠?-9】圖

31、5-9 設(shè)置文本對(duì)齊方式word-spacing屬性用于設(shè)置文本的字間距，其語(yǔ)法格式如下：word-spacing: normal |長(zhǎng)度其中，normal是默認(rèn)設(shè)置，表示間距正常。長(zhǎng)度包括長(zhǎng)度值和長(zhǎng)度單位，長(zhǎng)度值為正，表示加大字間距；長(zhǎng)度值若為負(fù)值，表示縮小字間距。5.3.3 文本字間距定義樣式.p1設(shè)置字（單詞）間距為標(biāo)準(zhǔn)間距，樣式.p2設(shè)置字（單詞）間距為10px。樣式代碼如下：.p1 word-spacing: normal .p2 word-spacing: 10px 網(wǎng)頁(yè)中元素應(yīng)用這些樣式后，在瀏覽器中的顯示效果如圖5-10所示?！纠?-10】圖5-10 設(shè)置文本字間隔5.3.4

32、文本修飾效果text-decoration屬性用于對(duì)文字添加一些常用的修飾效果，如設(shè)置下劃線和刪除線等。設(shè)置文字修飾效果的語(yǔ)法格式如下：text-decoration: underline | overline | line-through | blink | nonetext-decoration屬性共有5個(gè)屬性值。underline表示對(duì)文字添加下劃線，就像HTML中的元素一樣；overline表示給文本添加上劃線；line-through表示對(duì)文本添加刪除線；blink實(shí)現(xiàn)文本閃爍效果，這個(gè)效果只有Netscape等少數(shù)瀏覽器支持；none表示關(guān)閉所有文本修飾，以文本默認(rèn)的方式顯示，也是

33、屬性的默認(rèn)值。若要去掉超鏈接的下劃線就可以使用屬性值none。 定義樣式.p1設(shè)置文字修飾為添加下劃線，樣式.p2設(shè)置文字修飾為添加上劃線，樣式.p3設(shè)置文字修飾為添加刪除線，樣式.p4設(shè)置為關(guān)閉所有文本修飾。樣式代碼如下：.p1 text-decoration: underline.p2 text-decoration: overline.p3 text-decoration: line-through.p4 text-decoration: none網(wǎng)頁(yè)中元素應(yīng)用這些樣式后，在瀏覽器中的顯示效果如圖5-11所示?！纠?-11】圖5-11 設(shè)置文字修飾line-height屬性用于設(shè)置文本的

34、行間距，其語(yǔ)法格式如下：line-height: normal | 數(shù)字 | 長(zhǎng)度 | 百分比其中，normal表示使用瀏覽器默認(rèn)的行間距，一般由字體大小屬性來決定；數(shù)字表示行高為該元素字體大小與該數(shù)字相乘的結(jié)果；長(zhǎng)度表示行距由長(zhǎng)度單位和長(zhǎng)度值確定；百分比表示行距是該元素字體大小的百分比。5.3.5 行間距定義樣式.p1設(shè)置文字行間距為默認(rèn)行間距，樣式.p2文字行間距為字體大小的1.2倍，樣式.p3文字行間距為20px，樣式.p4文字行間距為字體大小的160%。樣式代碼如下：.p1 line-height: normal .p2 line-height: 1.2.p3 line-height:

35、 20px .p4 line-height: 150%網(wǎng)頁(yè)中元素應(yīng)用這些樣式后，在瀏覽器中的顯示效果如圖5-12所示?！纠?-12】圖5-12 設(shè)置行間距網(wǎng)頁(yè)中的每個(gè)元素都有一個(gè)前景色和背景色。前景色和背景色決定整個(gè)網(wǎng)頁(yè)的色彩基調(diào)和訪問者直觀的視覺及心理感受。此外，在CSS中，不僅允許應(yīng)用純色作為背景，也允許使用背景圖像，并且可以利用其特有的一些屬性創(chuàng)建豐富的背景效果。5.4 設(shè)置顏色和背景在HTML中設(shè)置字體顏色使用的是標(biāo)簽的color屬性，而在CSS中直接使用color屬性設(shè)置字體顏色。color屬性不僅可以用來設(shè)置字體顏色，還可以用來設(shè)置網(wǎng)頁(yè)中每個(gè)元素的前景色。用color屬性設(shè)置的顏色

36、一般都標(biāo)記為內(nèi)容的前景色。設(shè)置前景色的語(yǔ)法格式如下：color:關(guān)鍵字|RGB值5.4.1 顏色其中，“關(guān)鍵字”表示用顏色的英文名稱來設(shè)置顏色。例如，red代表紅色，black代表黑色，屬性值中的RGB值有多重表示方式，如十六進(jìn)制的RGB值和RGB函數(shù)值。下面以紅色為例來說明具體的顏色表示。#FF0000是十六進(jìn)制的RGB值，表示紅色。這是一種RGB值的表示方式#FF是十六進(jìn)制RGB值的縮寫，表示紅色。RGB（255，0，0）是RGB函數(shù)值，表示紅色。它常用在一些動(dòng)態(tài)顏色效果的網(wǎng)頁(yè)中，這里RGB函數(shù)取值范圍為0255。RGB（100%，0%，0%）也是RGB函數(shù)值，表示紅色。這里RGB函數(shù)取值

37、范圍為0%100%。5.4.1 顏色利用關(guān)鍵字red定義樣式.p1設(shè)置文字顏色為紅色，利用RGB顏色值定義樣式.p2設(shè)置文字顏色為藍(lán)色。樣式代碼如下：.p1color: red .p2color: #0000ff網(wǎng)頁(yè)中元素應(yīng)用這些樣式后，在瀏覽器中的顯示效果如圖5-13所示?！纠?-13】圖5-13 設(shè)置前景色（文字顏色）在HTML中設(shè)置網(wǎng)頁(yè)的背景顏色可使用標(biāo)簽的bgcolor屬性。在CSS中使用background-color屬性不僅可以設(shè)置網(wǎng)頁(yè)的背景顏色，還可以設(shè)置文字、表格、段落等標(biāo)記的背景顏色，設(shè)置背景顏色的語(yǔ)法格式如下：background-color: 關(guān)鍵字| RGB值 | tr

38、ansparent其中，transparent表示透明色，是背景顏色的初始值。5.4.2 背景顏色利用關(guān)鍵字red定義樣式.p1設(shè)置背景顏色為紅色，利用RGB顏色值定義樣式.p2設(shè)置背景顏色為藍(lán)色，兩個(gè)樣式的文字顏色均為白色。樣式代碼如下：.p1 color: white; background-color: red .p2 color: white; background-color: #0000ff網(wǎng)頁(yè)中元素應(yīng)用這些樣式后，在瀏覽器中的顯示效果如圖5-14所示?！纠?-14】圖5-14 設(shè)置背景色在CSS中使用background-image屬性來設(shè)置元素的背景圖像，其語(yǔ)法格式如下：bac

39、kground-image: url | none其中，url表示要插入的背景圖像的路徑，路徑可以為絕對(duì)路徑或相對(duì)路徑，圖片格式一般以gif、jpg和png格式為主；none為默認(rèn)值，表示不設(shè)置背景圖像。5.4.3 背景圖像1.插入背景圖像定義樣式.p1設(shè)置利用相對(duì)路徑插入背景圖像bg.gif，樣式.p2利用相對(duì)路徑插入背景圖像bg.gif。樣式代碼如下：.p1background-image:url(imagesbg.gif).p2background-image:url(c:websiteimagesbg.gif)網(wǎng)頁(yè)中元素應(yīng)用這些樣式后，在瀏覽器中的顯示效果如圖5-15所示。在這里，二者

40、的效果相同，只不過圖片路徑的寫法不同，一般建議網(wǎng)頁(yè)設(shè)計(jì)中使用相對(duì)路徑?！纠?-15】圖5-15 設(shè)置背景圖片使用background-image屬性設(shè)置網(wǎng)頁(yè)的背景圖像時(shí)，背景圖像總是在水平和垂直方向重復(fù)顯示，并平鋪于整個(gè)頁(yè)面窗口。如果將background-image屬性和background-repeat屬性結(jié)合使用，就可以方便地控制背景圖像的平鋪方式。設(shè)置背景圖像平鋪方式的語(yǔ)法格式如下：background-repeat: repeat | repeat-x | repeat-y | no-repeat其中，repeat表示背景圖像在水平和垂直方向進(jìn)行平鋪，是該屬性的默認(rèn)值；屬性值repe

41、at-x表示背景圖像在水平方向平鋪；屬性值repeat-y表示背景圖像在垂直方向平鋪；屬性值no-repeat表示背景圖像不進(jìn)行重復(fù)。2.設(shè)置背景圖像平鋪方式定義樣式.p1.p4，分別表示背景圖像在水平和垂直方向上進(jìn)行平鋪，在水平方向上和在垂直方向上進(jìn)行平鋪和不進(jìn)行平鋪。樣式代碼如下：.p1background-image:url(bg.gif);background-repeat: repeat .p2background-image:url(bg.gif); background-repeat: repeat-x .p3 background-image:url(bg.gif); back

42、ground-repeat: repeat-y .p4 background-image:url(bg.gif); background-repeat: no-repeat 網(wǎng)頁(yè)中元素應(yīng)用這些樣式后，在瀏覽器中的顯示效果如圖5-16所示?！纠?-16】圖5-16 設(shè)置背景圖像平鋪方式在網(wǎng)頁(yè)中插入背景圖像時(shí)，如果設(shè)置背景圖像屬性為no-repeat（不重復(fù)），那么該圖片會(huì)默認(rèn)顯示在背景區(qū)域的左上角。通過背景定位background-position屬性可以改變背景圖像的插入位置，使背景圖像出現(xiàn)在需要的位置。設(shè)置背景圖像位置的語(yǔ)法格式如下：background-position:百分比|長(zhǎng)度|關(guān)鍵

43、字3.設(shè)置背景圖像的位置利用屬性值百分比和長(zhǎng)度設(shè)置圖片位置時(shí)，需要指定水平位置和垂直位置的值，并且用空格隔開。水平位置的參考點(diǎn)是網(wǎng)頁(yè)頁(yè)面的左邊，垂直位置的參考點(diǎn)是頁(yè)面的上邊。例如，background-position: 45% 60%表示背景圖像的水平位置是左起45%，垂直位置是上起60%；background-position:150px 120px表示背景圖像的水平位置是左起150px，垂直位置是上起120px。關(guān)鍵字在水平方向上主要有l(wèi)eft、center、right，分別表示居左、居中和居右；關(guān)鍵字在垂直方向上主要有top、center、bottom，分別表示頂端、居中和底端。水平方

44、向和垂直方向的關(guān)鍵字可以相互搭配使用。3.設(shè)置背景圖像的位置定義樣式.p1.p3，設(shè)置背景圖像在不進(jìn)行平鋪時(shí)，分別出現(xiàn)在左上角，距左邊界45%、距上邊界60%和距左邊界30px、距上邊界20px處。樣式代碼如下：.p1background-image:url(bg.gif); background-repeat: no-repeat; background-position: left top.p2background-image:url(bg.gif); background-repeat: no-repeat; background-position: 45% 60%.p3backgrou

45、nd-image:url(bg.gif); background-repeat: no-repeat; background-position: 150px 120px 網(wǎng)頁(yè)中元素應(yīng)用這些樣式后，在瀏覽器中的顯示效果如圖5-17所示。【例5-17】圖5-17 設(shè)置背景圖像的位置邊框?qū)傩园ㄟ吙驑邮?、邊框?qū)挾群瓦吙蝾伾饕脕碓O(shè)置網(wǎng)頁(yè)中各個(gè)元素的邊框。這里的元素可以是一個(gè)段落、一張圖片或一個(gè)表格等。每一個(gè)網(wǎng)頁(yè)都可以看做是一個(gè)大的方框，而這個(gè)大方框又由不同的網(wǎng)頁(yè)元素構(gòu)成許多小的方框。5.5 設(shè)置邊框在CSS中，為設(shè)置邊框外觀，提供了邊框樣式屬性。利用邊框樣式屬性，可以設(shè)置單個(gè)邊框的樣式，設(shè)置各條

46、邊框樣式的語(yǔ)法格式如下：border- style:屬性值border-top-style:屬性值border-left-style:屬性值border-right-style:屬性值border-bottom-style:屬性值邊框?qū)傩缘某Ｓ弥蛋J(rèn)值none（不顯示邊框）、dotted（點(diǎn)線）、dashed（短線）、solid（實(shí)線）和double（雙線）等屬性。5.5.1 邊框樣式定義樣式.p1設(shè)置4個(gè)邊框均為實(shí)線邊框，樣式.p2定義上邊框?yàn)閷?shí)線邊框、左邊框?yàn)辄c(diǎn)線邊框、右邊框?yàn)槎叹€邊框、底邊框?yàn)殡p線邊框。樣式代碼如下：.p1border- style：solid.p2border-to

47、p-style:solid;border-left-style: dotted;border-right-style: dashed; border-bottom-style: double網(wǎng)頁(yè)中元素應(yīng)用這些樣式后，在瀏覽器中的顯示效果如圖5-18所示?！纠?-18】圖5-18 設(shè)置邊框樣式在CSS中，利用邊框?qū)挾葘傩詠砜刂七吙虻膶挾?，其?個(gè)屬性值，設(shè)置邊框?qū)挾鹊恼Z(yǔ)法格式如下：border-top-width：關(guān)鍵字|長(zhǎng)度border-left-width：關(guān)鍵字|長(zhǎng)度border-right-width：關(guān)鍵字|長(zhǎng)度border-bottom-width：關(guān)鍵字|長(zhǎng)度邊框?qū)挾汝P(guān)鍵字包括默認(rèn)

48、值medium（正常邊框）、thin（細(xì)邊框）和thick（粗邊框）三種，長(zhǎng)度包括長(zhǎng)度值和長(zhǎng)度單位，這和前面介紹過的使用長(zhǎng)度值的各種屬性的用法相同。5.5.2 邊框?qū)挾榷x樣式.p1設(shè)置4個(gè)邊框?qū)挾染鶠閠hick（粗邊框），樣式.p2設(shè)置上邊框的寬度為1px，左邊框?yàn)閠hin（細(xì)邊框）、底邊框?yàn)閠hick（粗邊框）、右邊框的寬度為10px。樣式代碼如下：.p1border-style:solid; border-width:normal.p2border-style:solid; border-top-width: 1px;border-left-width: thin; border-bot

49、tom-width:thick;border-right-width:10px;網(wǎng)頁(yè)中元素應(yīng)用這些樣式后，在瀏覽器中的顯示效果如圖5-19所示?！纠?-19】圖5-19 設(shè)置邊框?qū)挾仍O(shè)置邊框的顏色，同樣可以選擇設(shè)置單條邊框顏色或者統(tǒng)一設(shè)置4個(gè)邊框的顏色?？梢赃x用的邊框顏色屬性有5個(gè)，設(shè)置邊框顏色的語(yǔ)法格式如下：border-color：顏色關(guān)鍵字|RGB值border-top-color：顏色關(guān)鍵字|RGB值border-left-color：顏色關(guān)鍵字|RGB值border-right-color：顏色關(guān)鍵字|RGB值border-bottom-color：顏色關(guān)鍵字|RGB值這里的顏色屬性值和前面介紹的顏色屬性值相同，可以使用顏色關(guān)鍵字或RGB值。5.5.3 邊框顏色定義樣式.p1設(shè)置4個(gè)邊框顏色均為藍(lán)色，樣式.p2設(shè)置上邊框顏色為紅色、左邊框?yàn)樗{(lán)色、下邊框?yàn)楹谏?、右邊框?yàn)榫G色。樣式代碼如下：.p1border-style:solid;border-width:thick;border-color:blue;.p2border-style:solid;border-width:thick;border-top