教學(xué)單元第七章CSS進(jìn)階知識教學(xué)內(nèi)容Css選擇器優(yōu)先級、關(guān)系選擇器學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時2學(xué)時學(xué)習(xí)目標(biāo)知識目標(biāo)：鞏固外部樣式表知識。理解選擇器的優(yōu)先級別。掌握關(guān)系選擇器，如子元素選擇器、相鄰兄弟選擇器、兄弟元素選擇器。能力目標(biāo)：具備合理使用關(guān)系選擇器的意識。具備分辨選擇器優(yōu)先級別的能力。素養(yǎng)目標(biāo)：了解本章成語的出處，理解成語含義與知識點(diǎn)理解的結(jié)合。學(xué)習(xí)重點(diǎn)外部樣式表，子元素選擇器、相鄰兄弟選擇器、兄弟元素選擇器的概念。學(xué)習(xí)難點(diǎn)子元素選擇器、相鄰兄弟選擇器、兄弟元素選擇器的應(yīng)用。教學(xué)方法講授法、演示法、任務(wù)驅(qū)動法教學(xué)過程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時間（分鐘）復(fù)習(xí)無0引入前面通過專項(xiàng)的練習(xí)，我們已經(jīng)具備有一定的布局能力，也初步理解了常用樣式的用法。Css樣式既然是提供外觀的定義，這就意味著能完成許多美觀、獨(dú)特的樣式表現(xiàn)，因此我們需要進(jìn)一步了解css知識。3任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識講授7.1外部樣式表因?yàn)榘咐齼?nèi)容代碼量不大，前建議初學(xué)者先在文件內(nèi)部寫，等完全寫完樣式后，才采用外部css文件的寫法。一個復(fù)雜的網(wǎng)站，主頁、欄目頁、詳情頁有自己的css外部文件，但很多樣式可以在許多文件中共享使用，所以在實(shí)際網(wǎng)站中，往往一個HTML頁面鏈接了多個外部樣式表，如圖7-1所示。圖7-1鏈接多個外部樣式表知識點(diǎn)：外部樣式表的樣式復(fù)用知識點(diǎn)：外部樣式表的樣式復(fù)用記憶關(guān)鍵詞：疊矩重規(guī)關(guān)鍵詞解析： 許多html文件使用到的重復(fù)的css樣式，采用外部樣式表存放，可謂“重規(guī)”。外部樣式表有若干個，當(dāng)一個html文件引用了多個外部樣式表，換言之就是有多個外部樣式的若干個樣式一起疊加在該文件中，可謂“疊矩”。成語出處： 《三國志·蜀書·郤正傳》：“君臣協(xié)美于朝，黎庶欣戴于野，動若重規(guī)，靜若迭矩?！?疊矩重規(guī)——意思是規(guī)與規(guī)相重，矩矩與相迭，度數(shù)相同，完全符合。原比喻動靜合乎法度或上下相合，后形容模仿、重復(fù)。☆思政講解：這一成語可以理解為對規(guī)則、制度、紀(jì)律的嚴(yán)格遵守與傳承，體現(xiàn)了對規(guī)范性和秩序性的高度重視?！隘B矩重規(guī)”也強(qiáng)調(diào)了創(chuàng)新與傳承的統(tǒng)一。在遵循規(guī)矩的基礎(chǔ)上，我們要勇于探索、敢于創(chuàng)新，不斷推動規(guī)則制度的完善與發(fā)展。這種在傳承中創(chuàng)新、在創(chuàng)新中傳承的精神，正是思政教育所倡導(dǎo)的實(shí)踐與探索精神。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)簽選擇器）請看以下例子，HTML及CSS代碼如圖7-2所示?！窘處熝菔?、講解】演示網(wǎng)頁效果，解說各類型樣式的優(yōu)先級。圖7-2css優(yōu)先權(quán)預(yù)覽的效果如圖7-3所示。圖7-3預(yù)覽效果當(dāng)然，css樣式優(yōu)先級別遠(yuǎn)沒有這么簡單，還要考慮樣式申明的順序、其他更多的選擇器優(yōu)先級別，但作為本課程內(nèi)容，我們要求掌握這么多就可以了。7.3掌握更多的CSS選擇器CSS包含了數(shù)十種選擇器，只要學(xué)習(xí)過程中我們碰到與我們所學(xué)知識不同的選擇器，屆時在百度搜索相關(guān)資料。除了前面練習(xí)的ID選擇器、類選擇器、標(biāo)簽選擇器、通用選擇器以外，我們介紹一下另外一些選擇器。7.3.1關(guān)系選擇器關(guān)系選擇器是能夠根據(jù)其它元素的關(guān)系選擇適合的元素選擇器。關(guān)系選擇器分為子元素選擇器、后代選擇器、相鄰兄弟選擇器、兄弟元素選擇器。后代選擇器我們在前面的章節(jié)大量使用，這里就不論述了。子元素選擇器子元素選擇器作用是找到指定標(biāo)簽的直接子元素。兩個選擇器之間使用“>”號連接，中間不要留空格，否則選擇器無法生效。用法示例：.footer>p{color:red;}先找到類名為".footer"的標(biāo)簽，然后在這個標(biāo)簽中查找所有名稱叫做"p"的兒子元素。知識點(diǎn)：知識點(diǎn)：子元素選擇器特點(diǎn)記憶關(guān)鍵詞：子承父業(yè)關(guān)鍵詞解析：子元素選擇器只會查找兒子，不會查找其他嵌套的標(biāo)簽，簡單地說，父親元素尋找的傳承目標(biāo)只能是兒子，不能是孫子、曾孫等隔代傳承。成語出處： 宋·釋道原《景德傳燈錄·利山和尚》：“僧問：不歷僧只獲法身，請師直指。師云：子承父業(yè)?！?子承父業(yè)——意思是指兒子繼承父親的事業(yè)?！钏颊v解：，“子承父業(yè)”體現(xiàn)了對家族榮譽(yù)與責(zé)任的尊重與承擔(dān)。它要求子女在繼承父輩事業(yè)的同時，也要繼承其勤勞、誠信、創(chuàng)新等優(yōu)秀品質(zhì)，將這些精神財富代代相傳，形成家族特有的文化積淀?！白映懈笜I(yè)”還體現(xiàn)了對傳統(tǒng)文化的尊重與傳承。在快速變化的社會環(huán)境中，傳統(tǒng)文化往往面臨著被遺忘或邊緣化的風(fēng)險。而“子承父業(yè)”則要求我們在繼承父輩事業(yè)的同時，也要積極傳承和弘揚(yáng)傳統(tǒng)文化，使其成為連接過去與未來的橋梁?！窘處熝菔?、講解】演示案例1效果，講解頁面中的子元素概念，子元素選擇器的寫法?！緦W(xué)生練習(xí)】制作案例1的頁面效果。相鄰兄弟選擇器相鄰兄弟選擇器可選擇緊接在另一元素后的元素，強(qiáng)調(diào)后者與前者是相鄰關(guān)系，且二者有相同父元素?？梢岳斫獬桑盒珠L+第一個弟弟。例如，如果要增加緊接在h1元素（哥哥）后緊接著出現(xiàn)的段落p元素（弟弟）的文字顏色，可以這樣寫：h1+p{color:red;}知識點(diǎn)：知識點(diǎn)：相鄰兄弟選擇器特點(diǎn)記憶關(guān)鍵詞：近水樓臺關(guān)鍵詞解析： 兄弟元素選擇器只會選中與哥哥（“+”號前面的元素）緊挨著的弟弟，而且這個弟弟符合“+”號后方指定的類型。成語出處： 宋·俞文豹《清夜錄》：“范文正公鎮(zhèn)錢塘，兵官皆被薦，獨(dú)巡檢蘇麟不見錄，乃獻(xiàn)詩云：‘近水樓臺先得月，向陽花木易逢春?！?近水樓臺——指靠近水邊的樓臺；比喻由于接近某人或者事物，而搶先得到某種利益或便利。提問：提問： 請問如圖7-5所示的代碼，p段落的文字預(yù)覽后是什么顏色？為什么？圖7-5相鄰兄弟選擇器兄弟元素選擇器兄弟元素選擇器是選擇當(dāng)前元素的所有同級元素?？梢岳斫獬桑盒珠L~所有弟弟。例如，如果要增加緊接在h1元素后出現(xiàn)的所有段落p元素的行高，可以這樣寫：h1~p{line-height:1.5em;} 知識點(diǎn)：兄弟元素選擇器知識點(diǎn)：兄弟元素選擇器特點(diǎn)記憶關(guān)鍵詞：手足之情關(guān)鍵詞解析： 與相鄰兄弟選擇器不同，兄弟元素選擇器不僅關(guān)心緊挨著參考元素的下一個兄弟，還關(guān)心所有在參考元素之后的所有兄弟。正如二哥分糖果時，只要是他的任何弟弟妹妹，都會收到糖果，但這位哥哥并不會把糖果留給大哥和自己。成語出處： 唐·李華《吊古戰(zhàn)場文》：“誰無兄弟，如足如手?！彼巍ぬK轍《為兄軾下獄上書》：“臣竊哀其志，不勝手足之情?！?手足之情——意思是比喻兄弟的感情很好?！钏颊v解：在校園環(huán)境中，“手足之情”體現(xiàn)為同學(xué)們之間的相互扶持與關(guān)愛。無論是學(xué)習(xí)上的困難，還是生活中的挫折，同學(xué)們都能像兄弟姐妹一樣，伸出援手，共同面對。這種情感不僅加深了同學(xué)之間的友誼，更培養(yǎng)了大家的集體榮譽(yù)感和團(tuán)隊(duì)協(xié)作精神?！窘處熝菔?、講解】演示案例2的頁面效果，講解兄弟元素選擇器的用法?！緦W(xué)生練習(xí)】完成案例2的頁面效果。35任務(wù)實(shí)施【案例1】請嘗試如圖7-4所示的代碼，并在子元素選擇器的“>”前面添加空格后再預(yù)覽效果。圖7-4子元素選擇器【案例2】使用兄弟元素選擇器完成如圖7-6所示的特定行的樣式。圖7-6預(yù)覽效果☆思政講解：唐詩是中華文化悠久歷史的見證與傳承。每一首唐詩都是那個時代社會風(fēng)貌、人民情感與思想智慧的結(jié)晶，它們以優(yōu)美的語言、深邃的意境，展現(xiàn)了中華文化的博大精深與獨(dú)特魅力。世界上沒有第二種語言比漢語言文化更加靈活、精彩。比如有個漢語十級的笑話：阿呆給朋友送紅包時，兩人有如下對話:朋友:“你這是什么意思?”朋友:“沒什么，意思意思?！迸笥?“你這就不夠意思了?！卑⒋?“小意思，小意思?！迸笥?“你這人真有意思?！卑⒋?“其實(shí)也沒有別的意思?！迸笥?“那我就不好意思了?！卑⒋?“是我不好意思?！闭埥忉屔衔闹忻總€“意思”的意思。（1）編寫下圖所示的HTML代碼，如圖7-7所示。圖7-7兄弟元素選擇器（2）編寫對應(yīng)的CSS代碼，如圖7-8所示。圖7-8CSS代碼（3）保存文件后預(yù)覽效果是否達(dá)到預(yù)期。35知識或技能拓展無0任務(wù)總結(jié)通過本課的學(xué)習(xí)：（1） 鞏固外部樣式表知識。（2） 理解選擇器的優(yōu)先級別，具備分辨選擇器優(yōu)先級別的能力。（3） 掌握關(guān)系選擇器，如子元素選擇器、相鄰兄弟選擇器、兄弟元素選擇器。5課后作業(yè)

任務(wù)單教學(xué)單元第七章CSS進(jìn)階知識教學(xué)內(nèi)容Css選擇器優(yōu)先級、關(guān)系選擇器實(shí)施環(huán)境機(jī)房學(xué)時2任務(wù)描述【案例1】請嘗試如圖7-4所示的代碼，并在子元素選擇器的“>”前面添加空格后再預(yù)覽效果。【案例2】使用兄弟元素選擇器完成如圖7-6所示的特定行的樣式。任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。任務(wù)實(shí)施【案例1】請嘗試如圖7-4所示的代碼，并在子元素選擇器的“>”前面添加空格后再預(yù)覽效果。圖7-4子元素選擇器【案例2】使用兄弟元素選擇器完成如圖7-6所示的特定行的樣式。圖7-6預(yù)覽效果（1）編寫下圖所示的HTML代碼，如圖7-7所示。圖7-7兄弟元素選擇器（2）編寫對應(yīng)的CSS代碼，如圖7-8所示。圖7-8CSS代碼（3）保存文件后預(yù)覽效果是否達(dá)到預(yù)期。任務(wù)檢測學(xué)習(xí)效果評價表被考評人（組）：考評人：日期：評分項(xiàng)目過程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。10練習(xí)1子元素選擇器應(yīng)用正確，效果達(dá)到預(yù)期30練習(xí)2相鄰兄弟選擇器使用正確。30兄弟元素選擇器使用正確。30總分說明：評分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。

教學(xué)單元7.3.2屬性選擇器教學(xué)內(nèi)容屬性選擇器的應(yīng)用學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時2學(xué)時學(xué)習(xí)目標(biāo)知識目標(biāo)：理解屬性選擇器概念。掌握常見的5種屬性選擇器的寫法。能力目標(biāo)：（1）具備使用屬性選擇器對指定元素進(jìn)行樣式定義的能力。素養(yǎng)目標(biāo)：（1）了解本章成語的出處，理解成語含義與知識點(diǎn)理解的結(jié)合。學(xué)習(xí)重點(diǎn)屬性選擇器概念及應(yīng)用場景學(xué)習(xí)難點(diǎn)5種常見屬性選擇器的寫法教學(xué)方法講授法、演示法、任務(wù)驅(qū)動法教學(xué)過程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時間（分鐘）復(fù)習(xí)關(guān)系選擇器包括后代、子元素、相鄰兄弟、兄弟元素選擇器，各有何特點(diǎn)？5引入關(guān)系選擇器是根據(jù)標(biāo)簽的結(jié)構(gòu)關(guān)系來進(jìn)行定義的，選擇器書寫的是標(biāo)簽本身或者是id、class名稱。而今天介紹的屬性選擇器，則是針對標(biāo)簽本身自帶的屬性來定義，相對關(guān)系選擇器，屬性選擇器更加靈活，適用的范圍也更廣。3任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識講授7.3.2屬性選擇器屬性選擇器是CSS中一種強(qiáng)大的選擇器，它允許我們根據(jù)元素的屬性及屬性值來選擇特定的元素，從而實(shí)現(xiàn)精準(zhǔn)的樣式控制。它主要的應(yīng)用場景：為表單字段設(shè)置統(tǒng)一樣式、模塊化CSS以避免命名沖突、標(biāo)識表單控件的不同交互狀態(tài)、定制多語言環(huán)境下的文本展示、響應(yīng)不同媒體查詢條件等。屬性選擇器寫法為[屬性]，用法示例：a[href]{color:red;}/*只對有href屬性的a元素應(yīng)用樣式*/知識點(diǎn)：屬性選擇器特點(diǎn)知識點(diǎn)：屬性選擇器特點(diǎn)記憶關(guān)鍵詞：有的放矢關(guān)鍵詞解析：CSS屬性選擇器允許針對具有特定屬性或?qū)傩灾档脑貋響?yīng)用樣式。通俗理解成針對具有特定“屬性箭靶”的元素來“發(fā)射”樣式規(guī)則的。成語出處： 宋代葉適《水心別集十五終論》：“論立于此，若射之有的也，或百步之外，或五十步之外，的必先立，然后挾弓注矢以從之?！?有的放矢——意思是放箭要對準(zhǔn)靶子。比喻說話做事有針對性?！钏颊v解：作為學(xué)生，將“有的放矢”這一成語融入學(xué)習(xí)之中，可以幫助我們更加高效、有針對性地規(guī)劃和管理自己的學(xué)習(xí)，以下是幾個具體的實(shí)踐方法：（1）設(shè)定明確的學(xué)習(xí)目標(biāo)（2）制定個性化的學(xué)習(xí)計劃（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屬性選擇器用法25任務(wù)實(shí)施【案例3】敲入如圖7-9所示代碼，嘗試屬性選擇器的作用。圖7-9屬性選擇器代碼運(yùn)行后的效果如圖7-10所示。圖7-10預(yù)覽效果40知識或技能拓展無0任務(wù)總結(jié)通過本課的學(xué)習(xí)：（1）理解屬性選擇器概念。（2）掌握常見的5種屬性選擇器的寫法。（3）具備使用屬性選擇器對指定元素進(jìn)行樣式定義的能力。5課后作業(yè)

任務(wù)單教學(xué)單元7.3.2屬性選擇器教學(xué)內(nèi)容屬性選擇器的應(yīng)用實(shí)施環(huán)境機(jī)房學(xué)時2任務(wù)描述【案例3】敲入如圖7-9所示代碼，嘗試屬性選擇器的作用。任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。任務(wù)實(shí)施【案例3】敲入如圖7-9所示代碼，嘗試屬性選擇器的作用。圖7-9屬性選擇器代碼運(yùn)行后的效果如圖7-10所示。圖7-10預(yù)覽效果任務(wù)檢測學(xué)習(xí)效果評價表被考評人（組）：考評人：日期：評分項(xiàng)目過程表現(xiàn)分值得分[屬性]寫法代碼書寫正確、規(guī)范，樣式效果生效。20[屬性="值"]寫法代碼書寫正確、規(guī)范，樣式效果生效。20[屬性^="值"]寫法代碼書寫正確、規(guī)范，樣式效果生效。20[屬性$="值"]寫法代碼書寫正確、規(guī)范，樣式效果生效。20[屬性*="值"]寫法代碼書寫正確、規(guī)范，樣式效果生效。20總分說明：評分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。

教學(xué)單元7.3.3偽類選擇器教學(xué)內(nèi)容偽類選擇器的應(yīng)用學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時2學(xué)時學(xué)習(xí)目標(biāo)知識目標(biāo)：了解偽類選擇器的應(yīng)用場景及種類。:Hover選擇器的應(yīng)用:nth-of-type(n)選擇器和:nth-last-of-type()選擇器的應(yīng)用。能力目標(biāo)：具備正確使用Hover偽類選擇器，并合理定義狀態(tài)的能力。具備正確使用nth-of-type(n)和:nth-last-of-type()選擇器的能力。素養(yǎng)目標(biāo)：（1）了解本章成語的出處，理解成語含義與知識點(diǎn)理解的結(jié)合。（2）通過引入宋詞的案例，鼓勵學(xué)生跨學(xué)科學(xué)習(xí)，將程序設(shè)計與其他學(xué)科知識相結(jié)合，拓寬視野，提升綜合素質(zhì)。學(xué)習(xí)重點(diǎn)英文命名文件學(xué)習(xí)難點(diǎn)部分英文單詞的記憶教學(xué)方法講授法、演示法、任務(wù)驅(qū)動法教學(xué)過程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時間（分鐘）復(fù)習(xí)屬性選擇器的應(yīng)用場景。列舉一下可以應(yīng)用屬性選擇器的標(biāo)簽。3引入偽類選擇器，是一種特殊的選擇器，它用來選擇元素在特定狀態(tài)下的樣式。這些特定狀態(tài)并不是由文檔結(jié)構(gòu)決定的，而是由用戶行為（如點(diǎn)擊、懸停）或元素的狀態(tài)（如被訪問、被禁用）來定義的。2任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識講授7.3.3偽類選擇器 偽類選擇器包含數(shù)十種選擇器，大體包括以下三大類：結(jié)構(gòu)性偽類選擇器結(jié)構(gòu)性偽類選擇器主要用于選取DOM樹中特定位置的元素。狀態(tài)偽類選擇器狀態(tài)偽類選擇器主要用于選取具有特定交互狀態(tài)的元素。表單相關(guān)偽類選擇器表單相關(guān)偽類選擇器主要用于選取與表單相關(guān)的特定元素。知識點(diǎn)：知識點(diǎn)：偽類選擇器特點(diǎn)記憶關(guān)鍵詞：千變?nèi)f化關(guān)鍵詞解析： 偽類選擇器可以根據(jù)不同的條件和狀態(tài)來選擇元素，這些條件和狀態(tài)可以是動態(tài)的、交互的，甚至是基于文檔結(jié)構(gòu)的。因此，偽類選擇器在CSS中的應(yīng)用就像千變?nèi)f化的魔法，能夠根據(jù)不同的場景和需求，以靈活多變的方式為元素應(yīng)用樣式。成語出處： 《列子·周穆王》：“乘虛不墜，觸實(shí)不硋，千變?nèi)f化，不可窮極?！?千變?nèi)f化——比喻變化很多。 接下來，因篇幅、使用頻率等原因，我們只需要把握以下幾種常見的偽類選擇器。: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對應(yīng)標(biāo)簽選擇器中設(shè)置對應(yīng)屬性就可以達(dá)到現(xiàn)行的主流效果。【教師演示、講解】案例4——設(shè)計如圖7-11所示的導(dǎo)航條的級聯(lián)菜單出現(xiàn)效果?！緦W(xué)生練習(xí)】:nth-of-type(n)選擇器和:nth-last-of-type()

選擇器:nth-of-type(n)選擇器匹配“同類型中的第n個同級兄弟元素”。:nth-last-of-type(n)選擇器匹配“同類型中的倒數(shù)第n個同級兄弟元素”。括號內(nèi)的數(shù)字n也可以采用odd、even關(guān)鍵字，分別指的是奇數(shù)、偶數(shù)位置?！窘處熝菔?、講解】案例5——完成如圖7-14所示的文字效果。【學(xué)生練習(xí)】15任務(wù)實(shí)施【案例4】設(shè)計如圖7-11所示的導(dǎo)航條的級聯(lián)菜單出現(xiàn)效果。圖7-11級聯(lián)菜單交互效果（1）編寫如圖7-12所示的HTML代碼：圖7-12HTML代碼（2）完成對應(yīng)的CSS代碼，如圖7-13所示。圖7-13CSS代碼（3）保存文件，在瀏覽器中運(yùn)行，測試光標(biāo)滑過時的效果?！景咐?】完成如圖7-14所示的文字效果。圖7-14樣式效果對應(yīng)的HTML和CSS代碼如圖7-15所示。圖7-15HTML及CSS代碼55知識或技能拓展無0任務(wù)總結(jié)通過本課的學(xué)習(xí)：（1）了解偽類選擇器的應(yīng)用場景及種類。（2）掌握:Hover選擇器的應(yīng)用（3）掌握:nth-of-type(n)選擇器和:nth-last-of-type()選擇器的應(yīng)用。（4）通過引入宋詞的案例，鼓勵學(xué)生跨學(xué)科學(xué)習(xí)，將程序設(shè)計與其他學(xué)科知識相結(jié)合，拓寬視野，提升綜合素質(zhì)。3課后作業(yè)

任務(wù)單教學(xué)單元7.3.3偽類選擇器教學(xué)內(nèi)容偽類選擇器的應(yīng)用實(shí)施環(huán)境機(jī)房學(xué)時2任務(wù)描述【案例4】設(shè)計如圖7-11所示的導(dǎo)航條的級聯(lián)菜單出現(xiàn)效果。【案例5】完成如圖7-14所示的文字效果。任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。任務(wù)實(shí)施【案例4】設(shè)計如圖7-11所示的導(dǎo)航條的級聯(lián)菜單出現(xiàn)效果。圖7-11級聯(lián)菜單交互效果（1）編寫如圖7-12所示的HTML代碼：圖7-12HTML代碼（2）完成對應(yīng)的CSS代碼，如圖7-13所示。圖7-13CSS代碼（3）保存文件，在瀏覽器中運(yùn)行，測試光標(biāo)滑過時的效果?！景咐?】完成如圖7-14所示的文字效果。圖7-14樣式效果對應(yīng)的HTML和CSS代碼如圖7-15所示。圖7-15HTML及CSS代碼任務(wù)檢測學(xué)習(xí)效果評價表被考評人（組）：考評人：日期：評分項(xiàng)目過程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。10練習(xí)1級聯(lián)菜單對應(yīng)的容器結(jié)構(gòu)正確20添加hover選擇器后，交互效果達(dá)到預(yù)期。30練習(xí)2nth-of-type(n)選擇器定義正確20nth-last-of-type()選擇器定義正確20總分說明：評分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。

教學(xué)單元7.3.3偽類選擇器教學(xué)內(nèi)容偽類選擇器的應(yīng)用學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時2學(xué)時學(xué)習(xí)目標(biāo)知識目標(biāo)：（1）:first-child選擇器與:last-child選擇器的區(qū)別。（2）:nth-child(n)和:nth-last-child(n)選擇器的區(qū)別。（3）理解last字眼在選擇器中所起的作用。能力目標(biāo)：具備應(yīng)用:first-child選擇器與:last-child選擇器完成對應(yīng)案例的能力。具備應(yīng)用:nth-child(n)和:nth-last-child(n)選擇器完成對應(yīng)案例的能力。素養(yǎng)目標(biāo)：（1）了解本章成語的出處，理解成語含義與知識點(diǎn)理解的結(jié)合。（2）通過類比思維，加強(qiáng)對選擇器的認(rèn)識，提升自身的思維能力。學(xué)習(xí)重點(diǎn):first-child和:last-child選擇器，:nth-child(n)和:nth-last-child(n)選擇器學(xué)習(xí)難點(diǎn)理解并熟記這四種選擇器的應(yīng)用場合。教學(xué)方法講授法、演示法、任務(wù)驅(qū)動法教學(xué)過程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時間（分鐘）復(fù)習(xí)相鄰兄弟選擇器與兄弟選擇器的區(qū)別。4引入今天了解其他常見的偽類選擇器。1任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識講授:first-child選擇器與:last-child選擇器:first-child是css中的一個選擇器，其作用是用于選擇它的父元素中的第一個子元素。用法示例：p:first-child{……}:last-child選擇器用來匹配父元素中最后一個子元素。單是從字面上看起來挺容易理解的，但實(shí)際隱藏了另外一個條件“這第一個子元素剛好是本身”?！窘處熝菔?、講解】案例6——《江城子·密州出獵》【學(xué)生練習(xí)】:nth-child(n)和:nth-last-child(n)選擇器:nth-child(n)選擇器匹配“父元素的第n個子元素，不論元素的類型”。:nth-last-child(n)選擇器匹配“父元素的倒數(shù)第n個子元素，不論元素的類型”。注意這里說的“不論元素的類型”指的是“任何類型的元素都要納入n的計數(shù)內(nèi)”，但不是說“任何類型的元素都可以相應(yīng)你的選擇器”。這兩種選擇器同樣也可以擁有odd、even關(guān)鍵字?！窘處熝菔尽⒅v解】案例7——如圖7-18所示的代碼，然后分析出現(xiàn)的預(yù)覽效果。同時，分發(fā)給學(xué)生對應(yīng)詩詞文字?！緦W(xué)生練習(xí)】25任務(wù)實(shí)施【案例6】打開上個《江城子·密州出獵》的練習(xí)，增加如圖7-16所示的代碼。圖7-16:first-child選擇器預(yù)覽后的效果如圖7-17所示。圖7-17預(yù)覽效果【案例7】敲入如圖7-18所示的代碼，然后分析出現(xiàn)的預(yù)覽效果。圖7-18HTML代碼及CSS代碼預(yù)覽的最終效果如圖7-19所示。圖7-19預(yù)覽效果45知識或技能拓展無0任務(wù)總結(jié)通過本課的學(xué)習(xí)：（1）:first-child選擇器與:last-child選擇器的區(qū)別。（2）:nth-child(n)和:nth-last-child(n)選擇器的區(qū)別。（3）理解last字眼在選擇器中所起的作用。（4）通過類比思維，加強(qiáng)對選擇器的認(rèn)識，提升自身的思維能力。3課后作業(yè)

任務(wù)單教學(xué)單元7.3.3偽類選擇器教學(xué)內(nèi)容偽類選擇器的應(yīng)用實(shí)施環(huán)境機(jī)房學(xué)時2任務(wù)描述【案例6】打開上個《江城子·密州出獵》的練習(xí)，增加如圖7-16所示的代碼?！景咐?】敲入如圖7-18所示的代碼，然后分析出現(xiàn)的預(yù)覽效果。任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。任務(wù)實(shí)施【案例6】打開上個《江城子·密州出獵》的練習(xí)，增加如圖7-16所示的代碼。圖7-16:first-child選擇器預(yù)覽后的效果如圖7-17所示。圖7-17預(yù)覽效果【案例7】敲入如圖7-18所示的代碼，然后分析出現(xiàn)的預(yù)覽效果。圖7-18HTML代碼及CSS代碼預(yù)覽的最終效果如圖7-19所示。圖7-19預(yù)覽效果任務(wù)檢測學(xué)習(xí)效果評價表被考評人（組）：考評人：日期：評分項(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總分說明：評分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。

教學(xué)單元7.3.4偽元素選擇器教學(xué)內(nèi)容偽元素選擇器的應(yīng)用學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時2學(xué)時學(xué)習(xí)目標(biāo)知識目標(biāo)：了解偽元素選擇器的應(yīng)用場景。掌握::before偽元素選擇器、::after偽元素選擇器的用法格式。能力目標(biāo)：具備使用::before偽元素選擇器、::after偽元素選擇器為目標(biāo)位置生成元素的能力。具備使用::before偽元素選擇器完成排行榜的項(xiàng)目列表圖標(biāo)的能力。素養(yǎng)目標(biāo)：了解本章成語的出處，理解成語含義與知識點(diǎn)理解的結(jié)合。通過了解排行榜時事，可以更加深入地了解中國的國情，包括政治、經(jīng)濟(jì)、文化等各個方面。這種了解有助于增強(qiáng)民族自豪感和愛國情懷，提高對國家發(fā)展的認(rèn)同感和責(zé)任感。學(xué)習(xí)重點(diǎn)::before偽元素選擇器、::after偽元素選擇器學(xué)習(xí)難點(diǎn)::before偽元素選擇器完成排行榜的項(xiàng)目列表圖標(biāo)教學(xué)方法講授法、演示法、任務(wù)驅(qū)動法教學(xué)過程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時間（分鐘）復(fù)習(xí):nth-child(n)和:nth-last-child(n)選擇器的區(qū)別。請舉例說明:nth-child(n)與:nth-of-type選擇器的區(qū)別。5引入偽元素選擇器是Web設(shè)計中一個非常有用的工具，?它允許開發(fā)者在不改變HTML結(jié)構(gòu)的情況下，?通過CSS為元素添加裝飾性內(nèi)容和視覺效果，?從而豐富網(wǎng)頁的視覺表現(xiàn)力和用戶體驗(yàn)。以下是一些具體的應(yīng)用場景：?添加裝飾性圖標(biāo)或符號。面包屑導(dǎo)航。在面包屑導(dǎo)航中，?可以使用偽元素來連接各個頁面之間的鏈接，?如使用"?"符號連接頁面，?使用"/"符號分隔頁面鏈接等。?創(chuàng)建裝飾性邊框或背景：?通過設(shè)置偽元素的樣式，?可以為其添加邊框、?背景色或其他視覺效果，?從而增強(qiáng)元素的視覺吸引力。?5任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識講授我們將介紹最常見的二種偽元素選擇器，分別為::before偽元素選擇器、::after偽元素選擇器。在早期的CSS規(guī)范中，偽元素選擇器使用單冒號（:）來表示，CSS3規(guī)范更新了語法，要求使用雙冒號（::）來表示偽元素選擇器。兩者的區(qū)別在于使用的單冒號（:）和雙冒號（::）。::before和:before是偽元素選擇器，用于在目標(biāo)元素的前面插入內(nèi)容。內(nèi)容（content）屬性可以為空，只為設(shè)置樣式。::after和:after用于在目標(biāo)元素的后面插入內(nèi)容。內(nèi)容（content）屬性也可以為空。用法示例：p::before{content:"臺詞";color:red;}p::after{content:"";display:block;width:30px;height:30px;}知識點(diǎn)：偽元素選擇器特點(diǎn)知識點(diǎn)：偽元素選擇器特點(diǎn)記憶關(guān)鍵詞：無中生有關(guān)鍵詞解析： ::before、::after偽元素選擇器可以在不影響html結(jié)構(gòu)的情況下，憑空添加一個元素，通過樣式中的content屬性賦予元素的內(nèi)容，照常設(shè)置其他css屬性即可?！皞巍币部梢岳斫獬伞耙粋€并不真實(shí)存在于html結(jié)構(gòu)”的元素。成語出處： 春秋·李耳《老子》：“天下萬物生于有，有生于無?！?無中生有——本來是道家的哲學(xué)思想，后來人們用它的字面意思，一般形容憑空捏造。☆思政解說：從學(xué)習(xí)手段來看，“無中生有”不僅是一種創(chuàng)造性的思維方式，更是一種積極的學(xué)習(xí)態(tài)度和問題解決策略。面對學(xué)習(xí)中的難題或挑戰(zhàn)，我們往往沒有現(xiàn)成的答案或方法。“無中生有”鼓勵我們跳出常規(guī)思維，嘗試從不同的角度或領(lǐng)域?qū)ふ异`感，比如將數(shù)學(xué)方法應(yīng)用于物理問題，或者從文學(xué)作品中尋找歷史事件的線索。這種跨領(lǐng)域的思考方式可以激發(fā)新的想法和解決方案。比如：初學(xué)英語時，許多人給單詞讀音標(biāo)記中文諧音字的方式，第一個嘗試這么做的人，是否憑空想出一種解決策略？比如：學(xué)網(wǎng)頁設(shè)計，許多人表示不會配色，不懂圖像怎么處理，其實(shí)身邊并不是缺乏素材，隨手一張圖片、課本插圖，甚至只有一張圖的情況下，我們也可以無限放大局部去顏色的對比與協(xié)調(diào)。當(dāng)手頭沒有資料，要從身邊的事物中獲取靈感及素材，這也是一種“無中生有”?！窘處熝菔?、講解】案例8——熱搜榜頁面效果。先講解::before偽類生成前面的數(shù)字序號?！緦W(xué)生練習(xí)】完成數(shù)字序號?！窘處熝菔?、講解】::after偽類生成后面的“沸”“熱”圖標(biāo)效果?！緦W(xué)生練習(xí)】完成“沸”“熱”圖標(biāo)效果。13任務(wù)實(shí)施【案例8】完成如圖7-20所示的熱搜榜版面效果。圖7-20熱搜榜版面效果☆思政講解：了解排行榜時事，可以更加深入地了解中國的國情，包括政治、經(jīng)濟(jì)、文化、體育等各個方面。這種了解有助于增強(qiáng)民族自豪感和愛國情懷，提高對國家發(fā)展的認(rèn)同感和責(zé)任感。（1）書寫對應(yīng)的HTML代碼，如圖7-21所示。圖7-21HTML代碼從HTML結(jié)構(gòu)來看，我們并沒有給各種圖標(biāo)預(yù)留有容器。（2）編寫對應(yīng)的CSS代碼，如圖7-22所示。圖7-22CSS代碼35知識或技能拓展7.5擴(kuò)展練習(xí)【練習(xí)1】打開溫氏集團(tuán)的新聞欄目頁/GroupNews/list.aspx，觀察如圖7-28所示的區(qū)域，先思考該區(qū)域的布局結(jié)構(gòu)。圖7-28光標(biāo)落在網(wǎng)頁中對應(yīng)的區(qū)域，右鍵菜單中選擇“審查元素”，直接進(jìn)入開發(fā)模式，元素面板如圖7-29所示。圖7-29元素面板該元素對應(yīng)的樣式面板如圖7-30所示。圖7-30樣式面板仔細(xì)看上面兩張截圖后思考以下問題：（1）在布局中，圖片區(qū)域、文字區(qū)域?qū)?yīng)使用的容器分別是什么？（2）從效果圖來看，“08202408”方框在圖片上方浮現(xiàn)，代碼位置卻在另外的<divclass="time">容器，基于什么原因采用這種結(jié)構(gòu)？（3）::after偽元素是為了添加什么對象？這個偽元素從哪幾個外部樣式表中調(diào)用了樣式？解決完上述問題后，嘗試模仿官網(wǎng)代碼來制作對應(yīng)的布局效果。15任務(wù)總結(jié)通過本課的學(xué)習(xí)：（1）了解偽元素選擇器的應(yīng)用場景。（2）掌握::before偽元素選擇器、::after偽元素選擇器的用法格式。（3）通過了解排行榜時事，可以更加深入地了解中國的國情，包括政治、經(jīng)濟(jì)、文化等各個方面。這種了解有助于增強(qiáng)民族自豪感和愛國情懷，提高對國家發(fā)展的認(rèn)同感和責(zé)任感。5課后作業(yè)

任務(wù)單教學(xué)單元7.3.4偽元素選擇器教學(xué)內(nèi)容偽元素選擇器的應(yīng)用實(shí)施環(huán)境機(jī)房學(xué)時2任務(wù)描述【案例8】完成如圖7-20所示的熱搜榜版面效果。任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。任務(wù)實(shí)施【案例8】完成如圖7-20所示的熱搜榜版面效果。圖7-20熱搜榜版面效果（1）書寫對應(yīng)的HTML代碼，如圖7-21所示。圖7-21HTML代碼從HTML結(jié)構(gòu)來看，我們并沒有給各種圖標(biāo)預(yù)留有容器。（2）編寫對應(yīng)的CSS代碼，如圖7-22所示。圖7-22CSS代碼任務(wù)檢測學(xué)習(xí)效果評價表被考評人（組）：考評人：日期：評分項(xiàng)目過程表現(xiàn)分值得分網(wǎng)站結(jié)構(gòu)文件及文件夾命名及位置正確。10Ul容器結(jié)構(gòu)及基本樣式結(jié)構(gòu)書寫正確，基本樣式正確。30::before偽元素所生成的樣式與效果一致。30::after偽元素所生成的樣式與效果一致。30總分說明：評分項(xiàng)目為任務(wù)實(shí)施中要求學(xué)生掌握的技能點(diǎn)。

教學(xué)單元7.4CSS過渡與動畫教學(xué)內(nèi)容過渡效果和@keyframes規(guī)則的應(yīng)用學(xué)習(xí)資源任務(wù)單、PPT、專題網(wǎng)站等。學(xué)時2學(xué)時學(xué)習(xí)目標(biāo)知識目標(biāo)：（1）理解CSS過渡與動畫的意義。（2）掌握transition屬性的書寫格式，理解速度曲線過渡參數(shù)。（3）掌握@keyframes規(guī)則的創(chuàng)建與應(yīng)用。能力目標(biāo)：（1）具備使用css過渡完成級聯(lián)菜單的交互效果的能力。（2）具備創(chuàng)建@keyframes規(guī)則完成級聯(lián)菜單動態(tài)效果的能力。素養(yǎng)目標(biāo)：（1）了解本章成語的出處，理解成語含義與知識點(diǎn)理解的結(jié)合。（2）鼓勵學(xué)生使用@keyframes規(guī)則創(chuàng)建獨(dú)特的動態(tài)效果，培養(yǎng)他們的創(chuàng)新意識和創(chuàng)造力。學(xué)習(xí)重點(diǎn)CSS過渡與動畫的意義，transition屬性的應(yīng)用，@keyframes規(guī)則的應(yīng)用學(xué)習(xí)難點(diǎn)速度曲線屬性，@keyframes規(guī)則的定義。教學(xué)方法講授法、演示法、任務(wù)驅(qū)動法教學(xué)過程教學(xué)環(huán)節(jié)學(xué)習(xí)內(nèi)容學(xué)習(xí)時間（分鐘）復(fù)習(xí)偽元素選擇器在頁面裝飾上起到的意義。::before偽元素中，能否不寫content屬性，倘若無內(nèi)容的情況先，應(yīng)該如何設(shè)置content屬性值？5引入CSS過渡與動畫在網(wǎng)頁設(shè)計中扮演著至關(guān)重要的角色，它們?yōu)榫W(wǎng)頁增添了動態(tài)效果，提升了用戶體驗(yàn)，并使得網(wǎng)頁界面更加生動和吸引人。以下是CSS過渡與動畫起到的具體意義：CSS過渡的意義：可以在用戶與網(wǎng)頁進(jìn)行交互時（如鼠標(biāo)懸停、點(diǎn)擊等）提供視覺上的反饋，使交互操作更加順滑和自然。使用CSS過渡可以簡化代碼，因?yàn)檫^渡效果是通過CSS屬性來控制的，而不需要使用JavaScript等編程語言來實(shí)現(xiàn)。CSS動畫的意義：可以包含多個步驟和關(guān)鍵幀。這使得網(wǎng)頁設(shè)計師能夠制作出更加生動和有趣的用戶界面。3任務(wù)準(zhǔn)備準(zhǔn)備任務(wù)單、教案、PPT。測試本機(jī)的網(wǎng)頁瀏覽器、Hbuilder軟件是否正常。分發(fā)案例及練習(xí)所需圖片、文字素材。2知識講授7.4.1過渡效果transitiontransition讀音——英[tr?n?z??n]之前我們在個別案例中使用了transition屬性產(chǎn)生過渡動態(tài)效果。它可以讓元素的某個屬性在一定的時間內(nèi)平滑地從一個值變化到另一個值。這種變化可以是顏色、大小、位置等任何可以改變的屬性。下面的代碼先建構(gòu)了一個100px*100px的紅色<div>元素。該元素樣式中為width屬性指定了過渡效果，持續(xù)時間為2秒；當(dāng)光標(biāo)浮在該元素上方時，該元素的width設(shè)置為300px，這就產(chǎn)生了width值變化的過程，也就激活了transition屬性，讓這個變化過程進(jìn)行對應(yīng)的動態(tài)效果。div{width:100px;height:100px;background:red;transition:width2s;}div:hover{width:300px;}如果hover狀態(tài)下除了width屬性外，還有若干個屬性值發(fā)生變化，我們也可以將transition:width2s;改寫為transition:all2s;這里的all就是指“產(chǎn)生變化的所有屬性”。其實(shí)這是一種簡寫形式，里面涉及到了若干個屬性，通常延遲屬性沒必要寫。 transition簡寫形式的用法示例：transition:屬性過渡持續(xù)時間速度曲線延遲;但個別屬性是不允許有過渡過程的，比如期待一個元素從不可見到慢慢可見，采用了display:none;狀態(tài)轉(zhuǎn)入display:block;，這實(shí)際是無法生效的。我們換一下思路，可以采用不透明度opacity:0;狀態(tài)轉(zhuǎn)入opacity:1;，或者采用位置偏移、增加父容器去響應(yīng)等等的方式。1.速度曲線屬性transition-timing-functiontransition-timing-function屬性可接受以下值：ease

-規(guī)定過渡效果，先緩慢地開始，然后加速，然后緩慢地結(jié)束（默認(rèn)）linear

-規(guī)定從開始到結(jié)束具有相同速度的過渡效果ease-in

-規(guī)定緩慢開始的過渡效果ease-out

-規(guī)定緩慢結(jié)束的過渡效果ease-in-out

-規(guī)定開始和結(jié)束較慢的過渡效果cubic-bezier(n,n,n,n)

-允許您在三次貝塞爾函數(shù)中定義自己的值延遲時間transition-delaytransition-delay屬性理解成動畫啟動之前有n秒的延遲?！窘處熝菔?、講解】案例9——子菜單出現(xiàn)過程設(shè)置過渡效果。【學(xué)生練習(xí)】7.4.2@keyframes規(guī)則keyframes讀音——[‘ki?‘fre?m]CSS3的?@keyframes規(guī)則用于創(chuàng)建動畫。允許你創(chuàng)建一個或多個關(guān)鍵幀，?每個關(guān)鍵幀可以設(shè)置不同的樣式，?從而在動畫過程中改變元素的樣式。?例如，?你可以定義一個動畫，?使得一個元素的顏色在動畫過程中從紅色直接跳轉(zhuǎn)成藍(lán)色，再由藍(lán)色變成綠色，最后變成黑色。?在@keyframes規(guī)則中，?你可以使用百分比來指定動畫的不同階段，?例如0%、?25%、?50%、?75%和100%等，?這些百分比表示動畫的不同階段，0％是開