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

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

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

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

5、cm;:185cm; 體重體重:105kg;:105kg; 性別性別: :男男; ; 性格性格: :暴躁暴躁; ; 民族民族: :漢族漢族; ; 對于對于“張飛張飛”這個對象的描這個對象的描述實(shí)際由述實(shí)際由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、式知識點(diǎn)：知識點(diǎn)：CSS簡介簡介單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面1.1.什么是什么是CSSCSS樣式？樣式？vCSSCSS的思想就是首先指定對什么的思想就是首先指定對什么“對象對象”進(jìn)行設(shè)置，然進(jìn)行設(shè)置，然后指定對該對象的哪個方面的后指定對該對象的哪個方面的“屬性屬性”進(jìn)行設(shè)置，最后給進(jìn)行設(shè)置，最后給出該設(shè)置的出該設(shè)置的“值值”。v因此，概括來說，因此，概括來說，CSSCSS就是由就是由3 3個基本部分個基本部分“對象對象”、“屬性屬性”和和“值值”組成的。組成的。知識點(diǎn)：知識點(diǎn)：CSS選擇器選擇器單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面2 2. .CSSC

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

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

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

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

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

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

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

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

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

16、題文本（黑色）普通標(biāo)題文本（黑色） 指定了指定了.special類別的段落文本（紅色類別的段落文本（紅色 指定了指定了.special類別的標(biāo)題文本（綠色）類別的標(biāo)題文本（綠色） CSS樣式定樣式定義部分義部分正文部分正文部分 P color:blue; p.Special color:red; .special color:green; 知識點(diǎn)：知識點(diǎn)：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在聲明各種選擇器時，如果某些選擇器的風(fēng)格是完全相在聲明各種選擇器時，如果某些選擇器的風(fēng)格是完全相同的，或者部分相同，就可以利用并集選擇器同時聲明。同的，或者部分相同，就可以利用并集選擇器同時聲明。同時聲明多同時聲明多個標(biāo)簽個標(biāo)簽此處的聲明此處的聲明代表什么呢？代表什么呢？知識點(diǎn)：知識點(diǎn)：CSS選擇器選擇器單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面組合類型的選擇器組合類型的選擇器3.3

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

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

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

21、 行內(nèi)式：將行內(nèi)式：將CSSCSS樣式的定義直接放在某樣式的定義直接放在某HTMLHTML標(biāo)記的標(biāo)記的SYTLESYTLE屬性中。屬性中。 內(nèi)嵌式：將內(nèi)嵌式：將CSSCSS樣式的定義嵌入到樣式的定義嵌入到HTMLHTML文檔的開頭。文檔的開頭。u直接直接CSS樣式的定義語句保存為擴(kuò)展名為樣式的定義語句保存為擴(kuò)展名為.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樣式美化頁面樣式美化頁面知識點(diǎn)：知識點(diǎn)：CSS選擇器選擇器單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面組合類型的選擇器組合類型的選擇器3)3)后代選擇器后代選擇器v 后代選擇器的組合方式后代選擇器的組合方式 后代選擇器的使用非常廣泛，不僅標(biāo)記選擇器可以以這種方式組合，類別選擇器和ID選擇器都可以進(jìn)行嵌套。v 后代選擇器的組合實(shí)例后代選擇器的組合實(shí)例 .special i color: red; 定義使用了類樣式special的標(biāo)記

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

24、優(yōu)先級樣式的優(yōu)先級v 有個例外的情況，就是如果外部樣式放在內(nèi)部樣式的后面，有個例外的情況，就是如果外部樣式放在內(nèi)部樣式的后面，則外部樣式將覆蓋內(nèi)部樣式。則外部樣式將覆蓋內(nèi)部樣式。v 示例如下：示例如下：CSS樣式難點(diǎn)分析樣式難點(diǎn)分析CSS樣式難點(diǎn)分析樣式難點(diǎn)分析CSS 優(yōu)先級法則：優(yōu)先級法則：v 選擇器都有一個權(quán)值，權(quán)值越大越優(yōu)先；選擇器都有一個權(quán)值，權(quán)值越大越優(yōu)先；v 當(dāng)權(quán)值相等時，后出現(xiàn)的樣式表設(shè)置要優(yōu)于先出現(xiàn)的樣式當(dāng)權(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è)置中標(biāo)有在同一組屬性設(shè)置中標(biāo)有“!important”規(guī)則的優(yōu)先級最規(guī)則的優(yōu)先級最大。大。CSS樣式難點(diǎn)分析樣式難點(diǎn)分析任務(wù)實(shí)施任務(wù)實(shí)施1.站點(diǎn)配置站點(diǎn)配置 根據(jù)所提供的素材完成站點(diǎn)的配置。2.手工編寫手工編寫HTML文件文件 在已經(jīng)配置好的站點(diǎn)下創(chuàng)建網(wǎng)頁文件index.html，網(wǎng)頁的內(nèi)容通過手工編定HTML代碼來完成。單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面任務(wù)實(shí)施任務(wù)實(shí)施3. 為網(wǎng)頁設(shè)計為網(wǎng)頁設(shè)計CSS樣式并應(yīng)用樣式并應(yīng)

26、用（1）設(shè)置body樣式 重定義body標(biāo)簽，主要用于定義頁面的整體設(shè)置。對于當(dāng)前頁面，需要進(jìn)行整體設(shè)置的是頁面文字和背景效果。單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面圖 body的樣式規(guī)則定義及效果任務(wù)實(shí)施任務(wù)實(shí)施3. 為網(wǎng)頁設(shè)計為網(wǎng)頁設(shè)計CSS樣式并應(yīng)用樣式并應(yīng)用（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樣式美化頁面樣式美化頁面任務(wù)實(shí)施任務(wù)實(shí)施3. 為網(wǎng)頁設(shè)計為網(wǎng)頁設(shè)計CSS樣式并應(yīng)用樣式并應(yīng)用（2）重定義table標(biāo)記 通過重定義table標(biāo)記定義表格的整體效果，包括：寬度、邊框、背景、文字對齊方式等。單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面圖 table的樣式規(guī)則定義任務(wù)實(shí)施任務(wù)實(shí)施3. 為網(wǎng)頁設(shè)計為網(wǎng)頁設(shè)計CSS樣式并應(yīng)用樣式并應(yīng)用（2）重定義table標(biāo)記樣式代碼為：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ī)則定義任務(wù)實(shí)施任務(wù)實(shí)施3. 為網(wǎng)頁設(shè)計為網(wǎng)頁設(shè)計CSS樣式并應(yīng)用樣式并應(yīng)用（3）重定義H2標(biāo)記樣式 H2的內(nèi)容只有一幅圖片，定義為居中顯示。單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面h2 text-align: center; height: 40px;任務(wù)實(shí)施任務(wù)實(shí)施3. 為網(wǎng)頁設(shè)計為網(wǎng)頁設(shè)計CSS樣式并應(yīng)用樣式并應(yīng)用（4）重定義H3標(biāo)記樣式 單元三：使用單元三：使用CSS樣式

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

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

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

32、: 25px; 任務(wù)實(shí)施任務(wù)實(shí)施3. 為網(wǎng)頁設(shè)計為網(wǎng)頁設(shè)計CSS樣式并應(yīng)用樣式并應(yīng)用（8）定義列表的樣式 可以通過重定義LI標(biāo)記來設(shè)置列表的樣式，設(shè)置的屬性包括：列表符、背景、行高和縮進(jìn)等。 單元三：使用單元三：使用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;任務(wù)實(shí)施任務(wù)實(shí)施3. 為網(wǎng)頁設(shè)計為網(wǎng)頁設(shè)計CSS樣式并應(yīng)用樣式并應(yīng)用 單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面頁面最終效果圖要點(diǎn)解析要點(diǎn)解析1對于網(wǎng)頁的整體效果設(shè)置，可以通過重定義對于網(wǎng)頁的整體效果設(shè)置，可以通過重定義body標(biāo)簽來標(biāo)簽來實(shí)現(xiàn)。實(shí)現(xiàn)。2對于某個對于某個HTML元素的共同設(shè)置，可能通過重定義該來元素的共同設(shè)置，可能通過重定義該來實(shí)現(xiàn)。實(shí)現(xiàn)。3對于只在局部使用的效果，可以通過定義類樣式或?qū)τ谥辉诰植渴褂玫男Ч?，可以通過定義類樣式或ID樣樣式來實(shí)現(xiàn)，但要注意式來實(shí)現(xiàn)，但要注意ID樣式只能在一個樣式只能在一個HTML元素上使用，元素上使用，而類樣式則可以在任意而類樣式則可以在任意HTML元素上使用。元素上使用。單元三：使用單元三：使用CSS樣式美化頁面樣式美化頁面v完成如圖網(wǎng)頁的制作完成如圖網(wǎng)頁的制作鞏固練習(xí)鞏固練習(xí)設(shè)計要求設(shè)計要求 網(wǎng)頁的內(nèi)容通過手工編寫HTML代碼來完成； 網(wǎng)頁中各元素的樣式效果通過定義CSS樣式來完成； 所有的CSS樣式必須保存