1、實例版,第11章 CSS樣式表基礎(chǔ),11.1 CSS的概述 11.2 CSS的使用 11.3 插入CSS樣式表 11.4 編寫CSS文件,11.1 CSS的概述,11.1.1 CSS基本概念 11.1.2 CSS的特性,11.1 CSS的概述,概述CSS的作用, 內(nèi)容和樣式的分離，使得網(wǎng)頁設(shè)計趨于明了、簡潔。 彌補HTML對標記屬性控制的不足，如：背景圖像重復(fù)的控制和標題大小的控制等。在HTML中可控制的標題僅有7級，即h1h7，而利用CSS可以任意設(shè)置標題大小。 精確控制網(wǎng)頁布局，如行間距、字間距、段落縮進和圖片定位等屬性。 提高網(wǎng)頁效率，因為多個網(wǎng)頁同時應(yīng)用一個CSS樣式，即減少了代碼的下

2、載，又提高了瀏覽器的瀏覽速度和網(wǎng)頁的更新速度。如圖11-1中的網(wǎng)頁，內(nèi)容已定，如果CSS樣式不滿意，可以隨便修改，絲毫不會對內(nèi)容有影響，而且這個CSS樣式，也可以同時用到多個網(wǎng)頁內(nèi)容上。 CSS還有好多特殊功能，如鼠標指針屬性控制鼠標的形狀和濾鏡屬性控制圖片的特效等。,11.1.1 CSS基本概念,CSS（Cascading Style Sheet）即層疊樣式表，簡稱樣式表。要理解層疊樣式表的概念先要理解樣式的概念。樣式就是對網(wǎng)頁中的元素（字體、段落、圖像、列表等）屬性的整體概括，即描述所有網(wǎng)頁對象的顯示形式（例如，文字的大小、字體、背景及圖像的顏色、大小等都是樣式）。層疊，就是指當HTML文

3、件引用多個CSS文件時，如果CSS文件之間所定義的樣式發(fā)生了沖突，將依據(jù)層次的先后來處理其樣式對內(nèi)容的控制。,11.1.2 CSS的特性,1繼承性 2層疊性,11.2 CSS的使用,11.2.1 CSS的基本語法 11.2.2 CSS選擇符類型 11.2.3 選擇符的優(yōu)先級,11.2.1 CSS的基本語法,CSS基本語法,selector property: value; property: value property: value ,11.2.1 CSS的基本語法,語法說明, 語法中selector代表選擇符，property代表屬性，value代表屬性值。,11.2.1 CSS的基本語法

4、,語法說明,選擇符包括多種形式，所有的HTML標記都可以作為選擇符，如body、p、table等都是選擇符。但在利用CSS的語法給它們定義屬性和值時，其中屬性和值要用冒號隔開。,11.2.1 CSS的基本語法,語法說明,11.2.1 CSS的基本語法,語法說明,11.2.1 CSS的基本語法,語法說明,11.2.2 CSS選擇符類型,1類選擇符,用類選擇符可以把相同的元素分類定義成不同的樣式。在定義類選擇符時，在自定義類名稱的前面加一個句點（.）。 類選擇符語法：標記名.類名樣式屬性:取值;樣式屬性:取值;,11.2.2 CSS選擇符類型,2id選擇符,在HTML文檔中，需要唯一標識一個元素時

5、，就會賦予它一個id標識，以便在對整個文檔進行處理時能夠很快地找到這個元素。而id選擇符就是用來對這個單一元素定義單獨的樣式。其定義方法與類選擇符大同小異，只需要把句點（.）改為井號（#），而調(diào)用時需要把class改為id。 id選擇符語法：標記名#標識名樣式屬性:取值;樣式屬性:取值;,11.2.2 CSS選擇符類型,3包含選擇符,包含選擇符是對某種元素包含關(guān)系（如元素1里包含元素2）定義的樣式表。這種方式只對在元素1里的元素2定義，對單獨的元素1或元素2無定義。,11.2.2 CSS選擇符類型,4偽類,偽類不屬于選擇符，它是讓頁面呈現(xiàn)豐富表現(xiàn)力的特殊屬性。之所以稱為“偽”，是因為它指定的對

6、象在文檔中并不存在，它們指定的是元素的某種狀態(tài)。 應(yīng)用最為廣泛的偽類是鏈接的4個狀態(tài)未鏈接狀態(tài)（a:link）、已訪問鏈接狀態(tài)（a:visited）、鼠標指針懸停在鏈接上的狀態(tài)（a:hover）以及被激活（在鼠標單擊與釋放之間發(fā)生的事件）的鏈接狀態(tài)（a:active）。,11.2.3 選擇符的優(yōu)先級,在應(yīng)用選擇符的過程中，可能會遇到同一個元素由不同選擇符定義的情況，這時候就要考慮到選擇符的優(yōu)先級。通常我們使用的選擇符包括id選擇符，類選擇符，包含選擇符和HTML標記選擇符等。因為id選擇符是最后被加到元素上的，所以優(yōu)先級最高，其次是類選擇符。!important語法主要用來提升樣式規(guī)則的應(yīng)用優(yōu)

7、先級。,11.3 插入CSS樣式表,11.3.1 鏈入外部樣式表 11.3.2 內(nèi)部樣式表 11.3.3 嵌入樣式表 11.3.4 導(dǎo)入外部樣式表,11.3.1 鏈入外部樣式表,基本語法：, ,11.3.1 鏈入外部樣式表,語法說明, rel=stylesheet是指在HTML文件中使用的是外部樣式表。 type=text/css指明該文件的類型是樣式表文件。 href中的樣式表文件地址，可以為絕對地址或相對地址。 外部樣式表文件中不能含有任何HTML標簽，如或等。 CSS文件要和HTML文件一起發(fā)布到服務(wù)器上，這樣在用瀏覽器打開網(wǎng)頁時，瀏覽器會按照該HTML網(wǎng)頁所鏈接的外部樣式表來顯示其風(fēng)格

8、。,11.3.1 鏈入外部樣式表,特點,一個外部樣式表文件可以應(yīng)用于多個HTML文件。當改變這個樣式表文件時，所有網(wǎng)頁的樣式都隨之改變。因此常用在制作大量相同樣式的網(wǎng)頁中，因為使用這種方法不僅能減少重復(fù)工作量，而且方便以后的修改和編輯，有利于站點的維護。同時在瀏覽網(wǎng)頁時一次性將樣式表文件下載，減少了代碼的重復(fù)下載。,11.3.2 內(nèi)部樣式表,基本語法, ,11.3.2 內(nèi)部樣式表,語法說明, 標記用來說明所要定義的樣式。 type=text/css說明這是一段CSS樣式表代碼。 標記的加入是為了防止一些不支持CSS的瀏覽器，將與之間的CSS代碼當成普通的字符串顯示在網(wǎng)頁中。 選擇符也就是樣式的

9、名稱，這里的選擇符可以選用HTML標記的所有名稱。,11.3.2 內(nèi)部樣式表,特點,內(nèi)部樣式表方法就是將所有的樣式表信息都列于HTML文件的頭部，因此這些樣式可以在整個HTML文件中調(diào)用。如果想對網(wǎng)頁一次性加入樣式表，即可選用該方法。,11.3.3 嵌入樣式表,基本語法, ,11.3.3 嵌入樣式表,語法說明, HTML標記就是頁面中標記HTML元素的標記，例如body、p等。 style參數(shù)后面引號中的內(nèi)容就相當于樣式表大括號里的內(nèi)容。需要指出的是，style參數(shù)可以應(yīng)用于HTML文件中的body標記，以及除了basefont、param和script之外的任意元素。,11.3.3 嵌入樣式

10、表,特點,利用這種方法定義的樣式，其效果只能控制某個標記。所以比較適用于指定網(wǎng)頁中某小段文字的顯示風(fēng)格，或某個元素的樣式。,11.3.4 導(dǎo)入外部樣式表,基本語法, import url（外部樣式表文件地址）； ,11.3.4 導(dǎo)入外部樣式表,語法說明, Import語句后面的“；”是不可省略的。 外部樣式表文件的文件擴展名必須為.css。 樣式表地址可以是絕對地址，也可以是相對地址。,11.3.4 導(dǎo)入外部樣式表,特點,在使用中，某些瀏覽器可能會不支持導(dǎo)入外部樣式表的import聲明。所以此方法不經(jīng)常用到。,11.4 編寫CSS文件,11.4.1 編寫頭部的CSS 11.4.2 編寫主體的C

11、SS 11.4.3 編寫外部的CSS,11.4.1 編寫頭部的CSS,實例代碼,11.4.1 編寫頭部的CSS,在上面代碼中的與之間插入如下代碼。,11.4.1 編寫頭部的CSS,網(wǎng)頁效果,11.4.2 編寫主體的CSS,實例代碼,11.4.2 編寫主體的CSS,網(wǎng)頁效果,11.4.3 編寫外部的CSS1應(yīng)用鏈入外部樣式表方法在HTML文件內(nèi)調(diào)用外部定義的CSS文件,編寫CSS文件的代碼,11.4.3 編寫外部的CSS1應(yīng)用鏈入外部樣式表方法在HTML文件內(nèi)調(diào)用外部定義的CSS文件,建立一個新的HTML文件，并鏈接到上面定義的CSS文件上,11.4.3 編寫外部的CSS1應(yīng)用鏈入外部樣式表方法在HTML文件內(nèi)調(diào)用外部定義的CSS文件,網(wǎng)頁效果