項(xiàng)目三使用CSS樣式美化網(wǎng)頁解析課件.ppt

《項(xiàng)目三使用CSS樣式美化網(wǎng)頁解析課件.ppt》由會員上傳分享，免費(fèi)在線閱讀，更多相關(guān)內(nèi)容在教育資源-天天文庫。

1、項(xiàng)目三使用CSS樣式美化網(wǎng)頁網(wǎng)頁設(shè)計(jì)與制作1CSS的基本概念2CSS的語法規(guī)則3CSS選擇器的使用學(xué)習(xí)內(nèi)容4CSS常用屬性及式學(xué)習(xí)目標(biāo)知識目標(biāo)：了解CSS的意義；掌握CSS樣式的添加、刪除和修改方法；掌握各類CSS樣式的創(chuàng)建方法；掌握各類CSS樣式的應(yīng)用方法。。技能目標(biāo)：通過任務(wù)的分析講解與鞏固練習(xí)，使學(xué)生能熟練掌握css的定義及應(yīng)用方法，能根據(jù)頁面設(shè)計(jì)的需要合理地利用CSS樣式實(shí)現(xiàn)頁面的美化。素質(zhì)目標(biāo)：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è)計(jì)創(chuàng)意思維、藝術(shù)設(shè)計(jì)素質(zhì)。單元三：使用CSS樣式美化頁面設(shè)置如圖所示的網(wǎng)頁效果圖任務(wù)描述:任務(wù)分析1.頁面的結(jié)構(gòu)分析單元三：使用CSS樣式美化頁面任務(wù)分析單元三：使用CSS樣式美化頁面要完成該頁面的美化任務(wù)，必須使用CSS樣式，對于CSS樣式的設(shè)置，需要考慮以下問題：1.什么是CSS樣式？2.如何定義CSS樣式？3.如何在網(wǎng)頁中使用CSS樣式？任務(wù)分析2.CSS樣式設(shè)計(jì)分析單元三：使用CSS樣式美化頁面技術(shù)要點(diǎn)一.什么是CSS？二.CSS選擇器的分類三.各類CSS選擇器的定義與應(yīng)用方法四.各類CSS選擇器的應(yīng)用區(qū)別及優(yōu)先順序單元三：使用CSS樣式美化

3、頁面知識點(diǎn)：CSS簡介單元三：使用CSS樣式美化頁面一組樣式可以被調(diào)用在多個(gè)對象上。只要定義一組樣式后，就可以隨心所欲地被調(diào)用在任一段。語法易學(xué)易懂。簡化了網(wǎng)頁的格式代碼，外部的樣式表還會被瀏覽器保存在緩存里，加快了下載顯示的速度，也減少了需要上傳的代碼數(shù)量（因?yàn)橹貜?fù)設(shè)置的格式將被只保存一次）。1.什么是CSS樣式？知識點(diǎn)：CSS簡介單元三：使用CSS樣式美化頁面張飛{身高:185cm;體重:105kg;性別:男;性格:暴躁;民族:漢族;}對于“張飛”這個(gè)對象的描述實(shí)際由3個(gè)要素組成的，即姓名、屬性和屬性值。h2{font-family:宋體;font-size:15px;

4、color:red;text-decoration:underline;}轉(zhuǎn)換成網(wǎng)頁代碼的形式知識點(diǎn)：CSS簡介單元三：使用CSS樣式美化頁面1.什么是CSS樣式？CSS的思想就是首先指定對什么“對象”進(jìn)行設(shè)置，然后指定對該對象的哪個(gè)方面的“屬性”進(jìn)行設(shè)置，最后給出該設(shè)置的“值”。因此，概括來說，CSS就是由3個(gè)基本部分——“對象”、“屬性”和“值”組成的。知識點(diǎn)：CSS選擇器單元三：使用CSS樣式美化頁面2.CSS選擇器在CSS的3個(gè)組成部分中，“對象”是很重要的，它指定了對哪些網(wǎng)頁元素進(jìn)行設(shè)置，因此，它有一個(gè)專門的名稱——選擇器（selector）?；靖袷竭x擇器{屬性

5、1：屬性值1；屬性2：屬性值2；……}CSS語法由三部分構(gòu)成：選擇器、樣式屬性和值。知識點(diǎn)：CSS選擇器單元三：使用CSS樣式美化頁面類（可應(yīng)用于任何HTML標(biāo)簽），也稱自定義樣式。標(biāo)簽（重新定義特定標(biāo)簽的外觀），也稱HTML標(biāo)簽樣式?？梢詫⒃O(shè)置的樣式屬性自動(dòng)對應(yīng)所選的標(biāo)簽名稱。ID選擇器（僅應(yīng)用于一個(gè)HTML標(biāo)簽）。復(fù)合選擇器，可以創(chuàng)建對某一具體的標(biāo)簽組合或者含有特定ID屬性的標(biāo)簽、以及超級鏈接應(yīng)用樣式。1.各類不同的CSS選擇器在使用時(shí)有何區(qū)別？2.在實(shí)際應(yīng)用中，該如何合理地選擇？CSS選擇器的類別知識點(diǎn)：CSS選擇器單元三：使用CSS樣式美化頁面格式：HTML標(biāo)簽記名

6、{屬性1：屬性值1；屬性2：屬性值2；……}作用：相當(dāng)于重定義HTML標(biāo)記，在保留該標(biāo)記原有功能的同時(shí)新增在CSS規(guī)則中定義的功能。應(yīng)用方法：自動(dòng)應(yīng)用到網(wǎng)頁中所有使用了該標(biāo)記的元素上。使用場合：如果網(wǎng)頁中所有同類的對象要使用同一種樣式，則通過創(chuàng)建“重定義標(biāo)簽”的方式來設(shè)計(jì)樣式標(biāo)簽選擇器知識點(diǎn)：CSS選擇器單元三：使用CSS樣式美化頁面格式：.類名{屬性1：屬性值1；屬性2：屬性值2；……}類選擇器

7、作用：可以將定義的類樣式應(yīng)用于任何對象。。應(yīng)用方法：不能自動(dòng)應(yīng)用，必須由設(shè)計(jì)者選擇在何種對象上使用。引用格式：使用場合：如果同樣的格式，要分別在不同的對象上應(yīng)用，或者在某一同類對象的局部使用，則通過創(chuàng)建“類”的方法來分別創(chuàng)建不同的樣式，并有選擇性地在相關(guān)對象上加以應(yīng)用。知識點(diǎn)：CSS選擇器單元三：使用CSS樣式美化頁面格式：#ID名{屬性1：屬性值1；屬性2：屬性值2；……}用法基本與類選擇器相同，但是，ID樣式只能在一個(gè)對象上使用，其基本作用是對每一個(gè)頁面中唯一的元素進(jìn)行定義。引用