第3章-CSS3入門(mén)-教學(xué)設(shè)計(jì)

博學(xué)谷——讓IT教學(xué)更簡(jiǎn)單，讓IT學(xué)習(xí)更有效PAGE12PAGE10《HTML5+CSS3網(wǎng)站設(shè)計(jì)基礎(chǔ)教程》教學(xué)設(shè)計(jì)課程名稱(chēng)：HTML5+CSS3網(wǎng)站設(shè)計(jì)基礎(chǔ)教程授課年級(jí)：20XX年級(jí)授課學(xué)期：20XX學(xué)年第X學(xué)期教師姓名：XX老師20XX年XX月XX日課題名稱(chēng)第3章CSS3入門(mén)計(jì)劃課時(shí)8課時(shí)內(nèi)容分析隨著網(wǎng)頁(yè)制作技術(shù)的不斷發(fā)展，陳舊的CSS特性和標(biāo)準(zhǔn)已經(jīng)無(wú)法滿(mǎn)足現(xiàn)今的交互設(shè)計(jì)需求，開(kāi)發(fā)者往往需要更多的字體選擇、更方便的樣式效果、更絢麗的圖形動(dòng)畫(huà)。CSS3的出現(xiàn)，在不需要改變?cè)性O(shè)計(jì)結(jié)構(gòu)的情況下，增加了許多新特性，極大地滿(mǎn)足了開(kāi)發(fā)者的需求。本章將對(duì)CSS3的發(fā)展史、瀏覽器的支持情況以及相關(guān)文本樣式屬性進(jìn)行詳細(xì)講解。教學(xué)目標(biāo)了解CSS3的發(fā)展歷史以及主流瀏覽器的支持情況。掌握CSS基礎(chǔ)選擇器，能夠運(yùn)用CSS選擇器定義標(biāo)記樣式。熟悉CSS文本樣式屬性，能夠運(yùn)用相應(yīng)的屬性定義文本樣式。理解CSS優(yōu)先級(jí)，能夠區(qū)分復(fù)合選擇器權(quán)重的大小。重點(diǎn)及措施教學(xué)重點(diǎn)：CSS核心基礎(chǔ)、文本樣式屬性、CSS層疊性與繼承性、CSS優(yōu)先級(jí)。措施：通過(guò)上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。難點(diǎn)及措施教學(xué)難點(diǎn)：CSS層疊性與繼承性、CSS優(yōu)先級(jí)。措施：通過(guò)上機(jī)操作加強(qiáng)學(xué)習(xí)和補(bǔ)充案例進(jìn)行鞏固。教學(xué)方式教學(xué)采用教師課堂講授為主，使用教學(xué)PPT講解。教學(xué)過(guò)程第一課時(shí)（講解CSS概述、CSS3發(fā)展歷史、CSS3瀏覽器支持情況）復(fù)習(xí)上節(jié)課內(nèi)容在講解本節(jié)內(nèi)容前，拋出以下問(wèn)題讓學(xué)生回答，以復(fù)習(xí)第二章“HTML5頁(yè)面元素及屬性”的相關(guān)知識(shí)。通過(guò)上一章的學(xué)習(xí)，我們知道：HTML5文檔的基本格式中，有一個(gè)重要的標(biāo)記——<!DOCTYPE>標(biāo)記。請(qǐng)簡(jiǎn)要描述什么HTML5中的“<!DOCTYPE>聲明”及其用法？答案：<!DOCTYPE>標(biāo)記標(biāo)記位于文檔的最前面，用于向?yàn)g覽器說(shuō)明當(dāng)前文檔使用哪種HTML或XHTML標(biāo)準(zhǔn)規(guī)范，HTML5文檔中的DOCTYPE聲明非常簡(jiǎn)單，代碼如下：<!doctypehtml><!doctypehtml>只有在開(kāi)頭處使用<!DOCTYPE>聲明，瀏覽器才能將該網(wǎng)頁(yè)作為有效的HTML文檔，并按指定的文檔類(lèi)型進(jìn)行解析。使用HTML5的DOCTYPE聲明，會(huì)觸發(fā)瀏覽器以標(biāo)準(zhǔn)兼容模式來(lái)顯示頁(yè)面。說(shuō)明：教師可根據(jù)學(xué)生對(duì)上述問(wèn)題的回答情況，對(duì)以上問(wèn)題進(jìn)行簡(jiǎn)單講解或直接進(jìn)入本課時(shí)新內(nèi)容的學(xué)習(xí)。本課時(shí)內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：在網(wǎng)頁(yè)設(shè)計(jì)中，運(yùn)用CSS3技術(shù)能夠讓原有的網(wǎng)站變得趣味盎然，很多站點(diǎn)都為自己的頁(yè)面添加了各種炫酷的CSS3效果。但是CSS3技術(shù)是怎樣發(fā)展起來(lái)的？哪些瀏覽器能夠很好的兼容CSS3呢？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋?zhuān)篊SS基礎(chǔ)選擇器主要包括四種，具體如下：20世紀(jì)90年代初，HTML語(yǔ)言的誕生，各種形式的樣式表也隨之出現(xiàn)。1994年哈坤·利提出了CSS的最初建議，CSS發(fā)展至今出現(xiàn)了4個(gè)版本，對(duì)它們的具體介紹如下：（1）CSS11996年12月W3C發(fā)布了第一個(gè)有關(guān)樣式的標(biāo)準(zhǔn)CSS1。這個(gè)版本中，已經(jīng)包含了font的相關(guān)屬性、顏色與背景的相關(guān)屬性、文字的相關(guān)屬性、box的相關(guān)屬性等。（2）CSS21985年5月，CSS2正式推出，這個(gè)版本開(kāi)始使用樣式表結(jié)構(gòu)，該版本也是目前正在使用的版本。（3）CSS2.12004年2月，CSS2.1正式推出。它在CSS2的基礎(chǔ)上略微做了改動(dòng)，刪除了許多不被瀏覽器支持的屬性。（4）CSS3早在2001年，W3C就著手開(kāi)始準(zhǔn)備開(kāi)發(fā)CSS第三版規(guī)范。雖然完整的、規(guī)范權(quán)威的CSS3標(biāo)準(zhǔn)還沒(méi)有塵埃落定。但是各主流瀏覽器已經(jīng)開(kāi)始支持其中的絕大部分特性。CSS3給我們帶來(lái)了眾多全新的設(shè)計(jì)體驗(yàn)，但是并不是所有的瀏覽器都完全支持它。其中，谷歌（Chrome）和Safari瀏覽器對(duì)從CSS3的支持較好。知識(shí)點(diǎn)講解講解“CSS概述”（1）、教師展示PPT對(duì)“CSS概念及作用”進(jìn)行講解，并打開(kāi)網(wǎng)頁(yè)進(jìn)行效果展示。（2）、教師講解CSS在HTML5中的書(shū)寫(xiě)位置，并使用代碼進(jìn)行演示。（3）、教師展示PPT，對(duì)初學(xué)者在書(shū)寫(xiě)CSS樣式時(shí)需要注意的問(wèn)題進(jìn)行講解。（4）、教師讓學(xué)生自行嘗試，理解“CSS樣式規(guī)則”的語(yǔ)法，并能靈活運(yùn)用。（5）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。講解“CSS3發(fā)展歷史”（1）、教師展示PPT對(duì)“CSS3發(fā)展歷史”進(jìn)行說(shuō)明，并對(duì)比各個(gè)版本間的區(qū)別與聯(lián)系。（2）、教師展示PPT對(duì)“CSS3發(fā)展歷史”進(jìn)行講解并通過(guò)代碼進(jìn)行演示。（3）、學(xué)生自主提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。講解“CSS3瀏覽器支持情況”（1）、教師和學(xué)生互動(dòng)：瀏覽器是網(wǎng)頁(yè)運(yùn)行的平臺(tái)，目前常用的瀏覽器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等，但是并不是所有的瀏覽器都完全支持CSS3。（2）、教師分別對(duì)各個(gè)瀏覽器對(duì)CSS3的支持情況進(jìn)行分析，并總結(jié)出谷歌（Chrome）瀏覽器對(duì)CSS3的支持最好。（3）、教師指出由于各瀏覽器廠商對(duì)CSS3各屬性的支持程度不一樣，因此在標(biāo)準(zhǔn)尚未明確的情況下，會(huì)用廠商的前綴加以區(qū)分，各主流瀏覽器都定義了自己的私有屬性。內(nèi)核類(lèi)型相關(guān)瀏覽器私有前綴TridentIE8/IE9/IE10-msWebkit谷歌（Chrome）/Safari-webkitGecko火狐（Firefox）-mozBlinkOpera-o（4）、教師對(duì)各個(gè)瀏覽器的私有屬性進(jìn)行講解，并通過(guò)代碼進(jìn)行演示。（5）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。階段小結(jié)小結(jié)重點(diǎn)：CSS3瀏覽器支持情況。易錯(cuò)點(diǎn)：注意區(qū)分各個(gè)瀏覽器在CSS3中的私有前綴。答疑教師詢(xún)問(wèn)學(xué)生對(duì)于知識(shí)點(diǎn)還有什么不理解的地方。針對(duì)學(xué)生不理解的知識(shí)點(diǎn)給與解釋。鞏固練習(xí)鞏固本課時(shí)知識(shí)點(diǎn)學(xué)完知識(shí)點(diǎn)后，教師帶領(lǐng)學(xué)生對(duì)本課時(shí)所學(xué)知識(shí)點(diǎn)進(jìn)行回顧。以此使學(xué)生更熟練地了解“CSS概述、CSS3發(fā)展歷史、CSS3瀏覽器支持情況”等知識(shí)點(diǎn)。通過(guò)“補(bǔ)充案例”加強(qiáng)學(xué)習(xí)教師分發(fā)測(cè)試題目及案例素材給學(xué)生，對(duì)于掌握較好的同學(xué)，可以通過(guò)補(bǔ)充案例對(duì)相關(guān)知識(shí)點(diǎn)進(jìn)行鞏固。第二課時(shí)（講解CSS樣式規(guī)則、引入CSS樣式表、CSS基礎(chǔ)選擇器）復(fù)習(xí)上節(jié)課內(nèi)容瀏覽網(wǎng)頁(yè)的時(shí)候，我們可以看見(jiàn)很多炫麗的CSS3效果，CSS3給我們帶來(lái)了眾多全新的視覺(jué)感受和用戶(hù)體驗(yàn)，但是并不是所有的瀏覽器都完全支持它，所以使用CSS3時(shí)需要添加私有前綴。那么，常見(jiàn)的瀏覽器內(nèi)核類(lèi)型和私有前綴都有哪些呢？答案：內(nèi)核類(lèi)型相關(guān)瀏覽器私有前綴TridentIE8/IE9/IE10-msWebkit谷歌（Chrome）/Safari-webkitGecko火狐（Firefox）-mozBlinkOpera-o說(shuō)明：教師可根據(jù)學(xué)生對(duì)上述問(wèn)題的回答情況，對(duì)以上問(wèn)題進(jìn)行簡(jiǎn)單講解或直接進(jìn)入本課時(shí)新內(nèi)容的學(xué)習(xí)。本課時(shí)內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：如果把一個(gè)網(wǎng)頁(yè)看成一個(gè)人的話(huà)，HTML5就相當(dāng)于人的骨架，是結(jié)構(gòu)；CSS相當(dāng)于人的衣服，是表現(xiàn)。那么如何使用CSS去修飾頁(yè)面呢？其實(shí)，給網(wǎng)頁(yè)應(yīng)用樣式首先需要使用CSS中的選擇器。那么，CSS基礎(chǔ)選擇器主要有哪些？又有哪些不同呢？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋?zhuān)篊SS基礎(chǔ)選擇器主要包括四種，具體如下：標(biāo)記選擇器。標(biāo)記選擇器是指用HTML標(biāo)記名稱(chēng)作為選擇器。用標(biāo)記選擇器定義的樣式對(duì)頁(yè)面中該類(lèi)型的所有標(biāo)記都有效。類(lèi)選擇器。類(lèi)選擇器使用“.”進(jìn)行標(biāo)識(shí)，后面緊跟類(lèi)名。其最大的優(yōu)勢(shì)是可以為元素對(duì)象定義單獨(dú)或相同的樣式。id選擇器。id選擇器使用“#”進(jìn)行標(biāo)識(shí)，后面緊跟id名。元素的id值是唯一的，只能對(duì)應(yīng)于文檔中某一個(gè)具體的元素。通配符選擇器。通配符選擇器用“*”號(hào)表示，它是所有選擇器中作用范圍最廣的，能匹配頁(yè)面中所有的元素。知識(shí)點(diǎn)講解講解“CSS樣式規(guī)則”（1）、教師展示PPT對(duì)“CSS樣式規(guī)則”的具體格式進(jìn)行講解，并使用代碼進(jìn)行演示。（2）、教師展示PPT，對(duì)初學(xué)者在書(shū)寫(xiě)CSS樣式時(shí)需要注意的問(wèn)題進(jìn)行講解。（3）、教師讓學(xué)生自行嘗試，理解“CSS樣式規(guī)則”的語(yǔ)法，并能靈活運(yùn)用。（4）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。講解“引入CSS樣式表”（1）、教師展示PPT對(duì)“HTML文檔中引入CSS樣式表”進(jìn)行說(shuō)明，并指出“引入CSS樣式表”的三種方式。（2）、教師分別對(duì)“行內(nèi)式”、“內(nèi)嵌式”及“鏈入式”引入CSS樣式表進(jìn)行講解并通過(guò)代碼進(jìn)行演示。（3）、教師指出“行內(nèi)式”、“內(nèi)嵌式”及“鏈入式”的基礎(chǔ)語(yǔ)法格式及其優(yōu)缺點(diǎn)。（4）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。講解“CSS基礎(chǔ)選擇器”（1）、教師展示PPT對(duì)“CSS選擇器”的概念及用法進(jìn)行講解。（2）、教師分別對(duì)“標(biāo)記選擇器”、“類(lèi)選擇器”、“id選擇器”及“通配符選擇器”的基本語(yǔ)法格式進(jìn)行詳細(xì)講解并通過(guò)代碼進(jìn)行演示。（3）、教師對(duì)比“標(biāo)記選擇器”、“類(lèi)選擇器”、“id選擇器”及“通配符選擇器”的使用方法及應(yīng)用效果，并指出其優(yōu)缺點(diǎn)。（4）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。階段小結(jié)小結(jié)重點(diǎn)：CSS樣式規(guī)則、引入CSS樣式表、CSS基礎(chǔ)選擇器。易錯(cuò)點(diǎn)：注意區(qū)分標(biāo)記選擇器、類(lèi)選擇器、id選擇器及通配符選擇器。答疑教師詢(xún)問(wèn)學(xué)生對(duì)于知識(shí)點(diǎn)還有什么不理解的地方。針對(duì)學(xué)生不理解的知識(shí)點(diǎn)給與解釋。鞏固練習(xí)鞏固本課時(shí)知識(shí)點(diǎn)學(xué)完知識(shí)點(diǎn)后，教師帶領(lǐng)學(xué)生對(duì)本課時(shí)所學(xué)知識(shí)點(diǎn)進(jìn)行回顧。以此使學(xué)生更熟練地掌握“CSS樣式規(guī)則、引入CSS樣式表、CSS基礎(chǔ)選擇器”等知識(shí)點(diǎn)。通過(guò)“補(bǔ)充案例”加強(qiáng)學(xué)習(xí)教師分發(fā)測(cè)試題目及案例素材給學(xué)生，對(duì)于掌握較好的同學(xué)，可以通過(guò)補(bǔ)充案例對(duì)相關(guān)知識(shí)點(diǎn)進(jìn)行鞏固。布置作業(yè)完成“補(bǔ)充案例”，通過(guò)平臺(tái)提交給教師，教師下節(jié)課進(jìn)行點(diǎn)評(píng)。預(yù)習(xí)3.3節(jié)【文本樣式屬性】。第三、四課時(shí)（講解CSS字體樣式屬性、CSS文本外觀屬性）說(shuō)明：將3.3節(jié)作為兩個(gè)課時(shí)進(jìn)行講解。復(fù)習(xí)上節(jié)課內(nèi)容在講解本節(jié)內(nèi)容前，拋出以下問(wèn)題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。1、通過(guò)上節(jié)課的學(xué)習(xí)，我們知道引入CSS樣式的方法有很多，例如：行內(nèi)式、內(nèi)嵌式以及鏈入式。那么，現(xiàn)在請(qǐng)同學(xué)們回顧下：什么是“內(nèi)嵌式CSS”，以及其使用方法？答案：內(nèi)嵌式是將CSS代碼集中寫(xiě)在HTML文檔的<head>頭部標(biāo)記中，并且用<style>標(biāo)記定義。<style>標(biāo)記一般位于<head>標(biāo)記中<title>標(biāo)記之后，也可以把它放在HTML文檔的任何地方。同時(shí)，必須設(shè)置type的屬性值為“text/css”，這樣瀏覽器才知道<style>標(biāo)記包含的是CSS代碼，因?yàn)?lt;style>標(biāo)記還可以包含其他代碼，如JavaScript代碼。說(shuō)明：教師可根據(jù)學(xué)生對(duì)上述問(wèn)題的回答情況，對(duì)以上問(wèn)題進(jìn)行簡(jiǎn)單講解或直接進(jìn)入本課時(shí)新內(nèi)容的學(xué)習(xí)。本課時(shí)內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：瀏覽網(wǎng)頁(yè)時(shí)，我們可以看到字號(hào)大小不同，字體顏色各異以及不同形態(tài)的字體效果。那么，CSS字體樣式中的哪些屬性可以設(shè)置網(wǎng)頁(yè)中的字體效果呢？請(qǐng)分別列舉。請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋?zhuān)篊SS字體樣式屬性主要包括：font-size:字號(hào)大??；font-family:字體；font-weight:字體粗細(xì)；font-variant:變體；font-style:字體風(fēng)格；font:綜合設(shè)置字體樣式；知識(shí)點(diǎn)講解講解“CSS字體樣式屬性”（1）、教師和學(xué)生互動(dòng)：瀏覽網(wǎng)頁(yè)的時(shí)候，我們經(jīng)?？吹揭恍┨厥獾淖煮w效果，比如：控制字體的字號(hào)、將字體進(jìn)行加粗，或者設(shè)置字體傾斜等。為了更方便的控制網(wǎng)頁(yè)中各種各樣的字體，CSS提供了一系列的字體樣式屬性。（2）、教師展示PPT對(duì)“網(wǎng)頁(yè)中常見(jiàn)的字體效果”進(jìn)行展示及說(shuō)明。（3）、教師分別對(duì)“font-size、font-family、font-weight、font-variant、font-style及font綜合設(shè)置屬性”進(jìn)行講解，并進(jìn)行代碼演示。（4）、教師分別對(duì)使用CSS設(shè)置字體樣式時(shí)需要注意的問(wèn)題進(jìn)行說(shuō)明。（5）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。講解“CSS文本外觀屬性”（1）、教師和學(xué)生互動(dòng)：使用CSS不僅可以設(shè)置一些特殊的字體效果，還可以設(shè)置一些段落文本的外觀顯示效果，比如：設(shè)置文本顏色、字間距、行間距、文本裝飾效果等。使用HTML只能進(jìn)行簡(jiǎn)單的控制，但是效果并不理想，為此CSS提供了一系列的文本外觀樣式屬性。（2）、教師展示PPT對(duì)“網(wǎng)頁(yè)中常見(jiàn)的文本外觀效果”進(jìn)行展示及說(shuō)明。（3）、教師分別對(duì)“color、letter-spacing、word-spacing、line-height、text-transform、text-decoration、text-align、text-indent、white-space”等文本外觀屬性進(jìn)行講解，并進(jìn)行代碼演示。（4）、教師分別對(duì)使用CSS設(shè)置文本外觀時(shí)需要注意的問(wèn)題進(jìn)行說(shuō)明。（5）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。階段小結(jié)小結(jié)重點(diǎn)：CSS字體樣式屬性、CSS文本外觀屬性。答疑教師詢(xún)問(wèn)學(xué)生對(duì)于知識(shí)點(diǎn)還有什么不理解的地方。針對(duì)學(xué)生不理解的知識(shí)點(diǎn)給與解釋。鞏固練習(xí)鞏固本課時(shí)知識(shí)點(diǎn)學(xué)完知識(shí)點(diǎn)后，教師帶領(lǐng)學(xué)生對(duì)本課時(shí)所學(xué)知識(shí)點(diǎn)進(jìn)行回顧。以此使學(xué)生更熟練地掌握如何使用CSS對(duì)網(wǎng)頁(yè)中的字體樣式及文本外觀進(jìn)行設(shè)置。通過(guò)“補(bǔ)充案例”加強(qiáng)學(xué)習(xí)教師分發(fā)測(cè)試題目及案例素材給學(xué)生，對(duì)于掌握較好的同學(xué)，可以通過(guò)補(bǔ)充案例對(duì)相關(guān)知識(shí)點(diǎn)進(jìn)行鞏固。布置作業(yè)完成“補(bǔ)充案例”，通過(guò)平臺(tái)提交給教師，教師下節(jié)課進(jìn)行點(diǎn)評(píng)。預(yù)習(xí)3.4節(jié)【CSS高級(jí)屬性】。預(yù)習(xí)3.5節(jié)【階段案例—制作服裝推廣軟文】。第五課時(shí)（講解CSS層疊性與繼承性、CSS優(yōu)先級(jí)）復(fù)習(xí)上節(jié)課內(nèi)容在講解本節(jié)內(nèi)容前，拋出以下2個(gè)問(wèn)題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。1、在上一節(jié)中，我們學(xué)習(xí)了如何使用CSS屬性設(shè)置網(wǎng)頁(yè)中的字體及文本。請(qǐng)同學(xué)們回顧下：如何使用“text-align”屬性設(shè)置文本的對(duì)齊方式呢？答案：text-align屬性用于設(shè)置文本內(nèi)容的水平對(duì)齊，相當(dāng)于html中的align對(duì)齊屬性。其可用屬性值如下：left：左對(duì)齊（默認(rèn)值）right：右對(duì)齊。center：居中對(duì)齊。例如設(shè)置二級(jí)標(biāo)題居中對(duì)齊，可使用如下CSS代碼：h2{text-align:center;}2、請(qǐng)舉例說(shuō)明：如何使用“text-indent”屬性設(shè)置文本效果？答案：text-indent屬性用于設(shè)置首行文本的縮進(jìn)，其屬性值可為不同單位的數(shù)值、em字符寬度的倍數(shù)、或相對(duì)于瀏覽器窗口寬度的百分比%，允許使用負(fù)值，建議使用em作為設(shè)置單位。例如設(shè)置段落文本首行縮進(jìn)2個(gè)字符，可使用如下CSS代碼：p{text-indent:2em;}說(shuō)明：教師可根據(jù)學(xué)生對(duì)上述問(wèn)題的回答情況，對(duì)以上問(wèn)題進(jìn)行簡(jiǎn)單講解或直接進(jìn)入本課時(shí)新內(nèi)容的學(xué)習(xí)。本課時(shí)內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：在CSS中，很多屬性都具有繼承性，能夠大大地減少代碼的冗余。但是，還有一些屬性是不具有繼承性的。那么，請(qǐng)大家討論并舉例說(shuō)明哪些CSS屬性不具有繼承性呢？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋?zhuān)翰⒉皇撬械腃SS屬性都可以繼承，例如：邊框?qū)傩酝膺吘鄬傩詢(xún)?nèi)邊距屬性背景屬性定位屬性布局屬性元素寬高屬性知識(shí)點(diǎn)講解講解“CSS層疊性與繼承性”（1）、教師展示PPT對(duì)“CSS層疊性與繼承性”的概念進(jìn)行講解。（2）、教師展示PPT分別對(duì)層疊性、繼承性進(jìn)行代碼演示并舉例說(shuō)明。（3）、教師對(duì)使用CSS繼承性時(shí)需要注意的幾個(gè)問(wèn)題進(jìn)行說(shuō)明，并總結(jié)出不具有繼承性的CSS屬性。（4）、學(xué)生練習(xí)，教師巡視，對(duì)疑難問(wèn)題進(jìn)行解答。講解“CSS優(yōu)先級(jí)”（1）、教師帶領(lǐng)學(xué)生對(duì)通過(guò)不同的選擇器對(duì)同一元素定義不同的CSS樣式，指出不同的選擇器有不同的優(yōu)先級(jí)問(wèn)題。示例：HTML結(jié)構(gòu)代碼：<pid="header"class="blue"> 幫幫我，我到底顯示什么顏色？</p>CSS樣式代碼：p{color:red;}/*標(biāo)記樣式*/.blue{color:green;}/*class樣式*/#header{color:blue;}/*id樣式*/在上面的例子中，使用不同的選擇器對(duì)同一個(gè)元素設(shè)置文本顏色，這時(shí)瀏覽器會(huì)根據(jù)選擇器的優(yōu)先級(jí)規(guī)則解析CSS樣式。（2）、教師展示PPT對(duì)“CSS優(yōu)先級(jí)”進(jìn)行講解，指出CSS優(yōu)先級(jí)的計(jì)算原則。（3）教師對(duì)CSS選擇器中的權(quán)重進(jìn)行講解，并進(jìn)行代碼演示。（4）教師對(duì)計(jì)算CSS優(yōu)先級(jí)時(shí)，需要注意一些特殊情況進(jìn)行總結(jié)并演示。（5）、學(xué)生提問(wèn)，教師對(duì)疑難問(wèn)題進(jìn)行解答。階段小結(jié)小結(jié)重點(diǎn)：CSS層疊性與繼承性、CSS優(yōu)先級(jí)。易錯(cuò)點(diǎn)：注意區(qū)分不同CSS屬性的繼承性。答疑教師詢(xún)問(wèn)學(xué)生對(duì)于知識(shí)點(diǎn)還有什么不理解的地方。針對(duì)學(xué)生不理解的知識(shí)點(diǎn)給與解釋。鞏固練習(xí)鞏固本課時(shí)知識(shí)點(diǎn)學(xué)完知識(shí)點(diǎn)后，教師帶領(lǐng)學(xué)生對(duì)本課時(shí)所學(xué)知識(shí)點(diǎn)進(jìn)行回顧。以此使學(xué)生更熟練地掌握“CSS層疊性與繼承性、CSS優(yōu)先級(jí)”等知識(shí)點(diǎn)。通過(guò)“補(bǔ)充案例”加強(qiáng)學(xué)習(xí)教師分發(fā)測(cè)試題目及案例素材給學(xué)生，對(duì)于掌握較好的同學(xué)，可以通過(guò)補(bǔ)充案例對(duì)相關(guān)知識(shí)點(diǎn)進(jìn)行鞏固。第六課時(shí)（講解階段案例—制作服裝推廣軟文）復(fù)習(xí)上節(jié)課內(nèi)容在講解本節(jié)內(nèi)容前，拋出以下問(wèn)題讓學(xué)生回答，以復(fù)習(xí)上節(jié)課內(nèi)容。上節(jié)課節(jié)中，我們學(xué)習(xí)了CSS層疊性與繼承性、CSS優(yōu)先級(jí)的相關(guān)知識(shí)。那么，請(qǐng)同學(xué)們回顧并回答：如何理解CSS的層疊性？請(qǐng)舉例說(shuō)明。答案：所謂層疊性是指多種CSS樣式的疊加。例如，當(dāng)使用內(nèi)嵌式CSS樣式表定義<p>標(biāo)記字號(hào)大小為12像素，鏈入式定義<p>標(biāo)記顏色為紅色，那么段落文本將顯示為12像素紅色，即這兩種樣式產(chǎn)生了疊加，這稱(chēng)為CSS的層疊性。說(shuō)明：教師可根據(jù)學(xué)生對(duì)上述問(wèn)題的回答情況，對(duì)以上問(wèn)題進(jìn)行簡(jiǎn)單講解或直接進(jìn)入本課時(shí)新內(nèi)容的學(xué)習(xí)。本課時(shí)內(nèi)容學(xué)習(xí)分組討論對(duì)新課進(jìn)行講解前，先讓學(xué)生分組討論以下問(wèn)題：在CSS中，通過(guò)文本樣式屬性可以設(shè)置字體的顏色、間距、對(duì)齊方式等屬性。那么，請(qǐng)舉例說(shuō)明：如何使用“text-indent”屬性設(shè)置文本效果？請(qǐng)小組代表對(duì)以上問(wèn)題發(fā)表見(jiàn)解。教師對(duì)上述問(wèn)題進(jìn)行解釋?zhuān)簍ext-indent屬性用于設(shè)置首行文本的縮進(jìn)，其屬性值可為不同單位的數(shù)值、em字符寬度的倍數(shù)、或相對(duì)于瀏覽器窗口寬度的百分比%，允許使用負(fù)值，建議使用em作為設(shè)置單位。例如設(shè)置段落文本首行縮進(jìn)2個(gè)字符，可使用如下CSS代碼：p{text-indent:2em;}案例講解案例描述本章前幾個(gè)節(jié)重點(diǎn)介