第4章CSS樣式基礎(chǔ)

1、網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版） http:/第4章 CSS樣式基礎(chǔ)網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）層疊樣式表（CSS）是一組格式設(shè)置規(guī)則，用來(lái)控制網(wǎng)頁(yè)的外觀。使用 CSS 樣式設(shè)置頁(yè)面格式，可將網(wǎng)頁(yè)的內(nèi)容與形式分離。頁(yè)面內(nèi)容（即 HTML 代碼）存放在 HTML 文件中，而用于定義頁(yè)面內(nèi)容形式的 CSS 規(guī)則可以放在外部樣式表或 HTML 文檔的頭部。使用CSS控制網(wǎng)頁(yè)外觀已經(jīng)成為網(wǎng)頁(yè)設(shè)計(jì)領(lǐng)域的規(guī)范，首先學(xué)習(xí)CSS的相關(guān)理論，是后續(xù)章節(jié)的基礎(chǔ)，也便于學(xué)習(xí)者養(yǎng)成良好的網(wǎng)頁(yè)設(shè)計(jì)習(xí)慣。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）本章主要內(nèi)容：o4.1 CSS 概述o4.2 CSS樣式的創(chuàng)建與屬性設(shè)置o4.3

2、管理CSS樣式o4.4 案例：使用CSS美化網(wǎng)頁(yè)o4.5 實(shí)訓(xùn)網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）4.1 學(xué)習(xí)任務(wù)：CSS概述在Web 2.0標(biāo)準(zhǔn)中，HTML語(yǔ)言只用于定義網(wǎng)頁(yè)的內(nèi)容。要制作出漂亮且符合規(guī)范的網(wǎng)頁(yè)，還需要使用CSS樣式來(lái)設(shè)置網(wǎng)頁(yè)元素的屬性。由CSS樣式設(shè)計(jì)的網(wǎng)頁(yè)，具有條理規(guī)范、布局統(tǒng)一、容易維護(hù)等優(yōu)點(diǎn)。本節(jié)學(xué)習(xí)任務(wù)本節(jié)學(xué)習(xí)任務(wù)認(rèn)識(shí)CSS樣式，了解使用CSS格式化網(wǎng)頁(yè)的優(yōu)勢(shì)，熟悉CSS樣式的分類(lèi)，掌握CSS的基本語(yǔ)法，使用CSS樣式面板管理CSS樣式。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）4.1.1 CSS的基本概念的基本概念CSS是Cascading Style Sheets的縮寫(xiě)，又稱

3、層疊樣式表或級(jí)聯(lián)樣式表，用于控制或增強(qiáng)網(wǎng)頁(yè)外觀樣式，并且可以與網(wǎng)頁(yè)內(nèi)容相分離的一種標(biāo)簽性語(yǔ)言。使用CSS樣式表，可以將網(wǎng)頁(yè)的樣式和內(nèi)容分離，可以使網(wǎng)頁(yè)更小、下載速度更快，可以更加方便的更新和維護(hù)網(wǎng)頁(yè)，因此CSS樣式表在網(wǎng)頁(yè)設(shè)計(jì)中得到了廣泛應(yīng)用。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）4.1.2 使用HTML和CSS格式化網(wǎng)頁(yè)在Dreamweaver中打開(kāi)兩個(gè)網(wǎng)頁(yè)。同樣的效果，一個(gè)頁(yè)面使用HTML格式化，另一個(gè)頁(yè)面使用CSS格式化。如圖4-1所示。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）4.1.2 使用HTML和CSS格式化網(wǎng)頁(yè)使用CSS進(jìn)行格式化時(shí)，在標(biāo)記中并沒(méi)有任何關(guān)于樣式的說(shuō)明，而是在中添加了如下代碼：p

4、color:red; font-size:14px;以上代碼定義了p標(biāo)記的樣式：顏色為紅色，字體大小14像素。所有網(wǎng)頁(yè)中的標(biāo)記，都將遵循所設(shè)置的樣式規(guī)則。由此可見(jiàn)，使用CSS進(jìn)行格式化網(wǎng)頁(yè)時(shí)，頁(yè)面的內(nèi)容與形式是分離的，因此要比使用HTML的代碼少，且整潔。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）4.1.2 使用HTML和CSS格式化網(wǎng)頁(yè)在比較基于HTML的格式化和基于CSS的格式化時(shí)，很容易看到CSS如何在工作量和時(shí)間上的巨大效益。也容易理解，W3C為何摒棄HTML而使用CSS控制網(wǎng)頁(yè)樣式。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）4.1.3 CSS基本語(yǔ)法基本語(yǔ)法一個(gè)CSS樣式表一般由若干樣式規(guī)則組成，每個(gè)樣

5、式規(guī)則都可以看成是一條CSS的基本語(yǔ)句，每個(gè)規(guī)則都包含一個(gè)選擇器（例如body, p等）和寫(xiě)在花括號(hào)里的聲明，這些聲明通常是由幾組用分號(hào)分隔的屬性和值組成。CSS有四種基本類(lèi)型的定義，以對(duì)應(yīng)不同的功能。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）1標(biāo)簽選擇器標(biāo)簽選擇器中，CSS的定義由三部分構(gòu)成：標(biāo)簽（selector）、屬性（properties）和屬性值（value）?；靖袷饺缦拢簊elector property: valueselector是HTML中的標(biāo)簽，如h1標(biāo)簽、p標(biāo)簽、img標(biāo)簽等。例：p font-size:12px; color:red; /*設(shè)置p標(biāo)簽字體為紅色，大小為12px*

6、/div width:300px;height:240px; border:1px; /*設(shè)置div標(biāo)簽寬度為300px，高度為240px，邊框粗細(xì)為1px */使用標(biāo)簽選擇器，網(wǎng)頁(yè)中所有相關(guān)標(biāo)簽將所定義的樣式作為默認(rèn)設(shè)置。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）2類(lèi)別選擇器類(lèi)別選擇器中，CSS的定義由三部分構(gòu)成：類(lèi)別（class）、屬性（properties）和屬性值（value）?；靖袷饺缦拢?class property: valueclass是用戶自定義的類(lèi)別名稱，在類(lèi)別名前使用符號(hào)“.”作為類(lèi)別選擇器標(biāo)識(shí)。在網(wǎng)頁(yè)中，所有的HTML標(biāo)簽都可以使用所定義的樣式。在網(wǎng)頁(yè)中使用類(lèi)別選擇器的語(yǔ)法為：

7、在網(wǎng)頁(yè)中引用類(lèi)別選擇器的示例如下：使用類(lèi)別選擇器p1設(shè)置該p標(biāo)簽的樣式使用類(lèi)別選擇器div2設(shè)置該div標(biāo)簽的樣式網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）3ID選擇器ID選擇器中，CSS的定義由三部分構(gòu)成：ID（id）、屬性（properties）和屬性值（value）。基本格式如下：#id property: valueid和class一樣，是用戶可以自定義的類(lèi)別名稱，所不同的是，ID選擇器使用“#”作為定義標(biāo)識(shí)，ID選擇器在網(wǎng)頁(yè)中作用的標(biāo)簽是唯一的。在網(wǎng)頁(yè)中，ID選擇器和標(biāo)簽是一一對(duì)應(yīng)的。在網(wǎng)頁(yè)中使用ID選擇器的語(yǔ)法為：在網(wǎng)頁(yè)中引用ID選擇器的示例如下：使用ID選擇器p1設(shè)置該p標(biāo)簽的樣式使用ID

8、選擇器div2設(shè)置該div標(biāo)簽的樣式網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）4復(fù)合選擇器若要定義同時(shí)影響兩個(gè)或多個(gè)標(biāo)簽、類(lèi)或ID的復(fù)合規(guī)則，可以使用復(fù)合選擇器。在復(fù)合選擇器中，CSS定義由三部分構(gòu)成：復(fù)合名稱(name)、屬性（properties）和屬性值（value）。格式如下：name property: value在定義復(fù)合選擇器時(shí)，需要注意以下幾點(diǎn)：o “,”起間隔不同選擇器作用；o空格符起包含作用，通常右側(cè)選擇符在左側(cè)的選擇符約束下起作用。o在網(wǎng)頁(yè)中引用復(fù)合選擇器時(shí)，以最接近于大括號(hào)的選擇器類(lèi)型為基準(zhǔn)。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）4.1.4 使用使用CSS控制頁(yè)面控制頁(yè)面CSS功能強(qiáng)大

9、，在網(wǎng)頁(yè)中，定義CSS樣式表的標(biāo)簽為。通常將CSS樣式表放在HTML的標(biāo)簽中標(biāo)簽下面?？梢酝ㄟ^(guò)以下幾種方式在網(wǎng)頁(yè)中引用CSS樣式。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）1行內(nèi)樣式行內(nèi)樣式的格式為：網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）2內(nèi)嵌式內(nèi)嵌式的格式通常為：網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）3鏈接式鏈接式的格式通常為：鏈接式樣式表最大優(yōu)勢(shì)在于CSS代碼與HTML代碼的完全分離，且同一個(gè)CSS文件可以為不同的網(wǎng)頁(yè)使用。對(duì)于一個(gè)網(wǎng)站，把所有頁(yè)面都鏈接到同一個(gè)CSS文件，使用同樣的風(fēng)格，這樣對(duì)網(wǎng)站風(fēng)格的維護(hù)就很簡(jiǎn)單。鏈接樣式表是目前網(wǎng)站建設(shè)常用的CSS引用形式。網(wǎng)頁(yè)設(shè)計(jì)與制作案

10、例教程（第2版）網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）4導(dǎo)入樣式導(dǎo)入式的格式通常為：import url(stylesheet); 網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）4.1.5 CSS樣式面板樣式面板在Dreamweaver CS5中，對(duì)CSS樣式的管理主要通過(guò) “CSS樣式”面板完成。選擇“窗口CSS樣式”菜單命令或按組合鍵，展開(kāi)“CSS樣式”面板，如圖4-6所示。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）在“當(dāng)前”模式下， “CSS 樣式” 面板將顯示三個(gè)面板：“所選內(nèi)容的摘要”面板，其中顯示文檔中當(dāng)前所選內(nèi)容的 CSS 屬性；“規(guī)則”面板，其中顯示所選屬性的位置；以及“屬性

11、”面板，可以通過(guò)該面板編輯應(yīng)用于所選內(nèi)容的規(guī)則的 CSS 屬性。如圖4-7所示。 網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）4.2 學(xué)習(xí)任務(wù)：學(xué)習(xí)任務(wù)：CSS樣式的創(chuàng)建與屬性設(shè)置樣式的創(chuàng)建與屬性設(shè)置CSS有很多類(lèi)型，用于定義網(wǎng)頁(yè)元素的外觀，按照功能分類(lèi)主要有類(lèi)型、背景、區(qū)塊、方框、邊框、列表、定位和擴(kuò)展等。雖然CSS樣式表有如此強(qiáng)大的功能，但由于類(lèi)別過(guò)多，手工編寫(xiě)會(huì)比較麻煩。Dreamweaver CS5提供一個(gè)方便快捷的可視化解決方案，本節(jié)將介紹如何使用Dreamweaver編輯CSS樣式。本節(jié)學(xué)習(xí)任務(wù)本節(jié)學(xué)習(xí)任務(wù)創(chuàng)建CSS樣式，設(shè)置CSS樣式的屬性，使用代碼編寫(xiě)CSS樣式表。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（

12、第2版）4.2.1 創(chuàng)建創(chuàng)建CSS樣式樣式CSS樣式最大的優(yōu)點(diǎn)在于其靈活性。當(dāng)網(wǎng)頁(yè)應(yīng)用CSS樣式之后，如果不滿意，僅僅通過(guò)修改CSS樣式就可以更新所有的應(yīng)用。要為不同網(wǎng)頁(yè)元素設(shè)定CSS樣式，可先創(chuàng)建某種類(lèi)型的樣式，然后將它應(yīng)用到網(wǎng)頁(yè)元素中。創(chuàng)建CSS樣式的步驟請(qǐng)?jiān)贒reamweaver中演示創(chuàng)建CSS樣式的具體方法。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）4.2.2 設(shè)置設(shè)置CSS屬性屬性可以定義CSS規(guī)則的屬性，如字體、背景圖像、顏色、邊距等，這些都是通過(guò)設(shè)置CSS樣式的規(guī)則定義來(lái)實(shí)現(xiàn)的。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）1設(shè)置CSS類(lèi)型屬性網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）2設(shè)置CSS背景屬性網(wǎng)頁(yè)設(shè)計(jì)

13、與制作案例教程（第2版）3設(shè)置CSS區(qū)塊屬性網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）4設(shè)置CSS方框?qū)傩跃W(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）5設(shè)置CSS邊框?qū)傩跃W(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）6設(shè)置CSS列表屬性網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）7設(shè)置CSS定位屬性網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）8設(shè)置CSS擴(kuò)展屬性網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）4.2.3 通過(guò)通過(guò)CSS樣式面板設(shè)置樣式面板設(shè)置CSS屬性屬性可以通過(guò)“CSS樣式”面板設(shè)置和修改CSS樣式屬性。具體方法：選中某個(gè)CSS樣式，在“CSS樣式”面板下側(cè)的“*的屬性”欄中展開(kāi)該樣式的屬性值，通過(guò)添加、修改樣式的屬性和屬性值，來(lái)修改選中的CSS樣式

14、。CSS樣式屬性的含義及其屬性值如表4-1所示。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）4.3 學(xué)習(xí)任務(wù)：管理學(xué)習(xí)任務(wù)：管理CSS樣式樣式使用“CSS樣式”面板，可以對(duì)創(chuàng)建的CSS樣式表進(jìn)行查看、編輯、禁用或啟用、刪除等操作，也可以鏈接或者導(dǎo)入CSS樣式表。本節(jié)學(xué)習(xí)任務(wù)本節(jié)學(xué)習(xí)任務(wù)掌握在Dreamweaver中鏈接或者導(dǎo)入外部CSS樣式的方法，掌握查看、編輯、禁用或啟用、刪除CSS樣式的基本方法。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）4.3.1 鏈接或?qū)胪獠挎溄踊驅(qū)胪獠緾SS樣式樣式鏈接外部樣式表的具體操作步驟鏈接外部樣式表的具體操作步驟1）在Dreamweaver中，選擇“窗口CSS樣式”菜單命令，打

15、開(kāi)“CSS樣式”面板。在面板中單擊鼠標(biāo)右鍵，在彈出的快捷菜單中選擇“附加樣式表”命令，如圖4-17所示。2）單擊“附加樣式表”命令打開(kāi)“鏈接外部樣式表”對(duì)話框，如圖4-18所示。在該對(duì)話框中，單擊“文件/URL”文本框右側(cè)的【瀏覽】按鈕，彈出“選擇樣式表文件”對(duì)話框，從中選擇一個(gè)樣式表文件，在“添加為”選項(xiàng)中設(shè)置為“鏈接”。3）單擊【確定】按鈕關(guān)閉對(duì)話框，可以將外部的CSS樣式文件鏈接到文檔中。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）4.3.2 查看查看CSS樣式樣式通過(guò)“CSS樣式”面板，可以查看當(dāng)前文檔所使用的CSS樣式。具體方法：打開(kāi)CSS樣式面板，在默認(rèn)設(shè)置下，可以查看全部的CSS樣式，在“所

16、有規(guī)則”中，通過(guò)選中某CSS樣式以查看其詳細(xì)設(shè)置。也可以切換到“當(dāng)前”模式，查看所選中的CSS樣式的具體屬性。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）4.3.3 編輯和刪除編輯和刪除CSS樣式樣式通過(guò)“CSS樣式”面板，可以對(duì)CSS樣式進(jìn)行編輯和刪除等操作。具體方法：在Dreamweaver中，打開(kāi)“ch04-1ch04-1-3UseCss3.html”，展開(kāi)CSS樣式面板，單擊“所有規(guī)則”欄中所導(dǎo)入的CSS樣式文件名稱左側(cè)的 按鈕，展開(kāi)所導(dǎo)入的樣式表文件“UseCSS3.CSS”。選中“p”的CSS樣式規(guī)則，可以在“CSS樣式”面板下方中“p的屬性”查看該CSS規(guī)則的屬性。若要修改“p”樣式規(guī)則的“font-weight”屬性的值，只需展開(kāi)右側(cè)的下拉菜單，進(jìn)行重新設(shè)置。如圖4-19所示。如果要為此樣式繼續(xù)添加屬性，單擊“添加屬性”，在彈出下拉菜單中選擇需要添加的屬性名稱，在右側(cè)設(shè)置其值即可。網(wǎng)頁(yè)設(shè)計(jì)與制作案例教程（第2版）4.4 案例案例1：使用：使用CSS樣式美化網(wǎng)頁(yè)樣式美化網(wǎng)頁(yè)學(xué)習(xí)目標(biāo)學(xué)習(xí)目標(biāo) 打開(kāi)素材文件，創(chuàng)建CSS樣式，并使用CSS樣式美化網(wǎng)頁(yè)中的文字和圖片。 知識(shí)要點(diǎn)知識(shí)要點(diǎn) 創(chuàng)建CSS樣式；為網(wǎng)頁(yè)中的標(biāo)簽應(yīng)用CSS樣式；查看CSS樣式的代碼。案例效果如圖4-