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

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