(教學(xué)課件)chapter6利用CSS美化網(wǎng)頁

第6章利用CSS樣式美化網(wǎng)頁

——制作“服務(wù)”頁面計算機工程學(xué)院計算機基礎(chǔ)教學(xué)部第6章利用CSS樣式美化網(wǎng)頁

——制作“服務(wù)”頁面計算機工學(xué)習(xí)目標(biāo)掌握創(chuàng)建樣式及應(yīng)用樣式的方法了解CSS選擇器的4種類型的區(qū)別了解CSS常用屬性值的設(shè)置了解利用CSS控制網(wǎng)頁的3種方法掌握利用外部樣式表文件統(tǒng)一網(wǎng)站風(fēng)格的方法了解利用CSS美化網(wǎng)頁的流程深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）2學(xué)習(xí)目標(biāo)掌握創(chuàng)建樣式及應(yīng)用樣式的方法深圳職業(yè)技術(shù)學(xué)院計算機實訓(xùn)項目網(wǎng)頁設(shè)計師小高圍繞“慧衡科技專業(yè)服務(wù)”這一主題，已經(jīng)制作好了網(wǎng)頁內(nèi)容，現(xiàn)需要對其進行美化。深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）3實訓(xùn)項目網(wǎng)頁設(shè)計師小高圍繞“慧衡科技專業(yè)服務(wù)”這一主題，已經(jīng)項目分析設(shè)計思路：（1）在設(shè)計頁面屬性時，采用跟整體網(wǎng)站風(fēng)格一致的灰藍色作為背景顏色。（2）頁面元素以文本為主，首先設(shè)置文本樣式，使用不同的顏色區(qū)分不同的文本。（3）采用列表制作淺藍色背景的水平導(dǎo)航條，使用裝飾圖片環(huán)繞在文本左側(cè)。（4）對于子頁面“外貿(mào)電子商務(wù)”和“外貿(mào)網(wǎng)站設(shè)計”，采用外部樣式表文件統(tǒng)一外觀。設(shè)計頁面背景時使用顏色來區(qū)分不同的模塊，在對文本進行美化時采用不同的字體、顏色及大小突出標(biāo)題，并使用圖像制作文本背景美化網(wǎng)頁。深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）4項目分析設(shè)計思路：深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計設(shè)計目標(biāo)網(wǎng)頁設(shè)計與制作實用教程（第3版）5深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室設(shè)計目標(biāo)網(wǎng)頁設(shè)計與制作實用教程（第3版）5深圳職業(yè)技術(shù)學(xué)院預(yù)備知識：認識CSS（1）CSS（CascadingStyleSheets），中文翻譯為層疊樣式表，是用戶控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言，它是由W3C于1996年12月推出。（2）CSS的主要功能就是定義元素的屬性值來控制元素的顯示效果。其中包括定義元素的大小、邊框、背景、定位等，通過對這些屬性設(shè)置值來形成一個樣式，然后再將樣式應(yīng)用于文檔中同一類型的元素，使網(wǎng)頁結(jié)構(gòu)內(nèi)容和表現(xiàn)形式相分離。深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）6預(yù)備知識：認識CSS（1）CSS（CascadingSty預(yù)備知識：CSS的語法規(guī)則

CSS選擇器的類型：（1）標(biāo)簽選擇器h1{}（2）類選擇器.textfooter{}（3）ID選擇器

#table1{}（4）復(fù)合內(nèi)容選擇器

#table1a{}深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）7預(yù)備知識：CSS的語法規(guī)則

CSS選擇器的類型：深圳職業(yè)技術(shù)預(yù)備知識：CSS的使用方式（1）內(nèi)聯(lián)樣式:直接對HTML標(biāo)簽使用style屬性，然后將代碼直接寫在其中。<pstyle=”color:red”>慧衡科技</p>（2）嵌入式樣式表：

嵌入式樣式表使用<style></style>標(biāo)簽將樣式嵌入到HTML文件的頭部中。（3）外部樣式表：

外部樣式表是指將CSS寫成一個文件，在HTML文件的頭部中通過使用<link>標(biāo)簽將樣式表文件鏈接到此頁面中。深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）8預(yù)備知識：CSS的使用方式（1）內(nèi)聯(lián)樣式:直接對HTML標(biāo)制作流程網(wǎng)頁設(shè)計與制作實用教程（第3版）深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室9任務(wù)1：設(shè)置網(wǎng)頁的頁面屬性任務(wù)4：利用CSS設(shè)置超鏈接樣式任務(wù)3：利用CSS實現(xiàn)圖文混排任務(wù)2：利用CSS美化文本任務(wù)5：制作水平導(dǎo)航條任務(wù)6：創(chuàng)建外部樣式表文件制作流程網(wǎng)頁設(shè)計與制作實用教程（第3版）深圳職業(yè)技術(shù)學(xué)院計任務(wù)1——設(shè)置網(wǎng)頁的頁面屬性網(wǎng)頁設(shè)計與制作實用教程（第3版）深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室101重新定義HTML標(biāo)簽body2查看body標(biāo)簽的CSS代碼任務(wù)1——設(shè)置網(wǎng)頁的頁面屬性網(wǎng)頁設(shè)計與制作實用教程（第3版STEP1：重新定義HTML標(biāo)簽body深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）11打開“CSS樣式”面板，新建CSS規(guī)則。重新定義body標(biāo)簽的屬性值。（1）設(shè)置body的背景屬性，在“Background-color”文本框中輸入“#65768A”。（2）設(shè)置body的文本樣式，在“Font-size”文本框中輸入“12px”。（3）設(shè)置body的方框樣式，在“Margin”區(qū)域中，不勾選“全部相同”，在“Top”文本框中輸入“0”。STEP1：重新定義HTML標(biāo)簽body深圳職業(yè)技術(shù)學(xué)院計STEP2：查看body標(biāo)簽的CSS代碼深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）12在代碼視圖下查看CSS代碼。STEP2：查看body標(biāo)簽的CSS代碼深圳職業(yè)技術(shù)學(xué)院計任務(wù)2——利用CSS美化文本網(wǎng)頁設(shè)計與制作實用教程（第3版）深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室131重新定義HTML標(biāo)簽h1，h2，p2新建類樣式“.copyright”、“.alignRight”任務(wù)2——利用CSS美化文本網(wǎng)頁設(shè)計與制作實用教程（第3版STEP1：重新定義HTML標(biāo)簽h1，h2，p深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）14重新定義HTML標(biāo)簽h1的屬性值：重新定義HTML標(biāo)簽h2的樣式： h2{font-family:"宋體";font-size:14px;color:#C7D9ED;}重新定義HTML標(biāo)簽p的樣式： p{line-height:150%;color:#000;width:1000px;}STEP1：重新定義HTML標(biāo)簽h1，h2，p深圳職業(yè)技術(shù)學(xué)STEP2：新建類樣式“.copyright”、“.alignRight”深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）15新建類樣式“.copyright”，設(shè)置屬性值。為頁腳文本應(yīng)用類樣式“.copyright”。創(chuàng)建類樣式“.alignRight”，并應(yīng)用到頁面中所有的“詳細了解”文本所在的段落，屬性值如下：

.alignRight{text-align:right;}STEP2：新建類樣式“.copyright”、“.alig任務(wù)3——利用CSS實現(xiàn)圖文混排網(wǎng)頁設(shè)計與制作實用教程（第3版）深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室161新建類樣式“.imgIm”2將“.imgIm”樣式應(yīng)用到頁面中的“IMservice”圖像任務(wù)3——利用CSS實現(xiàn)圖文混排網(wǎng)頁設(shè)計與制作實用教程（第任務(wù)4——利用CSS設(shè)置超鏈接樣式深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）171重新定義HTML標(biāo)簽a2設(shè)置鏈接的4種狀態(tài)樣式任務(wù)4——利用CSS設(shè)置超鏈接樣式深圳職業(yè)技術(shù)學(xué)院計算機STEP1：重新定義HTML標(biāo)簽a深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）18重新定義HTML標(biāo)簽a，設(shè)置鏈接文本的字體格式及取消下劃線。a{ font-family:"黑體"; font-size:14px; text-decoration:none;}STEP1：重新定義HTML標(biāo)簽a深圳職業(yè)技術(shù)學(xué)院計算機基STEP2：設(shè)置鏈接的4種狀態(tài)樣式設(shè)置a:link的樣式。設(shè)置a:visited的樣式。設(shè)置a:hover的樣式。設(shè)置a:active的樣式。深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）19STEP2：設(shè)置鏈接的4種狀態(tài)樣式設(shè)置a:link的樣式。深任務(wù)5——美化列表與制作水平導(dǎo)航條深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）201將鏈接文本轉(zhuǎn)換成列表2為項目列表創(chuàng)建ID樣式3設(shè)置列表項水平顯示4設(shè)置列表項中的鏈接樣式任務(wù)5——美化列表與制作水平導(dǎo)航條深圳職業(yè)技術(shù)學(xué)院計算機STEP1：將鏈接文本轉(zhuǎn)換成列表深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）21將鏈接文本轉(zhuǎn)換成列表。STEP1：將鏈接文本轉(zhuǎn)換成列表深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)STEP2：為項目列表創(chuàng)建ID樣式為項目列表創(chuàng)建ID樣式#nav,設(shè)置項目列表背景。深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）22#nav{ background-image:url(../images/bg_navigation.jpg); background-repeat:no-repeat; background-position:lefttop; margin:0px; height:35px; width:1000px; padding-top:12px;}STEP2：為項目列表創(chuàng)建ID樣式為項目列表創(chuàng)建ID樣式#nSTEP3：設(shè)置列表項水平顯示設(shè)置列表項水平顯示及列表項之間的間隔。深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）23#navli{ display:inline; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:15px; padding-top:0px; padding-right:20px; padding-bottom:0px; padding-left:20px; list-style-type:none;}STEP3：設(shè)置列表項水平顯示設(shè)置列表項水平顯示及列表項之間STEP4：設(shè)置列表項中的鏈接樣式設(shè)置列表項中的鏈接樣式，其屬性值如下：#navlia{ font-family:"黑體"; font-size:16px; text-decoration:none;}深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）24STEP4：設(shè)置列表項中的鏈接樣式設(shè)置列表項中的鏈接樣式，其任務(wù)6——利用外部樣式表美化

service_ec.html、service_wd.html文件深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）251創(chuàng)建樣式表文件service.css2鏈接外部樣式表文件3利用CSS設(shè)置背景圖像任務(wù)6——利用外部樣式表美化

service_ec.STEP1：創(chuàng)建樣式表文件service.css重新定義HTML標(biāo)簽body的屬性值。重新定義HTML標(biāo)簽li的屬性值，將樣式保存到“service.css”文件中。從素材文件拷貝其他樣式到“service.css”文件中。為頁面中的元素應(yīng)用類樣式。深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）26STEP1：創(chuàng)建樣式表文件service.css重新定義HTSTEP2：鏈接外部樣式表文件將“service.css”文件中的樣式應(yīng)用于“service_wd”文檔中。深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）27STEP2：鏈接外部樣式表文件將“service.css”STEP3：利用CSS設(shè)置背景圖像在“service_ec”文件中新建類樣式“.textCon”，設(shè)置屬性值。在“service_wd”文件中新建類樣式“.textCon”，為所在段落設(shè)置背景圖像。深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）28STEP3：利用CSS設(shè)置背景圖像在“service_ec”項目總結(jié)計算機工程學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）項目總結(jié)計算機工程學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教課后練習(xí)配套實訓(xùn)

利用配套實訓(xùn)文件夾下提供的素材文件，根據(jù)所學(xué)的CSS知識，自主設(shè)計與制作一個“CSSZengarden”的網(wǎng)頁。要求如下：打開“cssZengarden(素材).html”文件，另存為“cssZengarden.html”文件。使用CSS設(shè)置頁面屬性，美化文本、圖像、鏈接及列表項。同步測試

通過教材第6章“同步測試”檢驗自己是否掌握了本章的相關(guān)知識點與技能點。網(wǎng)頁設(shè)計與制作實用教程（第3版）計算機工程學(xué)院計算機基礎(chǔ)教研室課后練習(xí)配套實訓(xùn)

利用配套實訓(xùn)文件夾下提供的素材文件，根據(jù)所第6章利用CSS樣式美化網(wǎng)頁

——制作“服務(wù)”頁面計算機工程學(xué)院計算機基礎(chǔ)教學(xué)部第6章利用CSS樣式美化網(wǎng)頁

——制作“服務(wù)”頁面計算機工學(xué)習(xí)目標(biāo)掌握創(chuàng)建樣式及應(yīng)用樣式的方法了解CSS選擇器的4種類型的區(qū)別了解CSS常用屬性值的設(shè)置了解利用CSS控制網(wǎng)頁的3種方法掌握利用外部樣式表文件統(tǒng)一網(wǎng)站風(fēng)格的方法了解利用CSS美化網(wǎng)頁的流程深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）32學(xué)習(xí)目標(biāo)掌握創(chuàng)建樣式及應(yīng)用樣式的方法深圳職業(yè)技術(shù)學(xué)院計算機實訓(xùn)項目網(wǎng)頁設(shè)計師小高圍繞“慧衡科技專業(yè)服務(wù)”這一主題，已經(jīng)制作好了網(wǎng)頁內(nèi)容，現(xiàn)需要對其進行美化。深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）33實訓(xùn)項目網(wǎng)頁設(shè)計師小高圍繞“慧衡科技專業(yè)服務(wù)”這一主題，已經(jīng)項目分析設(shè)計思路：（1）在設(shè)計頁面屬性時，采用跟整體網(wǎng)站風(fēng)格一致的灰藍色作為背景顏色。（2）頁面元素以文本為主，首先設(shè)置文本樣式，使用不同的顏色區(qū)分不同的文本。（3）采用列表制作淺藍色背景的水平導(dǎo)航條，使用裝飾圖片環(huán)繞在文本左側(cè)。（4）對于子頁面“外貿(mào)電子商務(wù)”和“外貿(mào)網(wǎng)站設(shè)計”，采用外部樣式表文件統(tǒng)一外觀。設(shè)計頁面背景時使用顏色來區(qū)分不同的模塊，在對文本進行美化時采用不同的字體、顏色及大小突出標(biāo)題，并使用圖像制作文本背景美化網(wǎng)頁。深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）34項目分析設(shè)計思路：深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計設(shè)計目標(biāo)網(wǎng)頁設(shè)計與制作實用教程（第3版）35深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室設(shè)計目標(biāo)網(wǎng)頁設(shè)計與制作實用教程（第3版）5深圳職業(yè)技術(shù)學(xué)院預(yù)備知識：認識CSS（1）CSS（CascadingStyleSheets），中文翻譯為層疊樣式表，是用戶控制網(wǎng)頁樣式并允許將樣式信息與網(wǎng)頁內(nèi)容分離的一種標(biāo)記性語言，它是由W3C于1996年12月推出。（2）CSS的主要功能就是定義元素的屬性值來控制元素的顯示效果。其中包括定義元素的大小、邊框、背景、定位等，通過對這些屬性設(shè)置值來形成一個樣式，然后再將樣式應(yīng)用于文檔中同一類型的元素，使網(wǎng)頁結(jié)構(gòu)內(nèi)容和表現(xiàn)形式相分離。深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）36預(yù)備知識：認識CSS（1）CSS（CascadingSty預(yù)備知識：CSS的語法規(guī)則

CSS選擇器的類型：（1）標(biāo)簽選擇器h1{}（2）類選擇器.textfooter{}（3）ID選擇器

#table1{}（4）復(fù)合內(nèi)容選擇器

#table1a{}深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）37預(yù)備知識：CSS的語法規(guī)則

CSS選擇器的類型：深圳職業(yè)技術(shù)預(yù)備知識：CSS的使用方式（1）內(nèi)聯(lián)樣式:直接對HTML標(biāo)簽使用style屬性，然后將代碼直接寫在其中。<pstyle=”color:red”>慧衡科技</p>（2）嵌入式樣式表：

嵌入式樣式表使用<style></style>標(biāo)簽將樣式嵌入到HTML文件的頭部中。（3）外部樣式表：

外部樣式表是指將CSS寫成一個文件，在HTML文件的頭部中通過使用<link>標(biāo)簽將樣式表文件鏈接到此頁面中。深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）38預(yù)備知識：CSS的使用方式（1）內(nèi)聯(lián)樣式:直接對HTML標(biāo)制作流程網(wǎng)頁設(shè)計與制作實用教程（第3版）深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室39任務(wù)1：設(shè)置網(wǎng)頁的頁面屬性任務(wù)4：利用CSS設(shè)置超鏈接樣式任務(wù)3：利用CSS實現(xiàn)圖文混排任務(wù)2：利用CSS美化文本任務(wù)5：制作水平導(dǎo)航條任務(wù)6：創(chuàng)建外部樣式表文件制作流程網(wǎng)頁設(shè)計與制作實用教程（第3版）深圳職業(yè)技術(shù)學(xué)院計任務(wù)1——設(shè)置網(wǎng)頁的頁面屬性網(wǎng)頁設(shè)計與制作實用教程（第3版）深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室401重新定義HTML標(biāo)簽body2查看body標(biāo)簽的CSS代碼任務(wù)1——設(shè)置網(wǎng)頁的頁面屬性網(wǎng)頁設(shè)計與制作實用教程（第3版STEP1：重新定義HTML標(biāo)簽body深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）41打開“CSS樣式”面板，新建CSS規(guī)則。重新定義body標(biāo)簽的屬性值。（1）設(shè)置body的背景屬性，在“Background-color”文本框中輸入“#65768A”。（2）設(shè)置body的文本樣式，在“Font-size”文本框中輸入“12px”。（3）設(shè)置body的方框樣式，在“Margin”區(qū)域中，不勾選“全部相同”，在“Top”文本框中輸入“0”。STEP1：重新定義HTML標(biāo)簽body深圳職業(yè)技術(shù)學(xué)院計STEP2：查看body標(biāo)簽的CSS代碼深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）42在代碼視圖下查看CSS代碼。STEP2：查看body標(biāo)簽的CSS代碼深圳職業(yè)技術(shù)學(xué)院計任務(wù)2——利用CSS美化文本網(wǎng)頁設(shè)計與制作實用教程（第3版）深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室431重新定義HTML標(biāo)簽h1，h2，p2新建類樣式“.copyright”、“.alignRight”任務(wù)2——利用CSS美化文本網(wǎng)頁設(shè)計與制作實用教程（第3版STEP1：重新定義HTML標(biāo)簽h1，h2，p深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）44重新定義HTML標(biāo)簽h1的屬性值：重新定義HTML標(biāo)簽h2的樣式： h2{font-family:"宋體";font-size:14px;color:#C7D9ED;}重新定義HTML標(biāo)簽p的樣式： p{line-height:150%;color:#000;width:1000px;}STEP1：重新定義HTML標(biāo)簽h1，h2，p深圳職業(yè)技術(shù)學(xué)STEP2：新建類樣式“.copyright”、“.alignRight”深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）45新建類樣式“.copyright”，設(shè)置屬性值。為頁腳文本應(yīng)用類樣式“.copyright”。創(chuàng)建類樣式“.alignRight”，并應(yīng)用到頁面中所有的“詳細了解”文本所在的段落，屬性值如下：

.alignRight{text-align:right;}STEP2：新建類樣式“.copyright”、“.alig任務(wù)3——利用CSS實現(xiàn)圖文混排網(wǎng)頁設(shè)計與制作實用教程（第3版）深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室461新建類樣式“.imgIm”2將“.imgIm”樣式應(yīng)用到頁面中的“IMservice”圖像任務(wù)3——利用CSS實現(xiàn)圖文混排網(wǎng)頁設(shè)計與制作實用教程（第任務(wù)4——利用CSS設(shè)置超鏈接樣式深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）471重新定義HTML標(biāo)簽a2設(shè)置鏈接的4種狀態(tài)樣式任務(wù)4——利用CSS設(shè)置超鏈接樣式深圳職業(yè)技術(shù)學(xué)院計算機STEP1：重新定義HTML標(biāo)簽a深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）48重新定義HTML標(biāo)簽a，設(shè)置鏈接文本的字體格式及取消下劃線。a{ font-family:"黑體"; font-size:14px; text-decoration:none;}STEP1：重新定義HTML標(biāo)簽a深圳職業(yè)技術(shù)學(xué)院計算機基STEP2：設(shè)置鏈接的4種狀態(tài)樣式設(shè)置a:link的樣式。設(shè)置a:visited的樣式。設(shè)置a:hover的樣式。設(shè)置a:active的樣式。深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）49STEP2：設(shè)置鏈接的4種狀態(tài)樣式設(shè)置a:link的樣式。深任務(wù)5——美化列表與制作水平導(dǎo)航條深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）501將鏈接文本轉(zhuǎn)換成列表2為項目列表創(chuàng)建ID樣式3設(shè)置列表項水平顯示4設(shè)置列表項中的鏈接樣式任務(wù)5——美化列表與制作水平導(dǎo)航條深圳職業(yè)技術(shù)學(xué)院計算機STEP1：將鏈接文本轉(zhuǎn)換成列表深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）51將鏈接文本轉(zhuǎn)換成列表。STEP1：將鏈接文本轉(zhuǎn)換成列表深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)STEP2：為項目列表創(chuàng)建ID樣式為項目列表創(chuàng)建ID樣式#nav,設(shè)置項目列表背景。深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）52#nav{ background-image:url(../images/bg_navigation.jpg); background-repeat:no-repeat; background-position:lefttop; margin:0px; height:35px; width:1000px; padding-top:12px;}STEP2：為項目列表創(chuàng)建ID樣式為項目列表創(chuàng)建ID樣式#nSTEP3：設(shè)置列表項水平顯示設(shè)置列表項水平顯示及列表項之間的間隔。深圳職業(yè)技術(shù)學(xué)院計算機基礎(chǔ)教研室網(wǎng)頁設(shè)計與制作實用教程（第3版）53#navli{ display:inline; margin-top:0px; margin-right:0px; margin-bottom:0px; margin-left:15px; padding-top:0px; padding-right:20px; padding-bottom:0px; padding-left:20px; list-style-type:none;}STEP3：設(shè)置列表項水平顯示設(shè)置列表項水平顯示及列表項之間STEP4：設(shè)置列表項中的鏈接樣式設(shè)置列表項中的鏈接樣式，其屬性值如下：#navlia{ font-family:"黑體"; font-size:16px; text