項目三使用CSS樣式美化網(wǎng)頁

1、項目三項目三 使用使用CSSCSS樣式美化網(wǎng)頁樣式美化網(wǎng)頁網(wǎng)頁設(shè)計與制作網(wǎng)頁設(shè)計與制作1 CSS的基本概念2 CSS的語法規(guī)則3 CSS選擇器的使用學習內(nèi)容4 CSS常用屬性及式學習目標學習目標了解CSS的意義；掌握CSS樣式的添加、刪除和修改方法；掌握各類CSS樣式的創(chuàng)建方法；掌握各類CSS樣式的應用方法。 通過任務的分析講解與鞏固練習，使學生能熟練掌握css 的定義及應用方法，能根據(jù)頁面設(shè)計的需要合理地利用CSS樣式實現(xiàn)頁面的美化。1. 具有勤奮學習的態(tài)度，嚴謹求實、創(chuàng)新的工作作風；2. 具有良好的心理素質(zhì)和職業(yè)道德素質(zhì)；3. 具有高度責任心和良好的團隊合作精神；4. 具有一定的科學思維方

2、式和判斷分析問題的能力；5. 具有較強的網(wǎng)頁設(shè)計創(chuàng)意思維、藝術(shù)設(shè)計素質(zhì)。單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面設(shè)置如圖所示的網(wǎng)頁設(shè)置如圖所示的網(wǎng)頁v 效果圖效果圖任務描述任務描述:任務分析任務分析1.1.頁面的結(jié)頁面的結(jié)構(gòu)分析構(gòu)分析單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面任務分析任務分析單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面 要完成該頁面的美化任務，必須使用要完成該頁面的美化任務，必須使用CSS樣式，對于樣式，對于CSS樣式的設(shè)置，需要考慮以下問題：樣式的設(shè)置，需要考慮以下問題：1.1.什么是什么是CSSCSS樣式？樣式？2.2.如何定義如何定義C

3、SSCSS樣式？樣式？3.3.如何在網(wǎng)頁中使用如何在網(wǎng)頁中使用CSSCSS樣樣式？式？任務分析任務分析2.CSS2.CSS樣式樣式設(shè)計分析設(shè)計分析單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面技術(shù)要點技術(shù)要點一一. 什么是什么是CSS？二二.CSS選擇器的分類選擇器的分類三三.各類各類CSS選擇器的定義與應用方法選擇器的定義與應用方法四四.各類各類CSS選擇器的應用區(qū)別及優(yōu)先順序選擇器的應用區(qū)別及優(yōu)先順序單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面知識點：知識點：CSS簡介簡介單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面v一組樣式可以被調(diào)用在多個對象上一組樣式可以被

4、調(diào)用在多個對象上。只要定義一組樣只要定義一組樣式后，就可以隨心所欲地被調(diào)用在任一段。式后，就可以隨心所欲地被調(diào)用在任一段。v語法易學易懂語法易學易懂。v簡化了網(wǎng)頁的格式代碼，外部的樣式表還會被瀏覽器簡化了網(wǎng)頁的格式代碼，外部的樣式表還會被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼數(shù)量（因為重復設(shè)置的格式將被只保存一上傳的代碼數(shù)量（因為重復設(shè)置的格式將被只保存一次）。次）。1.1.什么是什么是CSSCSS樣式？樣式？知識點：知識點：CSS簡介簡介單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面 張飛張飛 身高身高:185

5、cm;:185cm; 體重體重:105kg;:105kg; 性別性別: :男男; ; 性格性格: :暴躁暴躁; ; 民族民族: :漢族漢族; ; 對于對于“張飛張飛”這個對象的描這個對象的描述實際由述實際由3 3個要素組成的，個要素組成的，即即姓名姓名、屬性屬性和和屬性值屬性值。h2h2 font-familyfont-family: : 宋宋體體; ; font-size:15px font-size:15px; ; colorcolor: red;: red; text-decoration text-decoration: : underline;underline; 轉(zhuǎn)換成網(wǎng)頁代碼的形

6、式知識點：知識點：CSS簡介簡介單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面1.1.什么是什么是CSSCSS樣式？樣式？vCSSCSS的思想就是首先指定對什么的思想就是首先指定對什么“對象對象”進行設(shè)置，然進行設(shè)置，然后指定對該對象的哪個方面的后指定對該對象的哪個方面的“屬性屬性”進行設(shè)置，最后給進行設(shè)置，最后給出該設(shè)置的出該設(shè)置的“值值”。v因此，概括來說，因此，概括來說，CSSCSS就是由就是由3 3個基本部分個基本部分“對象對象”、“屬性屬性”和和“值值”組成的。組成的。知識點：知識點：CSS選擇器選擇器單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面2 2. .CSSC

7、SS選擇器選擇器 在在CSSCSS的的3 3個組成部分中，個組成部分中，“對象對象”是很重要的，它指是很重要的，它指定了對哪些網(wǎng)頁元素進行設(shè)置，因此，它有一個專門的名定了對哪些網(wǎng)頁元素進行設(shè)置，因此，它有一個專門的名稱稱選擇器選擇器（selectorselector）。）。 基本格式基本格式選擇器選擇器 屬性屬性1 1：屬性值：屬性值1 1；屬性；屬性2 2：屬性值：屬性值2 2； CSS 語法由三部分構(gòu)成：語法由三部分構(gòu)成：選擇器選擇器、樣式屬性樣式屬性和和值值。知識點：知識點：CSS選擇器選擇器單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面v類類（可應用于任何（可應用于任何HTML

8、HTML標簽），也稱自定義樣式。標簽），也稱自定義樣式。 v標簽標簽（重新定義特定標簽的外觀），也稱（重新定義特定標簽的外觀），也稱HTMLHTML標簽樣式。標簽樣式?？梢詫⒃O(shè)置的樣式屬性自動對應所選的標簽名稱?？梢詫⒃O(shè)置的樣式屬性自動對應所選的標簽名稱。vIDID選擇器選擇器（僅應用于一個僅應用于一個HTMLHTML標簽標簽）。）。 v復合選擇器復合選擇器，可以創(chuàng)建對某一具體的標簽組合或者含有，可以創(chuàng)建對某一具體的標簽組合或者含有特定特定IDID屬性的標簽、以及超級鏈接應用樣式。屬性的標簽、以及超級鏈接應用樣式。 1.1.各類不同的各類不同的CSSCSS選擇器在選擇器在使用時有何區(qū)別？使用時

9、有何區(qū)別？2.2.在實際應用中，該如何合在實際應用中，該如何合理地選擇？理地選擇？CSSCSS選擇器的類別選擇器的類別知識點：知識點：CSS選擇器選擇器單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面格式格式： HTMLHTML標簽記名標簽記名 屬性屬性1 1：屬性值：屬性值1 1；屬性；屬性2 2：屬性值：屬性值2 2； 作用作用：相當于：相當于重定義重定義HTML標記，在標記，在保留保留該標記原有功能的同時該標記原有功能的同時新新增增在在CSS規(guī)則中定義的功能。規(guī)則中定義的功能。應用方法應用方法：自動應用自動應用到網(wǎng)頁中到網(wǎng)頁中所有使用了該標記的元素所有使用了該標記的元素上。上。使用

10、場合使用場合：如果網(wǎng)頁中：如果網(wǎng)頁中所有同類所有同類的對象要使用的對象要使用同一種樣式同一種樣式，則通，則通過創(chuàng)建過創(chuàng)建“重定義標簽重定義標簽”的方式來設(shè)計樣式的方式來設(shè)計樣式標簽選擇器標簽選擇器 h1 color: red; font-size: 25px; 知識點：知識點：CSS選擇器選擇器單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面格式格式： . .類名類名 屬性屬性1 1：屬性值：屬性值1 1；屬性；屬性2 2：屬性值：屬性值2 2； 類選擇器類選擇器 .red color:red;font-size:18px; 作用作用：可以將定義的類樣式應用于任何對象。：可以將定義的類樣

11、式應用于任何對象。 。應用方法：應用方法：不能自動應用不能自動應用，必須由設(shè)計者選擇在何種對象上使用。，必須由設(shè)計者選擇在何種對象上使用。引用格式：引用格式：使用場合使用場合：如果同樣的格式，要分別在不同的對象上應用，或者：如果同樣的格式，要分別在不同的對象上應用，或者在某一同類對象的局部使用，則通過創(chuàng)建在某一同類對象的局部使用，則通過創(chuàng)建“類類” 的方法來分別創(chuàng)建的方法來分別創(chuàng)建不同的樣式，并有不同的樣式，并有選擇性選擇性地在相關(guān)對象上加以應用。地在相關(guān)對象上加以應用。知識點：知識點：CSS選擇器選擇器單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面格式格式：#ID#ID名名 屬性屬性

12、1 1：屬性值：屬性值1 1；屬性；屬性2 2：屬性值：屬性值2 2； 用法基本與類選擇器相同，但是，用法基本與類選擇器相同，但是，ID樣式樣式只能在一個對象上使用只能在一個對象上使用，其基本作用是對每一個頁面中唯一的元素進行定義。其基本作用是對每一個頁面中唯一的元素進行定義。引用方法：引用方法：ID選擇器選擇器知識點：知識點：CSS選擇器選擇器單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面a:hover：鼠標經(jīng)過鏈接時的狀態(tài)。：鼠標經(jīng)過鏈接時的狀態(tài)。 a:visited：已訪問過的鏈接狀態(tài)。：已訪問過的鏈接狀態(tài)。a:active：活動的鏈接狀態(tài)。指鼠標左鍵按下時但還沒有松開時：活動的

13、鏈接狀態(tài)。指鼠標左鍵按下時但還沒有松開時的狀態(tài)的狀態(tài)偽類選擇器偽類選擇器主要通過主要通過A:link, A:hover; A:active; A:visited來設(shè)置來設(shè)置鏈接對象的四種鏈接狀態(tài)。鏈接對象的四種鏈接狀態(tài)。注意：注意：如果是重定義如果是重定義A標簽，則相當于同時定義鏈接的四種狀態(tài)為標簽，則相當于同時定義鏈接的四種狀態(tài)為相同樣式。相同樣式。偽類選擇器偽類選擇器4 4種狀態(tài)的設(shè)置順序種狀態(tài)的設(shè)置順序為：為： LVHALVHA知識點：知識點：CSS選擇器選擇器單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面組合類型的選擇器組合類型的選擇器1）標簽選擇器、類選擇器、）標簽選擇器、類

14、選擇器、ID選擇器是三種最選擇器是三種最基本基本的選擇器。的選擇器。2）以這三種基本選擇器為基礎(chǔ)，通過組合，還可以）以這三種基本選擇器為基礎(chǔ)，通過組合，還可以產(chǎn)生更多種類的選擇器，實現(xiàn)更強、更方便的選擇產(chǎn)生更多種類的選擇器，實現(xiàn)更強、更方便的選擇功能。功能。3）復合選擇器復合選擇器就是由兩個或多全基本選擇器通過不就是由兩個或多全基本選擇器通過不同的組合方法得到的。同的組合方法得到的。知識點：知識點：CSS選擇器選擇器單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面組合類型的選擇器組合類型的選擇器1 1）交集選擇器）交集選擇器h3.class color: red; font-size:

15、23px; 選擇器 屬性 值 屬性 值 聲明 聲明 標記 類別名稱 交集選擇器交集選擇器由兩個選擇器直接連接而成，其是第由兩個選擇器直接連接而成，其是第1個個必須是必須是標簽選擇器標簽選擇器，第，第2個必須是個必須是類選擇器或類選擇器或ID選擇器選擇器，兩個選擇器之間必須連續(xù)書寫，不能有空格。兩個選擇器之間必須連續(xù)書寫，不能有空格。 這種樣式定義的結(jié)果為二者的交集。這種樣式定義的結(jié)果為二者的交集。知識點：知識點：CSS選擇器選擇器單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面組合類型的選擇器組合類型的選擇器1 1）交集選擇器）交集選擇器 普通段落文本（藍色）普通段落文本（藍色） 普通標

16、題文本（黑色）普通標題文本（黑色） 指定了指定了.special類別的段落文本（紅色類別的段落文本（紅色 指定了指定了.special類別的標題文本（綠色）類別的標題文本（綠色） CSS樣式定樣式定義部分義部分正文部分正文部分 P color:blue; p.Special color:red; .special color:green; 知識點：知識點：CSS選擇器選擇器單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面組合類型的選擇器組合類型的選擇器2 2）并集選擇器）并集選擇器 h1, h2, h3, h4, h5, p color:purple; font-size:15px; h

17、2.special, .special, #one text-decoration:underline; u并集選擇器是由多個基本選擇器通過逗號連接而成。并集選擇器是由多個基本選擇器通過逗號連接而成。u在聲明各種選擇器時，如果某些選擇器的風格是完全相在聲明各種選擇器時，如果某些選擇器的風格是完全相同的，或者部分相同，就可以利用并集選擇器同時聲明。同的，或者部分相同，就可以利用并集選擇器同時聲明。同時聲明多同時聲明多個標簽個標簽此處的聲明此處的聲明代表什么呢？代表什么呢？知識點：知識點：CSS選擇器選擇器單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面組合類型的選擇器組合類型的選擇器3.3

18、.后代選擇器后代選擇器u在在CSS選擇器中，還可以通過嵌套的方式對特殊位置選擇器中，還可以通過嵌套的方式對特殊位置的的HTML標記標記進行聲明，如當進行聲明，如當與與之間包含之間包含標記時，就可以用后代選擇器進行控制。標記時，就可以用后代選擇器進行控制。u后代選擇器的寫法是：將后代選擇器的寫法是：將外層的標記寫在前面外層的標記寫在前面，內(nèi)層內(nèi)層的標記寫在后面的標記寫在后面，中間有，中間有空格空格分隔。分隔。u當標記發(fā)生嵌套時，內(nèi)層的標記就稱為外層標記的后當標記發(fā)生嵌套時，內(nèi)層的標記就稱為外層標記的后代。代。知識點：知識點：CSS選擇器選擇器單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面

19、組合類型的選擇器組合類型的選擇器3)3)后代選擇器后代選擇器p span color:red; span color:blue; 嵌套使嵌套使用用CSS（紅色）（紅色）標記標記的方法的方法 嵌套之外的嵌套之外的標記（藍色）標記（藍色）不生效不生效定義定義P標記內(nèi)標記內(nèi)的的SPAN標記標記的格式為紅色的格式為紅色定義所有的定義所有的SPAN標記的標記的格式為藍色格式為藍色知識點：知識點：CSS選擇器選擇器單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面組合類型的選擇器組合類型的選擇器3)3)后代選擇器后代選擇器v 后代選擇器的組合方式后代選擇器的組合方式 后代選擇器的使用非常廣泛，不僅標記

20、選擇器可以以這種方式組合，類別選擇器和ID選擇器都可以進行嵌套。v 后代選擇器的組合實例后代選擇器的組合實例 .special i color: red; 定義使用了類樣式special的標記里面包含的的樣式規(guī)則。 #one li padding-left:5px; 定義ID為one的標記里面包含的的樣式規(guī)則 td.out .inside strong font-size: 16px; 多層嵌套的后代選擇器在在HTMLHTML中使用中使用CSSCSS樣式的方法樣式的方法 外部樣式表文件：將外部樣式表文件：將CSSCSS樣式的定義通過獨立的樣式的定義通過獨立的.CSS.CSS文件保存。文件保存。

21、 行內(nèi)式：將行內(nèi)式：將CSSCSS樣式的定義直接放在某樣式的定義直接放在某HTMLHTML標記的標記的SYTLESYTLE屬性中。屬性中。 內(nèi)嵌式：將內(nèi)嵌式：將CSSCSS樣式的定義嵌入到樣式的定義嵌入到HTMLHTML文檔的開頭。文檔的開頭。u直接直接CSS樣式的定義語句保存為擴展名為樣式的定義語句保存為擴展名為.css的文件的文件u在網(wǎng)頁中鏈接一個外部的在網(wǎng)頁中鏈接一個外部的CSS樣式文件語法格式：在網(wǎng)頁樣式文件語法格式：在網(wǎng)頁頭中加入以下語句頭中加入以下語句 link href=mycss.css rel=stylesheet type=text/css如：如：紅色的文字紅色的文字在網(wǎng)頁

22、頭中輸入如下語句在網(wǎng)頁頭中輸入如下語句style type=“text/css”!- CSS的定義語句的定義語句-/style單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面知識點：知識點：CSS選擇器選擇器單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面組合類型的選擇器組合類型的選擇器3)3)后代選擇器后代選擇器v 后代選擇器的組合方式后代選擇器的組合方式 后代選擇器的使用非常廣泛，不僅標記選擇器可以以這種方式組合，類別選擇器和ID選擇器都可以進行嵌套。v 后代選擇器的組合實例后代選擇器的組合實例 .special i color: red; 定義使用了類樣式special的標記

23、里面包含的的樣式規(guī)則。 #one li padding-left:5px; 定義ID為one的標記里面包含的的樣式規(guī)則 td.out .inside strong font-size: 16px; 多層嵌套的后代選擇器樣式的優(yōu)先級樣式的優(yōu)先級v 多重樣式（多重樣式（Multiple Styles）：如果外部樣式、內(nèi)部樣式）：如果外部樣式、內(nèi)部樣式和內(nèi)聯(lián)樣式同時應用于同一個元素，就是使多重樣式的情和內(nèi)聯(lián)樣式同時應用于同一個元素，就是使多重樣式的情況。況。 v 一般情況下，優(yōu)先級如下：一般情況下，優(yōu)先級如下： v 外部樣式外部樣式內(nèi)部樣式內(nèi)部樣式內(nèi)聯(lián)樣式內(nèi)聯(lián)樣式CSS樣式難點分析樣式難點分析樣式的

24、優(yōu)先級樣式的優(yōu)先級v 有個例外的情況，就是如果外部樣式放在內(nèi)部樣式的后面，有個例外的情況，就是如果外部樣式放在內(nèi)部樣式的后面，則外部樣式將覆蓋內(nèi)部樣式。則外部樣式將覆蓋內(nèi)部樣式。v 示例如下：示例如下：CSS樣式難點分析樣式難點分析CSS樣式難點分析樣式難點分析CSS 優(yōu)先級法則：優(yōu)先級法則：v 選擇器都有一個權(quán)值，權(quán)值越大越優(yōu)先；選擇器都有一個權(quán)值，權(quán)值越大越優(yōu)先；v 當權(quán)值相等時，后出現(xiàn)的樣式表設(shè)置要優(yōu)于先出現(xiàn)的樣式當權(quán)值相等時，后出現(xiàn)的樣式表設(shè)置要優(yōu)于先出現(xiàn)的樣式表設(shè)置；表設(shè)置；v 創(chuàng)作者的規(guī)則高于瀏覽者：即網(wǎng)頁編寫者設(shè)置的創(chuàng)作者的規(guī)則高于瀏覽者：即網(wǎng)頁編寫者設(shè)置的CSS 樣樣式的優(yōu)先權(quán)

25、高于瀏覽器所設(shè)置的樣式；式的優(yōu)先權(quán)高于瀏覽器所設(shè)置的樣式；v 繼承的繼承的CSS 樣式不如后來指定的樣式不如后來指定的CSS 樣式；樣式；v 在同一組屬性設(shè)置中標有在同一組屬性設(shè)置中標有“!important”規(guī)則的優(yōu)先級最規(guī)則的優(yōu)先級最大。大。CSS樣式難點分析樣式難點分析任務實施任務實施1.站點配置站點配置 根據(jù)所提供的素材完成站點的配置。2.手工編寫手工編寫HTML文件文件 在已經(jīng)配置好的站點下創(chuàng)建網(wǎng)頁文件index.html，網(wǎng)頁的內(nèi)容通過手工編定HTML代碼來完成。單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面任務實施任務實施3. 為網(wǎng)頁設(shè)計為網(wǎng)頁設(shè)計CSS樣式并應用樣式并應

26、用（1）設(shè)置body樣式 重定義body標簽，主要用于定義頁面的整體設(shè)置。對于當前頁面，需要進行整體設(shè)置的是頁面文字和背景效果。單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面圖 body的樣式規(guī)則定義及效果任務實施任務實施3. 為網(wǎng)頁設(shè)計為網(wǎng)頁設(shè)計CSS樣式并應用樣式并應用（1）設(shè)置body樣式樣式代碼如下：body font-family: 宋體; font-size: 12px; color: #666; background-image: url(images/bodybg.gif); background-repeat: repeat-x; background-color:

27、#D3F3FB;單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面任務實施任務實施3. 為網(wǎng)頁設(shè)計為網(wǎng)頁設(shè)計CSS樣式并應用樣式并應用（2）重定義table標記 通過重定義table標記定義表格的整體效果，包括：寬度、邊框、背景、文字對齊方式等。單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面圖 table的樣式規(guī)則定義任務實施任務實施3. 為網(wǎng)頁設(shè)計為網(wǎng)頁設(shè)計CSS樣式并應用樣式并應用（2）重定義table標記樣式代碼為：table text-align: left; background-color: #FFF; border-bottom-width: 8px; border-

28、bottom-style: double; border-bottom-color: #32B5D2; width: 700px;單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面圖 table的樣式規(guī)則定義任務實施任務實施3. 為網(wǎng)頁設(shè)計為網(wǎng)頁設(shè)計CSS樣式并應用樣式并應用（3）重定義H2標記樣式 H2的內(nèi)容只有一幅圖片，定義為居中顯示。單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面h2 text-align: center; height: 40px;任務實施任務實施3. 為網(wǎng)頁設(shè)計為網(wǎng)頁設(shè)計CSS樣式并應用樣式并應用（4）重定義H3標記樣式 單元三：使用單元三：使用CSS樣式

29、美化頁面樣式美化頁面h3 font-size: 13px; font-weight: bold;任務實施任務實施3. 為網(wǎng)頁設(shè)計為網(wǎng)頁設(shè)計CSS樣式并應用樣式并應用（5）分別定義類樣式.title1,.title2,.title3 單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面 由于各H3標記對應的內(nèi)容在顏色上是不一樣的，所以分別定義三個類樣式.title1,.title2,.title3來設(shè)置文字的顏色。.title1的樣式定義規(guī)則如圖所示。.title2和.title3的樣式定義規(guī)則與.tilte1相同，只是文字顏色分別為#006600和#ff9933。圖 .title1的樣式規(guī)則

30、定 任務實施任務實施3. 為網(wǎng)頁設(shè)計為網(wǎng)頁設(shè)計CSS樣式并應用樣式并應用（5）分別定義類樣式.title1,.title2,.title3 樣式代碼為： 單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面.title1 color: #006600; .title3 color: #ff9933; .title2 color: #206996; 任務實施任務實施3. 為網(wǎng)頁設(shè)計為網(wǎng)頁設(shè)計CSS樣式并應用樣式并應用（5）分別定義類樣式.title1,.title2,.title3 單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面類樣式定義完成后，分別應用在三個H3標記上，效果如圖所示。

31、圖 應用了類樣式后的h3效果任務實施任務實施3. 為網(wǎng)頁設(shè)計為網(wǎng)頁設(shè)計CSS樣式并應用樣式并應用（6）重定義P標記 單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面p line-height: 20px; text-indent: 2em; 任務實施任務實施3. 為網(wǎng)頁設(shè)計為網(wǎng)頁設(shè)計CSS樣式并應用樣式并應用（7）設(shè)置底部圖片之間的間距 為了控制底部兩幅圖片之間的距離，可以定義一個類樣式.pic1（設(shè)置其margin屬性），然后應用于第一幅圖片的img標記上。 單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面.pic1 margin-right: 25px; margin-left

32、: 25px; 任務實施任務實施3. 為網(wǎng)頁設(shè)計為網(wǎng)頁設(shè)計CSS樣式并應用樣式并應用（8）定義列表的樣式 可以通過重定義LI標記來設(shè)置列表的樣式，設(shè)置的屬性包括：列表符、背景、行高和縮進等。 單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面li background-image: url(images/t02.png);background-repeat: no-repeat;list-style-type: none;line-height: 25px;background-position: left center;height: 25px;text-indent: 20px;wid

33、th: 460px;border-bottom-width: 1px;border-bottom-style: dashed;border-bottom-color: #68A704;任務實施任務實施3. 為網(wǎng)頁設(shè)計為網(wǎng)頁設(shè)計CSS樣式并應用樣式并應用 單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面頁面最終效果圖要點解析要點解析1對于網(wǎng)頁的整體效果設(shè)置，可以通過重定義對于網(wǎng)頁的整體效果設(shè)置，可以通過重定義body標簽來標簽來實現(xiàn)。實現(xiàn)。2對于某個對于某個HTML元素的共同設(shè)置，可能通過重定義該來元素的共同設(shè)置，可能通過重定義該來實現(xiàn)。實現(xiàn)。3對于只在局部使用的效果，可以通過定義類樣式或?qū)τ谥辉诰植渴褂玫男Ч?，可以通過定義類樣式或ID樣樣式來實現(xiàn)，但要注意式來實現(xiàn)，但要注意ID樣式只能在一個樣式只能在一個HTML元素上使用，元素上使用，而類樣式則可以在任意而類樣式則可以在任意HTML元素上使用。元素上使用。單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面v完成如圖網(wǎng)頁的制作完成如圖網(wǎng)頁的制作鞏固練習鞏固練習設(shè)計要求設(shè)計要求 網(wǎng)頁的內(nèi)容通過手工編寫HTML代碼來完成； 網(wǎng)頁中各元素的樣式效果通過定義CSS樣式來完成； 所有的CSS樣式必須保存