HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁布局。120HTML5基礎(chǔ)語法與文檔結(jié)構(gòu)，語義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁布局能力和動(dòng)態(tài)表現(xiàn)效果。27.1外部樣式表，7.2CSS樣式優(yōu)先權(quán)，7.3更多的CSS選擇器該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對(duì)網(wǎng)頁相關(guān)概念及技術(shù)有一些簡(jiǎn)單的了解。知識(shí)目標(biāo)：（1） 鞏固外部樣式表知識(shí)。（2） 理解選擇器的優(yōu)先級(jí)別。（3） 掌握關(guān)系選擇器，如子元素選擇器、相鄰兄弟選擇器、兄弟元素選擇器。能力目標(biāo)：（1） 具備合理使用關(guān)系選擇器的意識(shí)。（2） 具備分辨選擇器優(yōu)先級(jí)別的能力。素養(yǎng)目標(biāo)：（1） 了解本章成語的出處，理解成語含義與知識(shí)點(diǎn)理解的結(jié)合。Css選擇器優(yōu)先級(jí)、關(guān)系選擇器外部樣式表，子元素選擇器的概念。通過成語解析概念，然后借助案例強(qiáng)化選擇器的概念及對(duì)應(yīng)寫法。子元素選擇器的應(yīng)用。通過案例講解，讓學(xué)生在不同場(chǎng)景中體會(huì)選擇器的用法。運(yùn)用實(shí)例演示法，通過實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過提問或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評(píng)價(jià)或小組評(píng)價(jià)完成任務(wù)的檢測(cè)，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評(píng)價(jià)或小組評(píng)價(jià)是否正確、無誤達(dá)到任務(wù)要求復(fù)習(xí)嘗試用知識(shí)導(dǎo)圖將上一章節(jié)的內(nèi)容進(jìn)行描述?；卮饐栴}教師提問，演示。思維導(dǎo)圖法或問題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入前面通過專項(xiàng)的練習(xí)，我們已經(jīng)具備有一定的布局能力，也初步理解了常用樣式的用法。Css樣式既然是提供外觀的定義，這就意味著能完成許多美觀、獨(dú)特的樣式表現(xiàn)，因此我們需要進(jìn)一步了解css知識(shí)。聽講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授7.1外部樣式表因?yàn)榘咐齼?nèi)容代碼量不大，前建議初學(xué)者先在文件內(nèi)部寫，等完全寫完樣式后，才采用外部css文件的寫法。一個(gè)復(fù)雜的網(wǎng)站，主頁、欄目頁、詳情頁有自己的css外部文件，但很多樣式可以在許多文件中共享使用，所以在實(shí)際網(wǎng)站中，往往一個(gè)HTML頁面鏈接了多個(gè)外部樣式表。知識(shí)點(diǎn)：外部樣式表的樣式復(fù)用記憶關(guān)鍵詞：疊矩重規(guī)關(guān)鍵詞解析： 許多html文件使用到的重復(fù)的css樣式，采用外部樣式表存放，可謂“重規(guī)”。外部樣式表有若干個(gè)，當(dāng)一個(gè)html文件引用了多個(gè)外部樣式表，換言之就是有多個(gè)外部樣式的若干個(gè)樣式一起疊加在該文件中，可謂“疊矩”?！钏颊v解：這一成語可以理解為對(duì)規(guī)則、制度、紀(jì)律的嚴(yán)格遵守與傳承，體現(xiàn)了對(duì)規(guī)范性和秩序性的高度重視。“疊矩重規(guī)”也強(qiáng)調(diào)了創(chuàng)新與傳承的統(tǒng)一。在遵循規(guī)矩的基礎(chǔ)上，我們要勇于探索、敢于創(chuàng)新，不斷推動(dòng)規(guī)則制度的完善與發(fā)展。這種在傳承中創(chuàng)新、在創(chuàng)新中傳承的精神，正是思政教育所倡導(dǎo)的實(shí)踐與探索精神。聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。7.2進(jìn)一步了解CSS樣式優(yōu)先權(quán)從樣式表代碼所在位置來說：內(nèi)部樣式表比外部樣式表優(yōu)先。從樣式表文件內(nèi)部來說：!important>內(nèi)聯(lián)樣式（行內(nèi)樣式）>ID選擇器>類選擇器>元素選擇器（標(biāo)簽選擇器）7.3掌握更多的CSS選擇器CSS包含了數(shù)十種選擇器，只要學(xué)習(xí)過程中我們碰到與我們所學(xué)知識(shí)不同的選擇器，屆時(shí)在百度搜索相關(guān)資料。除了前面練習(xí)的ID選擇器、類選擇器、標(biāo)簽選擇器、通用選擇器以外，我們介紹一下另外一些選擇器。7.3.1關(guān)系選擇器關(guān)系選擇器是能夠根據(jù)其它元素的關(guān)系選擇適合的元素選擇器。關(guān)系選擇器分為子元素選擇器、后代選擇器、相鄰兄弟選擇器、兄弟元素選擇器。后代選擇器我們?cè)谇懊娴恼鹿?jié)大量使用，這里就不論述了。子元素選擇器子元素選擇器作用是找到指定標(biāo)簽的直接子元素。兩個(gè)選擇器之間使用“>”號(hào)連接，中間不要留空格，否則選擇器無法生效。用法示例：.footer>p{color:red;}先找到類名為".footer"的標(biāo)簽，然后在這個(gè)標(biāo)簽中查找所有名稱叫做"p"的兒子元素。知識(shí)點(diǎn)：子元素選擇器特點(diǎn)記憶關(guān)鍵詞：子承父業(yè)關(guān)鍵詞解析：子元素選擇器只會(huì)查找兒子，不會(huì)查找其他嵌套的標(biāo)簽，簡(jiǎn)單地說，父親元素尋找的傳承目標(biāo)只能是兒子，不能是孫子、曾孫等隔代傳承?！钏颊v解：，“子承父業(yè)”體現(xiàn)了對(duì)家族榮譽(yù)與責(zé)任的尊重與承擔(dān)。它要求子女在繼承父輩事業(yè)的同時(shí)，也要繼承其勤勞、誠信、創(chuàng)新等優(yōu)秀品質(zhì)，將這些精神財(cái)富代代相傳，形成家族特有的文化積淀?！白映懈笜I(yè)”還體現(xiàn)了對(duì)傳統(tǒng)文化的尊重與傳承。在快速變化的社會(huì)環(huán)境中，傳統(tǒng)文化往往面臨著被遺忘或邊緣化的風(fēng)險(xiǎn)。而“子承父業(yè)”則要求我們?cè)诶^承父輩事業(yè)的同時(shí)，也要積極傳承和弘揚(yáng)傳統(tǒng)文化，使其成為連接過去與未來的橋梁。演示網(wǎng)頁效果，解說各類型樣式的優(yōu)先級(jí)。任務(wù)實(shí)施【案例1】請(qǐng)嘗試如圖7-4所示的代碼，并在子元素選擇器的“>”前面添加空格后再預(yù)覽效果。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。20練習(xí)1子元素選擇器應(yīng)用正確，效果達(dá)到預(yù)期80總分說明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。互相點(diǎn)評(píng)作業(yè)抽樣點(diǎn)評(píng)分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力。總結(jié)通過本課的學(xué)習(xí)：（1） 鞏固外部樣式表知識(shí)。（2） 理解選擇器的優(yōu)先級(jí)別，具備分辨選擇器優(yōu)先級(jí)別的能力。（3） 掌握關(guān)系選擇器，如子元素選擇器。聽講歸納本任務(wù)的開展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁布局。120HTML5基礎(chǔ)語法與文檔結(jié)構(gòu)，語義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁布局能力和動(dòng)態(tài)表現(xiàn)效果。27.3掌握更多的CSS選擇器該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對(duì)網(wǎng)頁相關(guān)概念及技術(shù)有一些簡(jiǎn)單的了解。知識(shí)目標(biāo)：（1） 鞏固外部樣式表知識(shí)。（2） 理解選擇器的優(yōu)先級(jí)別。（3） 掌握關(guān)系選擇器，如子元素選擇器、相鄰兄弟選擇器、兄弟元素選擇器。能力目標(biāo)：（1） 具備合理使用關(guān)系選擇器的意識(shí)。（2） 具備分辨選擇器優(yōu)先級(jí)別的能力。素養(yǎng)目標(biāo)：（1） 了解本章成語的出處，理解成語含義與知識(shí)點(diǎn)理解的結(jié)合。相鄰兄弟選擇器、兄弟元素選擇器相鄰兄弟選擇器、兄弟元素選擇器的概念。通過成語解析概念，融合思政元素講解，強(qiáng)化對(duì)選擇器概念的認(rèn)識(shí)。相鄰兄弟選擇器、兄弟元素選擇器的應(yīng)用。通過唐詩案例，加強(qiáng)難點(diǎn)知識(shí)的學(xué)習(xí)同時(shí)加強(qiáng)對(duì)中華文化的認(rèn)同。運(yùn)用實(shí)例演示法，通過實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過提問或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評(píng)價(jià)或小組評(píng)價(jià)完成任務(wù)的檢測(cè)，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評(píng)價(jià)或小組評(píng)價(jià)是否正確、無誤達(dá)到任務(wù)要求復(fù)習(xí)回顧已學(xué)的選擇器，Css選擇器優(yōu)先級(jí)從高到低怎么排序？回答問題教師提問，演示。思維導(dǎo)圖法或問題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入CSS包含了數(shù)十種選擇器，只要學(xué)習(xí)過程中我們碰到與我們所學(xué)知識(shí)不同的選擇器，屆時(shí)在百度搜索相關(guān)資料。除了前面練習(xí)的ID選擇器、類選擇器、標(biāo)簽選擇器、通用選擇器以外，我們介紹一下另外一些選擇器。聽講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授相鄰兄弟選擇器相鄰兄弟選擇器可選擇緊接在另一元素后的元素，強(qiáng)調(diào)后者與前者是相鄰關(guān)系，且二者有相同父元素?？梢岳斫獬桑盒珠L+第一個(gè)弟弟。例如，如果要增加緊接在h1元素（哥哥）后緊接著出現(xiàn)的段落p元素（弟弟）的文字顏色，可以這樣寫：h1+p{color:red;}知識(shí)點(diǎn)：相鄰兄弟選擇器特點(diǎn)記憶關(guān)鍵詞：近水樓臺(tái)關(guān)鍵詞解析： 兄弟元素選擇器只會(huì)選中與哥哥（“+”號(hào)前面的元素）緊挨著的弟弟，而且這個(gè)弟弟符合“+”號(hào)后方指定的類型。 請(qǐng)問如圖7-5所示的代碼，p段落的文字預(yù)覽后是什么顏聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。色？為什么？2.兄弟元素選擇器兄弟元素選擇器是選擇當(dāng)前元素的所有同級(jí)元素?？梢岳斫獬桑盒珠L~所有弟弟。例如，如果要增加緊接在h1元素后出現(xiàn)的所有段落p元素的行高，可以這樣寫：h1~p{line-height:1.5em;} 知識(shí)點(diǎn)：兄弟元素選擇器特點(diǎn)記憶關(guān)鍵詞：手足之情關(guān)鍵詞解析： 與相鄰兄弟選擇器不同，兄弟元素選擇器不僅關(guān)心緊挨著參考元素的下一個(gè)兄弟，還關(guān)心所有在參考元素之后的所有兄弟。正如二哥分糖果時(shí)，只要是他的任何弟弟妹妹，都會(huì)收到糖果，但這位哥哥并不會(huì)把糖果留給大哥和自己?！钏颊v解：在校園環(huán)境中，“手足之情”體現(xiàn)為同學(xué)們之間的相互扶持與關(guān)愛。無論是學(xué)習(xí)上的困難，還是生活中的挫折，同學(xué)們都能像兄弟姐妹一樣，伸出援手，共同面對(duì)。這種情感不僅加深了同學(xué)之間的友誼，更培養(yǎng)了大家的集體榮譽(yù)感和團(tuán)隊(duì)協(xié)作精神。演示案例2的頁面效果，講解兄弟元素選擇器的用法。任務(wù)實(shí)施【案例1】請(qǐng)嘗試如圖7-4所示的代碼，并在子元素選擇器的“>”前面添加空格后再預(yù)覽效果。【案例2】使用兄弟元素選擇器完成如圖7-6所示的特定行的樣式。☆思政講解：唐詩是中華文化悠久歷史的見證與傳承。每一首唐詩都是那個(gè)時(shí)代社會(huì)風(fēng)貌、人民情感與思想智慧的結(jié)晶，它們以優(yōu)美的語言、深邃的意境，展現(xiàn)了中華文化的博大精深與獨(dú)特魅力。世界上沒有第二種語言比漢語言文化更加靈活、精彩。比如有個(gè)漢語十級(jí)的笑話，阿呆給朋友送紅包時(shí)，兩人有如下對(duì)話:朋友:“你這是什么意思?”朋友:“沒什么，意思意思?！迸笥?“你這就不夠意思了?！卑⒋?“小意思，小意思。”朋友:“你這人真有意思。”阿呆:“其實(shí)也沒有別的意思?！迸笥?“那我就不好意思了?！卑⒋?“是我不好意思?！闭?qǐng)解釋上文中每個(gè)“意思”的意思。（1）編寫下圖所示的HTML代碼，如圖7-7所示。（2）編寫對(duì)應(yīng)的CSS代碼，如圖7-8所示。（3）保存文件后預(yù)覽效果是否達(dá)到預(yù)期。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。20練習(xí)1相鄰兄弟選擇器使用正確。40練習(xí)2兄弟元素選擇器使用正確。40總分說明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)?；ハ帱c(diǎn)評(píng)作業(yè)抽樣點(diǎn)評(píng)分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力?？偨Y(jié)通過本課的學(xué)習(xí)：（1）鞏固選擇器的優(yōu)先級(jí)別，具備分辨選擇器優(yōu)先級(jí)別的能力。（2）掌握關(guān)系選擇器，如相鄰兄弟選擇器、兄弟元素選擇器。聽講歸納本任務(wù)的開展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁布局。120HTML5基礎(chǔ)語法與文檔結(jié)構(gòu)，語義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁布局能力和動(dòng)態(tài)表現(xiàn)效果。27.3掌握更多的CSS選擇器該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對(duì)網(wǎng)頁相關(guān)概念及技術(shù)有一些簡(jiǎn)單的了解。知識(shí)目標(biāo)：（1）理解屬性選擇器概念。（2）掌握常見的5種屬性選擇器的寫法。能力目標(biāo)：（1）具備使用屬性選擇器對(duì)指定元素進(jìn)行樣式定義的能力。素養(yǎng)目標(biāo)：（1）了解本章成語的出處，理解成語含義與知識(shí)點(diǎn)理解的結(jié)合。屬性選擇器的應(yīng)用屬性選擇器概念及應(yīng)用場(chǎng)景。通過成語解析概念，然后借助案例強(qiáng)化選擇器的寫法。5種常見屬性選擇器的寫法。通過相關(guān)案例的屬性設(shè)置前后對(duì)比，讓學(xué)生加強(qiáng)理解與認(rèn)識(shí)。運(yùn)用實(shí)例演示法，通過實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過提問或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評(píng)價(jià)或小組評(píng)價(jià)完成任務(wù)的檢測(cè)，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評(píng)價(jià)或小組評(píng)價(jià)是否正確、無誤達(dá)到任務(wù)要求復(fù)習(xí)關(guān)系選擇器包括后代、子元素、相鄰兄弟、兄弟元素選擇器，各有何特點(diǎn)？回答問題教師提問，演示。思維導(dǎo)圖法或問題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入關(guān)系選擇器是根據(jù)標(biāo)簽的結(jié)構(gòu)關(guān)系來進(jìn)行定義的，選擇器書寫的是標(biāo)簽本身或者是id、class名稱。今天介紹的屬性選擇器，則是針對(duì)標(biāo)簽本身自帶的屬性來定義，相對(duì)關(guān)系選擇器，屬性選擇器更加靈活，適用的范圍也更廣。聽講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授7.3.2屬性選擇器屬性選擇器是CSS中一種強(qiáng)大的選擇器，它允許我們根據(jù)元素的屬性及屬性值來選擇特定的元素，從而實(shí)現(xiàn)精準(zhǔn)的樣式控制。它主要的應(yīng)用場(chǎng)景：為表單字段設(shè)置統(tǒng)一樣式、模塊化CSS以避免命名沖突、標(biāo)識(shí)表單控件的不同交互狀態(tài)、定制多語言環(huán)境下的文本展示、響應(yīng)不同媒體查詢條件等。屬性選擇器寫法為[屬性]，用法示例：a[href]{color:red;}/*只對(duì)有href屬性的a元素應(yīng)用樣式*/知識(shí)點(diǎn)：屬性選擇器特點(diǎn)記憶關(guān)鍵詞：有的放矢關(guān)鍵詞解析：CSS屬性選擇器允許針對(duì)具有特定屬性或?qū)傩灾档脑貋響?yīng)用樣式。通俗理解成針對(duì)具有特定“屬性箭靶”的元素來“發(fā)射”樣式規(guī)則的?！钏颊v解：作為學(xué)生，將“有的放矢”這一成語融入學(xué)習(xí)之中，可以幫助我們更加高效、有針對(duì)性地規(guī)劃和管理自己的學(xué)習(xí)，以下是幾個(gè)具體的實(shí)踐方法：（1）設(shè)定明確的學(xué)習(xí)目標(biāo)（2）制定個(gè)性化的學(xué)習(xí)計(jì)劃（3）選擇適合的學(xué)習(xí)資源和方法。常見的大部分用法如表7-1所示。寫法作用范例[屬性]選擇所有具有指定屬性的元素，不論其屬性值為何。選擇所有帶有'type'屬性的元素[type]{……}[屬性="值"]選擇屬性值完全等于指定值的元素。選擇href屬性值完全等于指定URL的元素[href=""]{……}[屬性^="值"]選擇屬性值以指定值開始的元素。選擇href屬性值以'https://'開始的元素[href^="https://"]{……}[屬性$="值"]選擇屬性值以指定值結(jié)束的元素。選擇href屬性值以'.pdf'結(jié)束的元素[href$='.pdf']{……}[屬性*="值"]選擇屬性值包含指定字符串的元素。選擇title屬性值包含'hello'字符串的元素[title*='hello']{……}表7-1屬性選擇器用法聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施【案例3】敲入如圖7-9所示代碼，嘗試屬性選擇器的作用。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過程表現(xiàn)分值得分[屬性]寫法代碼書寫正確、規(guī)范，樣式效果生效。20[屬性="值"]寫法代碼書寫正確、規(guī)范，樣式效果生效。20[屬性^="值"]寫法代碼書寫正確、規(guī)范，樣式效果生效。20[屬性$="值"]寫法代碼書寫正確、規(guī)范，樣式效果生效。20[屬性*="值"]寫法代碼書寫正確、規(guī)范，樣式效果生效。20總分說明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)?；ハ帱c(diǎn)評(píng)作業(yè)抽樣點(diǎn)評(píng)分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力。總結(jié)通過本課的學(xué)習(xí)：（1）理解屬性選擇器概念。（2）掌握常見的5種屬性選擇器的寫法。（3）具備使用屬性選擇器對(duì)指定元素進(jìn)行樣式定義的能力。聽講歸納本任務(wù)的開展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁布局。120HTML5基礎(chǔ)語法與文檔結(jié)構(gòu)，語義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁布局能力和動(dòng)態(tài)表現(xiàn)效果。27.3掌握更多的CSS選擇器該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對(duì)網(wǎng)頁相關(guān)概念及技術(shù)有一些簡(jiǎn)單的了解。知識(shí)目標(biāo)：（1）了解偽類選擇器的應(yīng)用場(chǎng)景及種類。（2）:Hover選擇器的應(yīng)用（3）:nth-of-type(n)選擇器和:nth-last-of-type()選擇器的應(yīng)用。能力目標(biāo)：（1）具備正確使用Hover偽類選擇器，并合理定義狀態(tài)的能力。（2）具備正確使用nth-of-type(n)和:nth-last-of-type()選擇器的能力。素養(yǎng)目標(biāo)：（1）了解本章成語的出處，理解成語含義與知識(shí)點(diǎn)理解的結(jié)合。（2）通過引入宋詞的案例，鼓勵(lì)學(xué)生跨學(xué)科學(xué)習(xí)，將程序設(shè)計(jì)與其他學(xué)科知識(shí)相結(jié)合，拓寬視野，提升綜合素質(zhì)。偽類選擇器的應(yīng)用:nth-of-type(n)選擇器和:nth-last-of-type()選擇器。通過成語解析概念，然后借助案例強(qiáng)化選擇器的寫法。部分英文單詞的記憶。通過單詞對(duì)比加強(qiáng)對(duì)選擇器英文的記憶。運(yùn)用實(shí)例演示法，通過實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過提問或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評(píng)價(jià)或小組評(píng)價(jià)完成任務(wù)的檢測(cè)，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評(píng)價(jià)或小組評(píng)價(jià)是否正確、無誤達(dá)到任務(wù)要求復(fù)習(xí)屬性選擇器的應(yīng)用場(chǎng)景。列舉一下可以應(yīng)用屬性選擇器的標(biāo)簽?；卮饐栴}教師提問，演示。思維導(dǎo)圖法或問題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入偽類選擇器，是一種特殊的選擇器，它用來選擇元素在特定狀態(tài)下的樣式。這些特定狀態(tài)并不是由文檔結(jié)構(gòu)決定的，而是由用戶行為（如點(diǎn)擊、懸停）或元素的狀態(tài)（如被訪問、被禁用）來定義的。聽講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授7.3.3偽類選擇器 偽類選擇器包含數(shù)十種選擇器，大體包括以下三大類：（1）結(jié)構(gòu)性偽類選擇器，結(jié)構(gòu)性偽類選擇器主要用于選取DOM樹中特定位置的元素。（2）狀態(tài)偽類選擇器，狀態(tài)偽類選擇器主要用于選取具有特定交互狀態(tài)的元素。（3）表單相關(guān)偽類選擇器，表單相關(guān)偽類選擇器主要用于選取與表單相關(guān)的特定元素。知識(shí)點(diǎn)：偽類選擇器特點(diǎn)記憶關(guān)鍵詞：千變?nèi)f化關(guān)鍵詞解析： 偽類選擇器可以根據(jù)不同的條件和狀態(tài)來選擇元素，這些條件和狀態(tài)可以是動(dòng)態(tài)的、交互的，甚至是基于文檔結(jié)構(gòu)的。因此，偽類選擇器在CSS中的應(yīng)用就像千變?nèi)f化的魔法，能夠根據(jù)不同的場(chǎng)景和需求，以靈活多變的方式為元素應(yīng)用樣式。把握以下幾種常見的偽類選擇器。1.:hover選擇器:hover選擇器通常用于超鏈接元素，也可以用于大部分HTML標(biāo)簽。如果應(yīng)用在a元素上，通常有a:active，a:hover,a:link,a:visited四種狀態(tài)，但實(shí)際上，通常只需要設(shè)置a:hover狀態(tài)即可。其他狀態(tài)可以由a對(duì)應(yīng)標(biāo)簽選擇器中設(shè)置對(duì)應(yīng)屬性就可以達(dá)到現(xiàn)行的主流效果。2.:nth-of-type(n)選擇器和:nth-last-of-type()

選擇器:nth-of-type(n)選擇器匹配“同類型中的第n個(gè)同級(jí)兄弟元素”。:nth-last-of-type(n)選擇器匹配“同類型中的倒數(shù)第n個(gè)同級(jí)兄弟元素”。括號(hào)內(nèi)的數(shù)字n也可以采用odd、even關(guān)鍵字，分別指的是奇數(shù)、偶數(shù)位置。聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施【案例4】設(shè)計(jì)如圖7-11所示的導(dǎo)航條的級(jí)聯(lián)菜單出現(xiàn)效果。（1）編寫如圖7-12所示的HTML代碼：（2）完成對(duì)應(yīng)的CSS代碼，如圖7-13所示。（3）保存文件，在瀏覽器中運(yùn)行，測(cè)試光標(biāo)滑過時(shí)的效果?！景咐?】完成如圖7-14所示的文字效果。對(duì)應(yīng)的HTML和CSS代碼如圖7-15所示。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。10練習(xí)1級(jí)聯(lián)菜單對(duì)應(yīng)的容器結(jié)構(gòu)正確20添加hover選擇器后，交互效果達(dá)到預(yù)期。30練習(xí)2nth-of-type(n)選擇器定義正確20nth-last-of-type()選擇器定義正確20總分說明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。互相點(diǎn)評(píng)作業(yè)抽樣點(diǎn)評(píng)分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力?？偨Y(jié)通過本課的學(xué)習(xí)：（1）了解偽類選擇器的應(yīng)用場(chǎng)景及種類。（2）掌握:Hover選擇器的應(yīng)用（3）掌握:nth-of-type(n)選擇器和:nth-last-of-type()選擇器的應(yīng)用。（4）通過引入宋詞的案例，鼓勵(lì)學(xué)生跨學(xué)科學(xué)習(xí)，將程序設(shè)計(jì)與其他學(xué)科知識(shí)相結(jié)合，拓寬視野，提升綜合素質(zhì)。聽講歸納本任務(wù)的開展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁布局。120HTML5基礎(chǔ)語法與文檔結(jié)構(gòu)，語義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁布局能力和動(dòng)態(tài)表現(xiàn)效果。27.3掌握更多的CSS選擇器該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對(duì)網(wǎng)頁相關(guān)概念及技術(shù)有一些簡(jiǎn)單的了解。知識(shí)目標(biāo)：（1）:first-child選擇器與:last-child選擇器的區(qū)別。（2）:nth-child(n)和:nth-last-child(n)選擇器的區(qū)別。（3）理解last字眼在選擇器中所起的作用。能力目標(biāo)：（1）具備應(yīng)用:first-child選擇器與:last-child選擇器完成對(duì)應(yīng)案例的能力。（2）具備應(yīng)用:nth-child(n)和:nth-last-child(n)選擇器完成對(duì)應(yīng)案例的能力。素養(yǎng)目標(biāo)：（1）了解本章成語的出處，理解成語含義與知識(shí)點(diǎn)理解的結(jié)合。（2）通過類比思維，加強(qiáng)對(duì)選擇器的認(rèn)識(shí)，提升自身的思維能力。偽類選擇器的應(yīng)用:first-child選擇器，:last-child選擇器，:nth-child(n)，:nth-last-child(n)選擇器。通過相關(guān)案例的屬性設(shè)置前后對(duì)比，讓學(xué)生加強(qiáng)理解與認(rèn)識(shí)。理解并熟記這四種選擇器的應(yīng)用場(chǎng)合。通過案例講解，讓學(xué)生在不同場(chǎng)景中體會(huì)選擇器的用法。運(yùn)用實(shí)例演示法，通過實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過提問或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評(píng)價(jià)或小組評(píng)價(jià)完成任務(wù)的檢測(cè)，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評(píng)價(jià)或小組評(píng)價(jià)是否正確、無誤達(dá)到任務(wù)要求復(fù)習(xí)相鄰兄弟選擇器與兄弟選擇器的區(qū)別?；卮饐栴}教師提問，演示。思維導(dǎo)圖法或問題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入今天了解其他常見的偽類選擇器。聽講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授:first-child選擇器與:last-child選擇器:first-child是css中的一個(gè)選擇器，其作用是用于選擇它的父元素中的第一個(gè)子元素。用法示例：p:first-child{……}:last-child選擇器用來匹配父元素中最后一個(gè)子元素。單是從字面上看起來挺容易理解的，但實(shí)際隱藏了另外一個(gè)條件“這第一個(gè)子元素剛好是本身”。:nth-child(n)和:nth-last-child(n)選擇器:nth-child(n)選擇器匹配“父元素的第n個(gè)子元素，不論元素的類型”。:nth-last-child(n)選擇器匹配“父元素的倒數(shù)第n個(gè)子元素，不論元素的類型”。注意這里說的“不論元素的類型”指的是“任何類型的元素都要納入n的計(jì)數(shù)內(nèi)”，但不是說“任何類型的元素都可以相應(yīng)你的選擇器”。這兩種選擇器同樣也可以擁有odd、even關(guān)鍵字。聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施【案例6】打開上個(gè)《江城子·密州出獵》的練習(xí)，增加如圖7-16所示的代碼?！景咐?】敲入如圖7-18所示的代碼，然后分析出現(xiàn)的預(yù)覽效果。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過程表現(xiàn)分值得分:first-child選擇器選擇器書寫正確，樣式達(dá)成預(yù)期。25:last-child選擇器選擇器書寫正確，樣式達(dá)成預(yù)期。25:nth-child(n)選擇器書寫正確，樣式達(dá)成預(yù)期。25:nth-last-child(n)選擇器書寫正確，樣式達(dá)成預(yù)期。25總分說明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)?；ハ帱c(diǎn)評(píng)作業(yè)抽樣點(diǎn)評(píng)分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力?？偨Y(jié)通過本課的學(xué)習(xí)：（1）:first-child選擇器與:last-child選擇器的區(qū)別。（2）:nth-child(n)和:nth-last-child(n)選擇器的區(qū)別。（3）理解last字眼在選擇器中所起的作用。（4）通過類比思維，加強(qiáng)對(duì)選擇器的認(rèn)識(shí)，提升自身的思維能力。聽講歸納本任務(wù)的開展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處。HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁布局。120HTML5基礎(chǔ)語法與文檔結(jié)構(gòu)，語義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁布局能力和動(dòng)態(tài)表現(xiàn)效果。27.3掌握更多的CSS選擇器該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對(duì)網(wǎng)頁相關(guān)概念及技術(shù)有一些簡(jiǎn)單的了解。知識(shí)目標(biāo)：（1） 了解偽元素選擇器的應(yīng)用場(chǎng)景。（2） 掌握::before偽元素選擇器、::after偽元素選擇器的用法格式。能力目標(biāo)：（1） 具備使用::before偽元素選擇器、::after偽元素選擇器為目標(biāo)位置生成元素的能力。（2） 具備使用::before偽元素選擇器完成排行榜的項(xiàng)目列表圖標(biāo)的能力。素養(yǎng)目標(biāo)：（1） 了解本章成語的出處，理解成語含義與知識(shí)點(diǎn)理解的結(jié)合。（2） 通過了解排行榜時(shí)事，可以更加深入地了解中國的國情，包括政治、經(jīng)濟(jì)、文化等各個(gè)方面。這種了解有助于增強(qiáng)民族自豪感和愛國情懷，提高對(duì)國家發(fā)展的認(rèn)同感和責(zé)任感。偽元素選擇器的應(yīng)用::before偽元素選擇器、::after偽元素選擇器。通過成語解析概念，然后借助案例強(qiáng)化選擇器的寫法。::before偽元素選擇器完成排行榜的項(xiàng)目列表圖標(biāo)。通過相關(guān)案例的屬性設(shè)置前后對(duì)比，讓學(xué)生加強(qiáng)理解與認(rèn)識(shí)。運(yùn)用實(shí)例演示法，通過實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過提問或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評(píng)價(jià)或小組評(píng)價(jià)完成任務(wù)的檢測(cè)，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評(píng)價(jià)或小組評(píng)價(jià)是否正確、無誤達(dá)到任務(wù)要求復(fù)習(xí):nth-child(n)和:nth-last-child(n)選擇器的區(qū)別。請(qǐng)舉例說明:nth-child(n)與:nth-of-type選擇器的區(qū)別?；卮饐栴}教師提問，演示。思維導(dǎo)圖法或問題導(dǎo)向法幫助學(xué)生整理知識(shí)結(jié)構(gòu)。引入偽元素選擇器是Web設(shè)計(jì)中一個(gè)非常有用的工具，?它允許開發(fā)者在不改變HTML結(jié)構(gòu)的情況下，?通過CSS為元素添加裝飾性內(nèi)容和視覺效果，?從而豐富網(wǎng)頁的視覺表現(xiàn)力和用戶體驗(yàn)。以下是一些具體的應(yīng)用場(chǎng)景：?（1）添加裝飾性圖標(biāo)或符號(hào)。（2）面包屑導(dǎo)航。在面包屑導(dǎo)航中，?可以使用偽元素來連接各個(gè)頁面之間的鏈接，?如使用"?"符號(hào)連接頁面，?使用"/"符號(hào)分隔頁面鏈接等。?（3）創(chuàng)建裝飾性邊框或背景：?通過設(shè)置偽元素的樣式，?可以為其添加邊框、?背景色或其他視覺效果，?從而增強(qiáng)元素的視覺吸引力。?聽講講授，演示。任務(wù)驅(qū)動(dòng)法，讓學(xué)生了解任務(wù)目標(biāo)。思考教師引導(dǎo)、提示知識(shí)講授在早期的CSS規(guī)范中，偽元素選擇器使用單冒號(hào)（:）來表示，CSS3規(guī)范更新了語法，要求使用雙冒號(hào)（::）來表示偽元素選擇器。兩者的區(qū)別在于使用的單冒號(hào)（:）和雙冒號(hào)（::）。::before和:before是偽元素選擇器，用于在目標(biāo)元素的前面插入內(nèi)容。內(nèi)容（content）屬性可以為空，只為設(shè)置樣式。::after和:after用于在目標(biāo)元素的后面插入內(nèi)容。內(nèi)容（content）屬性也可以為空。用法示例：p::before{content:"臺(tái)詞";color:red;}p::after{content:"";display:block;width:30px;height:30px;}知識(shí)點(diǎn)：偽元素選擇器特點(diǎn)記憶關(guān)鍵詞：無中生有關(guān)鍵詞解析： ::before、::after偽元素選擇器可以在不影響html結(jié)構(gòu)的情況下，憑空添加一個(gè)元素，通過樣式中的content屬性賦予元素的內(nèi)容，照常設(shè)置其他css屬性即可?！皞巍币部梢岳斫獬伞耙粋€(gè)并不真實(shí)存在于html結(jié)構(gòu)”的元素?！钏颊庹f：從學(xué)習(xí)手段來看，“無中生有”不僅是一種創(chuàng)造性的思維方式，更是一種積極的學(xué)習(xí)態(tài)度和問題解決策略。面對(duì)學(xué)習(xí)中的難題或挑戰(zhàn)，我們往往沒有現(xiàn)成的答案或方法?！盁o中生有”鼓勵(lì)我們跳出常規(guī)思維，嘗試從不同的角度或領(lǐng)域?qū)ふ异`感，比如將數(shù)學(xué)方法應(yīng)用于物理問題，或者從文學(xué)作品中尋找歷史事件的線索。這種跨領(lǐng)域的思考方式可以激發(fā)新的想法和解決方案。比如：初學(xué)英語時(shí)，許多人給單詞讀音標(biāo)記中文諧音字的方式，第一個(gè)嘗試這么做的人，是否憑空想出一種解決策略？比如：學(xué)網(wǎng)頁設(shè)計(jì)，許多人表示不會(huì)配色，不懂圖像怎么處理，其實(shí)身邊并不是缺乏素材，隨手一張圖片、課本插圖，甚至只有一張圖的情況下，我們也可以無限放大局部去顏色的對(duì)比與協(xié)調(diào)。當(dāng)手頭沒有資料，要從身邊的事物中獲取靈感及素材，這也是一種“無中生有”。聽講演示任務(wù)達(dá)到的效果，講解代碼演示法讓學(xué)生明確分階段或最終的任務(wù)效果。講授法讓學(xué)生掌握完成本次任務(wù)需要了解的核心知識(shí)點(diǎn)。實(shí)驗(yàn)法可以在講授過程中對(duì)個(gè)別難以理解的知識(shí)點(diǎn)有直觀的剖析。任務(wù)實(shí)施【案例8】完成如圖7-20所示的熱搜榜版面效果?！钏颊v解：了解排行榜時(shí)事，可以更加深入地了解中國的國情，包括政治、經(jīng)濟(jì)、文化、體育等各個(gè)方面。這種了解有助于增強(qiáng)民族自豪感和愛國情懷，提高對(duì)國家發(fā)展的認(rèn)同感和責(zé)任感。（1）書寫對(duì)應(yīng)的HTML代碼，如圖7-21所示。從HTML結(jié)構(gòu)來看，我們并沒有給各種圖標(biāo)預(yù)留有容器。（2）編寫對(duì)應(yīng)的CSS代碼，如圖7-22所示。上機(jī)操作巡堂指導(dǎo)，提醒易出錯(cuò)的事項(xiàng)實(shí)踐法旨在培養(yǎng)學(xué)生項(xiàng)目開發(fā)能力。任務(wù)擴(kuò)展任務(wù)檢測(cè)被考評(píng)人（組）：考評(píng)人：日期：評(píng)分項(xiàng)目過程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。10Ul容器結(jié)構(gòu)及基本樣式結(jié)構(gòu)書寫正確，基本樣式正確。30::before偽元素所生成的樣式與效果一致。30::after偽元素所生成的樣式與效果一致。30總分說明：評(píng)分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。互相點(diǎn)評(píng)作業(yè)抽樣點(diǎn)評(píng)分組討論法加強(qiáng)團(tuán)隊(duì)協(xié)作能力。總結(jié)通過本課的學(xué)習(xí)：（1）了解偽元素選擇器的應(yīng)用場(chǎng)景。（2）掌握::before偽元素選擇器、::after偽元素選擇器的用法格式。（3）通過了解排行榜時(shí)事，可以更加深入地了解中國的國情，包括政治、經(jīng)濟(jì)、文化等各個(gè)方面。這種了解有助于增強(qiáng)民族自豪感和愛國情懷，提高對(duì)國家發(fā)展的認(rèn)同感和責(zé)任感。聽講歸納本任務(wù)的開展情況，梳理知識(shí)點(diǎn)。采用歸納法分析班級(jí)完成的任務(wù)情況，反復(fù)提醒關(guān)鍵核心代碼及容易出錯(cuò)之處?！揪毩?xí)1】打開溫氏集團(tuán)的新聞欄目頁/GroupNews/list.aspx，觀察如圖7-28所示的區(qū)域，先思考該區(qū)域的布局結(jié)構(gòu)。圖7-28光標(biāo)落在網(wǎng)頁中對(duì)應(yīng)的區(qū)域，右鍵菜單中選擇“審查元素”，直接進(jìn)入開發(fā)模式，元素面板如圖7-29所示。圖7-29元素面板該元素對(duì)應(yīng)的樣式面板如圖7-30所示。圖7-30樣式面板仔細(xì)看上面兩張截圖后思考以下問題：（1）在布局中，圖片區(qū)域、文字區(qū)域?qū)?yīng)使用的容器分別是什么？（2）從效果圖來看，“08202408”方框在圖片上方浮現(xiàn)，代碼位置卻在另外的<divclass="time">容器，基于什么原因采用這種結(jié)構(gòu)？（3）::after偽元素是為了添加什么對(duì)象？這個(gè)偽元素從哪幾個(gè)外部樣式表中調(diào)用了樣式？解決完上述問題后，嘗試模仿官網(wǎng)代碼來制作對(duì)應(yīng)的布局效果。HTML5使用標(biāo)簽創(chuàng)建網(wǎng)頁結(jié)構(gòu)，設(shè)置CSS屬性完成網(wǎng)頁布局。120HTML5基礎(chǔ)語法與文檔結(jié)構(gòu)，語義化標(biāo)簽及多媒體元素的應(yīng)用，理解盒子模型和常見布局流技術(shù)，綜合運(yùn)用CSS知識(shí)，提升網(wǎng)頁布局能力和動(dòng)態(tài)表現(xiàn)效果。27.4CSS過渡與動(dòng)畫該班人數(shù)M人，年齡約N歲，中技階段，學(xué)習(xí)本課程之前已有一定的計(jì)算機(jī)基礎(chǔ)認(rèn)知，均具備數(shù)年的網(wǎng)齡，對(duì)網(wǎng)頁相關(guān)概念及技術(shù)有一些簡(jiǎn)單的了解。知識(shí)目標(biāo)：（1）理解CSS過渡與動(dòng)畫的意義。（2）掌握transition屬性的書寫格式，理解速度曲線過渡參數(shù)。（3）掌握@keyframes規(guī)則的創(chuàng)建與應(yīng)用。能力目標(biāo)：（1）具備使用css過渡完成級(jí)聯(lián)菜單的交互效果的能力。（2）具備創(chuàng)建@keyframes規(guī)則完成級(jí)聯(lián)菜單動(dòng)態(tài)效果的能力。素養(yǎng)目標(biāo)：（1）了解本章成語的出處，理解成語含義與知識(shí)點(diǎn)理解的結(jié)合。（2）鼓勵(lì)學(xué)生使用@keyframes規(guī)則創(chuàng)建獨(dú)特的動(dòng)態(tài)效果，培養(yǎng)他們的創(chuàng)新意識(shí)和創(chuàng)造力。過渡效果和@keyframes規(guī)則的應(yīng)用transition屬性的應(yīng)用，@keyframes規(guī)則的應(yīng)用。講解CSS過渡與動(dòng)畫的意義，演示動(dòng)畫效果，激發(fā)學(xué)生學(xué)習(xí)興趣。速度曲線屬性，@keyframes規(guī)則的定義。通過逐幀動(dòng)畫效果加強(qiáng)對(duì)@keyframes規(guī)則的認(rèn)識(shí)。運(yùn)用實(shí)例演示法，通過實(shí)際案例或操作演示，讓學(xué)生直觀理解抽象概念。實(shí)施項(xiàng)目驅(qū)動(dòng)教學(xué)，鼓勵(lì)學(xué)生獨(dú)立或分組完成任務(wù)，培養(yǎng)團(tuán)隊(duì)協(xié)作與問題解決能力。利用在線實(shí)訓(xùn)平臺(tái)，提供個(gè)性化學(xué)習(xí)路徑，滿足不同水平學(xué)生的學(xué)習(xí)需求。通過提問或講授的形式回顧之前的知識(shí)點(diǎn)，引入本次課的相關(guān)知識(shí)點(diǎn)的背景知識(shí)，然后講授具體的知識(shí)要點(diǎn)及任務(wù)實(shí)現(xiàn)的注意事項(xiàng)，通過任務(wù)實(shí)施環(huán)節(jié)讓學(xué)生各自或分組進(jìn)行練習(xí)。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當(dāng)?shù)难a(bǔ)充，根據(jù)學(xué)生接納情況選擇性講解任務(wù)擴(kuò)展內(nèi)容，最后以學(xué)生自我評(píng)價(jià)或小組評(píng)價(jià)完成任務(wù)的檢測(cè)，教師最終進(jìn)行點(diǎn)評(píng)及總結(jié)。Windows操作系統(tǒng)、Hbuilder軟件、谷歌