HTML5使用標簽創(chuàng)建網(wǎng)頁結構，設置CSS屬性完成網(wǎng)頁布局。120HTML5基礎語法與文檔結構，語義化標簽及多媒體元素的應用，理解盒子模型和常見布局流技術，綜合運用CSS知識，提升網(wǎng)頁布局能力和動態(tài)表現(xiàn)效果。27.1外部樣式表，7.2CSS樣式優(yōu)先權，7.3更多的CSS選擇器該班人數(shù)M人，年齡約N歲，中技階段，學習本課程之前已有一定的計算機基礎認知，均具備數(shù)年的網(wǎng)齡，對網(wǎng)頁相關概念及技術有一些簡單的了解。知識目標：（1） 鞏固外部樣式表知識。（2） 理解選擇器的優(yōu)先級別。（3） 掌握關系選擇器，如子元素選擇器、相鄰兄弟選擇器、兄弟元素選擇器。能力目標：（1） 具備合理使用關系選擇器的意識。（2） 具備分辨選擇器優(yōu)先級別的能力。素養(yǎng)目標：（1） 了解本章成語的出處，理解成語含義與知識點理解的結合。Css選擇器優(yōu)先級、關系選擇器外部樣式表，子元素選擇器的概念。通過成語解析概念，然后借助案例強化選擇器的概念及對應寫法。子元素選擇器的應用。通過案例講解，讓學生在不同場景中體會選擇器的用法。運用實例演示法，通過實際案例或操作演示，讓學生直觀理解抽象概念。實施項目驅(qū)動教學，鼓勵學生獨立或分組完成任務，培養(yǎng)團隊協(xié)作與問題解決能力。利用在線實訓平臺，提供個性化學習路徑，滿足不同水平學生的學習需求。通過提問或講授的形式回顧之前的知識點，引入本次課的相關知識點的背景知識，然后講授具體的知識要點及任務實現(xiàn)的注意事項，通過任務實施環(huán)節(jié)讓學生各自或分組進行練習。教師隨堂抽查部分作品，根據(jù)課堂表現(xiàn)情況予以適當?shù)难a充，根據(jù)學生接納情況選擇性講解任務擴展內(nèi)容，最后以學生自我評價或小組評價完成任務的檢測，教師最終進行點評及總結。Windows操作系統(tǒng)、Hbuilder軟件、谷歌、火狐瀏覽器。隨堂考查、自我評價或小組評價是否正確、無誤達到任務要求復習嘗試用知識導圖將上一章節(jié)的內(nèi)容進行描述?；卮饐栴}教師提問，演示。思維導圖法或問題導向法幫助學生整理知識結構。引入前面通過專項的練習，我們已經(jīng)具備有一定的布局能力，也初步理解了常用樣式的用法。Css樣式既然是提供外觀的定義，這就意味著能完成許多美觀、獨特的樣式表現(xiàn)，因此我們需要進一步了解css知識。聽講講授，演示。任務驅(qū)動法，讓學生了解任務目標。思考教師引導、提示知識講授7.1外部樣式表因為案例內(nèi)容代碼量不大，前建議初學者先在文件內(nèi)部寫，等完全寫完樣式后，才采用外部css文件的寫法。一個復雜的網(wǎng)站，主頁、欄目頁、詳情頁有自己的css外部文件，但很多樣式可以在許多文件中共享使用，所以在實際網(wǎng)站中，往往一個HTML頁面鏈接了多個外部樣式表。知識點：外部樣式表的樣式復用記憶關鍵詞：疊矩重規(guī)關鍵詞解析： 許多html文件使用到的重復的css樣式，采用外部樣式表存放，可謂“重規(guī)”。外部樣式表有若干個，當一個html文件引用了多個外部樣式表，換言之就是有多個外部樣式的若干個樣式一起疊加在該文件中，可謂“疊矩”。☆思政講解：這一成語可以理解為對規(guī)則、制度、紀律的嚴格遵守與傳承，體現(xiàn)了對規(guī)范性和秩序性的高度重視?！隘B矩重規(guī)”也強調(diào)了創(chuàng)新與傳承的統(tǒng)一。在遵循規(guī)矩的基礎上，我們要勇于探索、敢于創(chuàng)新，不斷推動規(guī)則制度的完善與發(fā)展。這種在傳承中創(chuàng)新、在創(chuàng)新中傳承的精神，正是思政教育所倡導的實踐與探索精神。聽講演示任務達到的效果，講解代碼演示法讓學生明確分階段或最終的任務效果。講授法讓學生掌握完成本次任務需要了解的核心知識點。實驗法可以在講授過程中對個別難以理解的知識點有直觀的剖析。7.2進一步了解CSS樣式優(yōu)先權從樣式表代碼所在位置來說：內(nèi)部樣式表比外部樣式表優(yōu)先。從樣式表文件內(nèi)部來說：!important>內(nèi)聯(lián)樣式（行內(nèi)樣式）>ID選擇器>類選擇器>元素選擇器（標簽選擇器）7.3掌握更多的CSS選擇器CSS包含了數(shù)十種選擇器，只要學習過程中我們碰到與我們所學知識不同的選擇器，屆時在百度搜索相關資料。除了前面練習的ID選擇器、類選擇器、標簽選擇器、通用選擇器以外，我們介紹一下另外一些選擇器。7.3.1關系選擇器關系選擇器是能夠根據(jù)其它元素的關系選擇適合的元素選擇器。關系選擇器分為子元素選擇器、后代選擇器、相鄰兄弟選擇器、兄弟元素選擇器。后代選擇器我們在前面的章節(jié)大量使用，這里就不論述了。子元素選擇器子元素選擇器作用是找到指定標簽的直接子元素。兩個選擇器之間使用“>”號連接，中間不要留空格，否則選擇器無法生效。用法示例：.footer>p{color:red;}先找到類名為".footer"的標簽，然后在這個標簽中查找所有名稱叫做"p"的兒子元素。知識點：子元素選擇器特點記憶關鍵詞：子承父業(yè)關鍵詞解析：子元素選擇器只會查找兒子，不會查找其他嵌套的標簽，簡單地說，父親元素尋找的傳承目標只能是兒子，不能是孫子、曾孫等隔代傳承?！钏颊v解：，“子承父業(yè)”體現(xiàn)了對家族榮譽與責任的尊重與承擔。它要求子女在繼承父輩事業(yè)的同時，也要繼承其勤勞、誠信、創(chuàng)新等優(yōu)秀品質(zhì)，將這些精神財富代代相傳，形成家族特有的文化積淀。“子承父業(yè)”還體現(xiàn)了對傳統(tǒng)文化的尊重與傳承。在快速變化的社會環(huán)境中，傳統(tǒng)文化往往面臨著被遺忘或邊緣化的風險。而“子承父業(yè)”則要求我們在繼承父輩事業(yè)的同時，也要積極傳承和弘揚傳統(tǒng)文化，使其成為連接過去與未來的橋梁。演示網(wǎng)頁效果，解說各類型樣式的優(yōu)先級。任務實施【案例1】請嘗試如圖7-4所示的代碼，并在子元素選擇器的“>”前面添加空格后再預覽效果。上機操作巡堂指導，提醒易出錯的事項實踐法旨在培養(yǎng)學生項目開發(fā)能力。任務擴展任務檢測被考評人（組）：考評人：日期：評分項目過程表現(xiàn)分值得分網(wǎng)站結構文件及文件夾命名及位置正確。20練習1子元素選擇器應用正確，效果達到預期80總分說明：評分項目為任務實施中要求學生掌握的技能點?；ハ帱c評作業(yè)抽樣點評分組討論法加強團隊協(xié)作能