1、本章內(nèi)容本章內(nèi)容10.1 CSS簡(jiǎn)介簡(jiǎn)介10.2 引入引入CSS方法方法10.3 基本基本CSS選擇器選擇器10.4 復(fù)合選擇器復(fù)合選擇器10.5 其他選擇器其他選擇器10.6 CSS繼承與層疊特性繼承與層疊特性10.1 CSS簡(jiǎn)介簡(jiǎn)介文檔結(jié)構(gòu)與圖片顯示的混合排列一直是文檔結(jié)構(gòu)與圖片顯示的混合排列一直是HTML語(yǔ)言的一大缺陷語(yǔ)言的一大缺陷，導(dǎo)致，導(dǎo)致這一問(wèn)題存在的原因之一是不同瀏覽器之間的不兼容性。為了讓網(wǎng)頁(yè)這一問(wèn)題存在的原因之一是不同瀏覽器之間的不兼容性。為了讓網(wǎng)頁(yè)在各種平臺(tái)上都能夠正常顯示，人們需要一種新的規(guī)范，將顯示描述在各種平臺(tái)上都能夠正常顯示，人們需要一種新的規(guī)范，將顯示描述徹底獨(dú)立

2、于文檔的結(jié)構(gòu)，即徹底獨(dú)立于文檔的結(jié)構(gòu)，即內(nèi)容結(jié)構(gòu)和格式控制相分離內(nèi)容結(jié)構(gòu)和格式控制相分離。為了響應(yīng)這個(gè)快速增長(zhǎng)的需求，為了響應(yīng)這個(gè)快速增長(zhǎng)的需求，W3C開(kāi)始為開(kāi)始為HTML制定樣式表機(jī)制，制定樣式表機(jī)制，也就是也就是CSS。1996年年12月月17日，日，W3C標(biāo)準(zhǔn)化組織推出了標(biāo)準(zhǔn)化組織推出了CSS1（Cascading Style Sheets Level 1）規(guī)范，立刻得到了微軟與網(wǎng)景）規(guī)范，立刻得到了微軟與網(wǎng)景公司的支持。公司的支持。CSSCSS概念概念CSSCSS是是Cascading Style SheetCascading Style Sheet 的縮寫，翻譯成中文是的縮寫，翻譯成

3、中文是層疊樣式表層疊樣式表，有，有時(shí)簡(jiǎn)稱時(shí)簡(jiǎn)稱樣式表樣式表。它是控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離。它是控制網(wǎng)頁(yè)樣式并允許將樣式信息與網(wǎng)頁(yè)內(nèi)容分離的一種標(biāo)記性語(yǔ)言。的一種標(biāo)記性語(yǔ)言。內(nèi)容結(jié)構(gòu)和格式控制相分離內(nèi)容結(jié)構(gòu)和格式控制相分離，便于統(tǒng)一設(shè)計(jì)與管理頁(yè)面。，便于統(tǒng)一設(shè)計(jì)與管理頁(yè)面。CSSCSS功能功能彌補(bǔ)彌補(bǔ)HTML對(duì)網(wǎng)頁(yè)格式化功能的不足，比如對(duì)網(wǎng)頁(yè)格式化功能的不足，比如段落間距，行距段落間距，行距等。等。 字體變化和大小。字體變化和大小。頁(yè)面格式的動(dòng)態(tài)更新。頁(yè)面格式的動(dòng)態(tài)更新。排版定位。排版定位。CSSCSS優(yōu)點(diǎn)優(yōu)點(diǎn)除了對(duì)訪問(wèn)者看到的文檔提供更多的控制外，除了對(duì)訪問(wèn)者看到的文檔提供更

4、多的控制外，CSS比起填寫格式標(biāo)志比起填寫格式標(biāo)志的方法來(lái)說(shuō)，能更好地管理的方法來(lái)說(shuō)，能更好地管理HTML文檔。將這些標(biāo)志放在文檔。將這些標(biāo)志放在CSS中時(shí)，中時(shí)，文檔會(huì)更加整潔。文檔會(huì)更加整潔。CSS還可以減少開(kāi)發(fā)和維護(hù)還可以減少開(kāi)發(fā)和維護(hù)HTML文檔所用的時(shí)間。與手工格式化的文檔所用的時(shí)間。與手工格式化的文本段落相比，用戶可以只改變樣式當(dāng)中的樣式定義，這個(gè)定義就會(huì)文本段落相比，用戶可以只改變樣式當(dāng)中的樣式定義，這個(gè)定義就會(huì)作用在作用在HTML文檔的各個(gè)地方。文檔的各個(gè)地方。最后，最后，CSS還提供了還提供了Web 站點(diǎn)中文檔間的靈活性。即可以建立適用于站點(diǎn)中文檔間的靈活性。即可以建立適用于

5、站點(diǎn)中所有頁(yè)面的樣式表，也可以建立單個(gè)樣式表作用于某個(gè)站點(diǎn)中所有頁(yè)面的樣式表，也可以建立單個(gè)樣式表作用于某個(gè)HTML文檔，這個(gè)具體樣式表能覆蓋全局樣式表。另外，還可以進(jìn)一步調(diào)整文檔，這個(gè)具體樣式表能覆蓋全局樣式表。另外，還可以進(jìn)一步調(diào)整各個(gè)樣式表以適應(yīng)特殊的文本樣式，例如，某個(gè)段落采用特殊的顏色。各個(gè)樣式表以適應(yīng)特殊的文本樣式，例如，某個(gè)段落采用特殊的顏色。10.2 引入引入CSS方法方法在在html中，引入中，引入css的方法主要的方法主要4種：種： 行內(nèi)式行內(nèi)式 內(nèi)嵌式內(nèi)嵌式 導(dǎo)入式導(dǎo)入式 鏈接式鏈接式行內(nèi)式行內(nèi)式即在標(biāo)記的即在標(biāo)記的style屬性中設(shè)定屬性中設(shè)定css樣式，這種方式本質(zhì)上

6、沒(méi)體現(xiàn)出樣式，這種方式本質(zhì)上沒(méi)體現(xiàn)出css的的優(yōu)勢(shì)，因此優(yōu)勢(shì)，因此不推薦使用不推薦使用。 style 屬性規(guī)定元素的行內(nèi)樣式（屬性規(guī)定元素的行內(nèi)樣式（inline style）。）。 style 屬性屬性將覆蓋任何全局的樣式設(shè)定將覆蓋任何全局的樣式設(shè)定，例如在，例如在 標(biāo)簽或在外標(biāo)簽或在外部樣式表中規(guī)定的樣式。部樣式表中規(guī)定的樣式。基本語(yǔ)法：基本語(yǔ)法： 內(nèi)嵌式內(nèi)嵌式在對(duì)頁(yè)面中各種元素的設(shè)置集中寫在在對(duì)頁(yè)面中各種元素的設(shè)置集中寫在和和之間的，對(duì)于之間的，對(duì)于單個(gè)頁(yè)面來(lái)說(shuō)，這種方式很方便單個(gè)頁(yè)面來(lái)說(shuō)，這種方式很方便 。基本語(yǔ)法：基本語(yǔ)法：語(yǔ)法解釋：語(yǔ)法解釋： 選擇器選擇器 (selector) 通

7、常是定義的通常是定義的 HTML 元素或標(biāo)簽元素或標(biāo)簽. 屬性屬性 (property) 是定義改變的屬性，并且每個(gè)屬性都有一個(gè)值。是定義改變的屬性，并且每個(gè)屬性都有一個(gè)值。 屬性和值用冒號(hào)分開(kāi)，并由花括號(hào)包圍屬性和值用冒號(hào)分開(kāi)，并由花括號(hào)包圍，這樣就組成了一個(gè)完整，這樣就組成了一個(gè)完整的樣式聲明（的樣式聲明（declaration ）。）。優(yōu)缺點(diǎn)優(yōu)缺點(diǎn)優(yōu)點(diǎn)：優(yōu)點(diǎn)： 速度快，所有的速度快，所有的CSS控制都是針對(duì)本頁(yè)面標(biāo)簽的，沒(méi)有多余的控制都是針對(duì)本頁(yè)面標(biāo)簽的，沒(méi)有多余的命令。命令。 再者不用外鏈文件。直接在文檔中讀取樣式。再者不用外鏈文件。直接在文檔中讀取樣式。 缺點(diǎn)缺點(diǎn) ： 改版麻煩，單個(gè)

8、頁(yè)面顯得臃腫，不能被其他引用改版麻煩，單個(gè)頁(yè)面顯得臃腫，不能被其他引用造成代碼量相對(duì)較多，維護(hù)也麻煩些。造成代碼量相對(duì)較多，維護(hù)也麻煩些。 導(dǎo)入式導(dǎo)入式導(dǎo)入式格式如下：導(dǎo)入式格式如下： import mystyle.css;-URL 或或 import url(mystyle.css); 語(yǔ)法解釋：語(yǔ)法解釋：后面的分號(hào)（后面的分號(hào)（;）一定要有）一定要有。連接式連接式這種方法可以說(shuō)是現(xiàn)在占統(tǒng)治地位的引入方法。如同瀏覽器中的這種方法可以說(shuō)是現(xiàn)在占統(tǒng)治地位的引入方法。如同瀏覽器中的IE。也是最能體現(xiàn)也是最能體現(xiàn)CSS特點(diǎn)的方法；特點(diǎn)的方法；最能體現(xiàn)最能體現(xiàn)DIV+CSS中的內(nèi)容與顯示分中的內(nèi)容與顯

9、示分離的思想離的思想，也，也最易改版維護(hù)最易改版維護(hù)，代碼看起來(lái)也是，代碼看起來(lái)也是最美觀最美觀的一種。的一種。基本語(yǔ)法：基本語(yǔ)法： 導(dǎo)入式與連接式比較導(dǎo)入式與連接式比較1、連接式連接式：會(huì)會(huì)在裝載頁(yè)面主體部分之前裝載在裝載頁(yè)面主體部分之前裝載css文件文件，這樣顯示出來(lái)，這樣顯示出來(lái) 的網(wǎng)頁(yè)從一開(kāi)始就是帶有樣式效果的。的網(wǎng)頁(yè)從一開(kāi)始就是帶有樣式效果的。2 、導(dǎo)入式導(dǎo)入式：會(huì)會(huì)在整個(gè)頁(yè)面裝載完成后再裝載在整個(gè)頁(yè)面裝載完成后再裝載CSS文件文件，對(duì)于有的瀏，對(duì)于有的瀏 覽器來(lái)說(shuō)，在一些情況下，如果網(wǎng)頁(yè)文件的體積比較大，則會(huì)出現(xiàn)先顯覽器來(lái)說(shuō)，在一些情況下，如果網(wǎng)頁(yè)文件的體積比較大，則會(huì)出現(xiàn)先顯 示

10、無(wú)樣式的頁(yè)面，閃爍一下之后再出現(xiàn)設(shè)置樣式后的效果，從瀏覽者的示無(wú)樣式的頁(yè)面，閃爍一下之后再出現(xiàn)設(shè)置樣式后的效果，從瀏覽者的 感受來(lái)說(shuō)，這是導(dǎo)入式的一個(gè)缺陷。感受來(lái)說(shuō)，這是導(dǎo)入式的一個(gè)缺陷。3、建議建議：如果僅需要引入一個(gè)如果僅需要引入一個(gè)CSS文件，則使用連接方式文件，則使用連接方式；如果需要；如果需要 引入多個(gè)引入多個(gè)CSS文件，則首先用連接方式引入一個(gè)文件，則首先用連接方式引入一個(gè)“目錄目錄”CSS文件，這文件，這個(gè)個(gè) “目錄目錄”CSS文件中再使用導(dǎo)入式引入其他文件中再使用導(dǎo)入式引入其他CSS文件。文件。10.3 基本基本CSS選擇器選擇器10.3.1 標(biāo)簽選擇器標(biāo)簽選擇器10.3.2

11、類選擇器類選擇器10.3.3 ID選擇器選擇器10.3.1 標(biāo)簽選擇器標(biāo)簽選擇器定義樣式：定義樣式： html標(biāo)簽名標(biāo)簽名 property1: value1; property2: value2; 實(shí)例實(shí)例:u u p color:#FF0000; font-size:25px; u 10.3.2 類選擇器類選擇器定義樣式定義樣式: .類名類名 property1: value1; property2: value2; 套用類選擇器的樣式：套用類選擇器的樣式： 網(wǎng)頁(yè)內(nèi)容網(wǎng)頁(yè)內(nèi)容 注意：同值注意：同值class屬性可以在每個(gè)屬性可以在每個(gè) HTML 文檔中出現(xiàn)多次。文檔中出現(xiàn)多次。10.3.3

12、 ID選擇器選擇器定義樣式：定義樣式：ID名名 property1: value1; property2: value2; 套用套用ID選擇器的常用格式：選擇器的常用格式： 網(wǎng)頁(yè)內(nèi)容網(wǎng)頁(yè)內(nèi)容 注意：同值注意：同值id 屬性只能在每個(gè)屬性只能在每個(gè) HTML 文檔中出現(xiàn)一次。文檔中出現(xiàn)一次。 10.4 復(fù)合選擇器復(fù)合選擇器10.4.1 并集并集 選擇器（分組選擇器）選擇器（分組選擇器）10.4.2 交集交集 選擇器（派生選擇器）選擇器（派生選擇器）10.4.3 后代后代 選擇器（派生選擇器）選擇器（派生選擇器）10.4.1 并集并集 選擇器選擇器（分組選擇器）（分組選擇器）將將同樣的定義應(yīng)用于多

13、個(gè)選擇符同樣的定義應(yīng)用于多個(gè)選擇符，可以將選擇符以，可以將選擇符以逗號(hào)逗號(hào)分隔分隔的方式合并為組。的方式合并為組。語(yǔ)法格式：語(yǔ)法格式： 標(biāo)簽名標(biāo)簽名,# ID名名,.類名類名 property1: value1; property2: value2; 實(shí)例實(shí)例u p, div, .a font-size:12px; 10.4.2 交集交集 選擇器選擇器（派生選擇器）（派生選擇器）“交集交集”復(fù)合選擇器由兩個(gè)選擇器直接鏈接構(gòu)成，其結(jié)果是復(fù)合選擇器由兩個(gè)選擇器直接鏈接構(gòu)成，其結(jié)果是選中二者各自選中二者各自元素范圍的交集元素范圍的交集。其中。其中第一個(gè)必須是標(biāo)記選擇器第一個(gè)必須是標(biāo)記選擇器，第二個(gè)必

14、須是類選擇器第二個(gè)必須是類選擇器或者或者ID選擇器選擇器。兩個(gè)選擇器之間不能有空格，必須連續(xù)書寫兩個(gè)選擇器之間不能有空格，必須連續(xù)書寫。語(yǔ)法格式：語(yǔ)法格式： 標(biāo)簽選擇器標(biāo)簽選擇器#ID名名或或.類名類名 property1: value1; property2: value2; 實(shí)例實(shí)例u ul.red font-size:12px; color:#FF0000; 10.4.3 后代后代 選擇器選擇器（派生選擇器）（派生選擇器）由兩個(gè)或多個(gè)類型選擇符組成，并以由兩個(gè)或多個(gè)類型選擇符組成，并以空白空白相分隔。相分隔。語(yǔ)法格式：語(yǔ)法格式： Name1 Name2 property1: value1

15、; property2: value2; 實(shí)例實(shí)例u #one li font-size:12px; 10.5 其他選擇器其他選擇器10.5.1 通用選擇器通用選擇器10.5.2 偽類選擇器偽類選擇器10.5.2 偽元素選擇器偽元素選擇器10.5.1 通用選擇器通用選擇器是針對(duì)是針對(duì)整個(gè)頁(yè)面所有內(nèi)容整個(gè)頁(yè)面所有內(nèi)容的選擇器；的選擇器；基本語(yǔ)法：基本語(yǔ)法： * property1: value1; property2: value2; 10.5.2 偽類選擇器偽類選擇器之所以稱之為偽類，是因?yàn)樗鼈冎苑Q之為偽類，是因?yàn)樗鼈冎付ǖ膶?duì)象在文檔中并不存在指定的對(duì)象在文檔中并不存在，它們，它們指定的是

16、元素的某種狀態(tài)指定的是元素的某種狀態(tài)。基本語(yǔ)法：基本語(yǔ)法： 標(biāo)簽名標(biāo)簽名:元素名元素名 property1: value1; property2: value2; a:link - 未訪問(wèn)的鏈接樣式未訪問(wèn)的鏈接樣式a:visited - 已訪問(wèn)的鏈接樣式已訪問(wèn)的鏈接樣式a:hover - 鼠標(biāo)指上時(shí)的樣式鼠標(biāo)指上時(shí)的樣式a:active - 活動(dòng)鏈接的樣式活動(dòng)鏈接的樣式偽類屬性表偽類屬性表屬性描述:active向被激活的元素添加樣式。:hover當(dāng)鼠標(biāo)懸浮在元素上方時(shí)，向元素添加樣式。:link向未被訪問(wèn)的鏈接添加樣式。:visited向已被訪問(wèn)的鏈接添加樣式。:first-child向元素的

17、第一個(gè)子元素添加樣式。(IE6不支持):focus向擁有鍵盤輸入焦點(diǎn)的元素添加樣式。 (同上):lang向帶有指定 lang 屬性的元素添加樣式。 (同上)綜合應(yīng)用綜合應(yīng)用10.5.2 偽元素選擇器偽元素選擇器偽元素同偽類的情況類似，也是對(duì)文檔中虛構(gòu)的元素進(jìn)行定義。偽元素同偽類的情況類似，也是對(duì)文檔中虛構(gòu)的元素進(jìn)行定義。基本語(yǔ)法：基本語(yǔ)法： 標(biāo)簽名標(biāo)簽名:元素名元素名 property1: value1; property2: value2; 偽元素屬性表偽元素屬性表屬性描述:first-letter向文本的第一個(gè)字母添加特殊樣式。:first-line向文本的首行添加特殊樣式。:before

18、在元素之前添加內(nèi)容。(IE6不支持):after在元素之后添加內(nèi)容。(IE6不支持)10.6 10.6 CSSCSS繼承與層疊特性繼承與層疊特性CSSCSS繼承繼承: : 指子標(biāo)簽會(huì)繼承父標(biāo)簽的所有樣式風(fēng)格，并可以在父標(biāo)指子標(biāo)簽會(huì)繼承父標(biāo)簽的所有樣式風(fēng)格，并可以在父標(biāo)簽樣式風(fēng)格的基礎(chǔ)上再次進(jìn)行修改，產(chǎn)生新的樣式，而子標(biāo)簽的樣式簽樣式風(fēng)格的基礎(chǔ)上再次進(jìn)行修改，產(chǎn)生新的樣式，而子標(biāo)簽的樣式風(fēng)格完全不會(huì)影響父標(biāo)簽。風(fēng)格完全不會(huì)影響父標(biāo)簽。層疊層疊: : 指在同一個(gè)指在同一個(gè)WEB文檔中可以有多個(gè)樣式表存在，當(dāng)擁有相同文檔中可以有多個(gè)樣式表存在，當(dāng)擁有相同特殊性的規(guī)則應(yīng)用在同一個(gè)元素時(shí)，根據(jù)這些規(guī)則的特殊性的規(guī)則應(yīng)用在同一個(gè)元素時(shí)，根據(jù)這些規(guī)則的先后順序先后順序，來(lái)決，來(lái)決定其權(quán)重。定其權(quán)重。CSS樣式層疊時(shí)的優(yōu)先級(jí)樣式層疊時(shí)的優(yōu)先級(jí)內(nèi)嵌樣式內(nèi)嵌樣式ID選擇器選擇器class選擇器選擇器標(biāo)記選擇器；標(biāo)記選擇器；內(nèi)層樣式表內(nèi)層樣式表外層樣式表外層樣式表外部樣式表；外部樣式表；越特殊的樣式，優(yōu)先級(jí)越高；越特殊的樣式，優(yōu)先級(jí)越高；當(dāng)優(yōu)先級(jí)相同時(shí)，以后者為準(zhǔn)（當(dāng)優(yōu)先級(jí)相同時(shí)，以后者為準(zhǔn)（就近原則就近原則）；）；CSS注釋注釋語(yǔ)法格式：語(yǔ)法格式： /* 注釋內(nèi)容注釋內(nèi)容 */注釋符注釋符/* */不能交叉，且不能沒(méi)有結(jié)束符。不能交叉，且不能沒(méi)有結(jié)束符。本章總結(jié)本