第7章CSS進(jìn)階知識(shí)01學(xué)習(xí)目標(biāo)02課程思政目標(biāo)03知識(shí)點(diǎn)04本章練習(xí)PPT模板/moban/

學(xué)習(xí)目標(biāo)理解外部樣式表、內(nèi)部樣式表的特點(diǎn)；進(jìn)一步了解CSS樣式優(yōu)先級(jí)別；重點(diǎn)掌握關(guān)系選擇器、屬性選擇器、偽類選擇器、偽元素選擇器的用法；掌握過渡效果的屬性設(shè)置；掌握@keyframes規(guī)則以實(shí)現(xiàn)動(dòng)畫效果；進(jìn)一步強(qiáng)化設(shè)置樣式時(shí)能挑選恰當(dāng)?shù)倪x擇器的能力。第7章CSS進(jìn)階知識(shí)1通過本章學(xué)習(xí)，要求達(dá)到以下既定目標(biāo)：課程思政目標(biāo)2“疊矩重規(guī)”，強(qiáng)調(diào)如同樣式層疊一樣，專業(yè)知識(shí)也都是前后銜接，知識(shí)點(diǎn)有所重復(fù)介紹?！白映懈笜I(yè)”，非物質(zhì)文化遺產(chǎn)，是中華文明綿延傳承的生動(dòng)見證，許多非遺因?yàn)楹筝厽o(wú)人繼承導(dǎo)致消失在歷史長(zhǎng)河?！笆肿阒椤?，促進(jìn)各民族廣泛交往交流交融，促進(jìn)各民族在理想、信念、情感、文化上的團(tuán)結(jié)統(tǒng)一，守望相助、手足情深。民族關(guān)系處理不當(dāng)，容易產(chǎn)生如俄烏戰(zhàn)爭(zhēng)、盧旺達(dá)內(nèi)戰(zhàn)等局面?！坝械姆攀浮?，眾所周知，中國(guó)外交部的發(fā)言一直是有的放矢，比如關(guān)于新冠病毒溯源問題。第7章CSS進(jìn)階知識(shí)案例中的唐詩(shī)、宋詞、元曲，屬于中國(guó)五千年文化的瑰寶，提升對(duì)漢語(yǔ)文化的自豪感。了解本章成語(yǔ)的出處，理解成語(yǔ)含義與知識(shí)點(diǎn)理解的結(jié)合：3知識(shí)點(diǎn)6.1外部樣式表6.2進(jìn)一步了解CSS樣式優(yōu)先權(quán)6.3掌握更多的CSS選擇器6.4CSS過渡與動(dòng)畫第7章CSS進(jìn)階知識(shí)關(guān)系選擇器屬性選擇器偽類選擇器偽元素選擇器過渡效果transition@keyframes規(guī)則7.1外部樣式表3知識(shí)點(diǎn)7.1外部樣式表因?yàn)榘咐齼?nèi)容代碼量不大，前建議初學(xué)者先在文件內(nèi)部寫，等完全寫完樣式后，才采用外部css文件的寫法。一個(gè)復(fù)雜的網(wǎng)站，主頁(yè)、欄目頁(yè)、詳情頁(yè)有自己的css外部文件，但很多樣式可以在許多文件中共享使用，所以在實(shí)際網(wǎng)站中，往往一個(gè)HTML頁(yè)面鏈接了多個(gè)外部樣式表，如圖7-1所示。7.1外部樣式表3知識(shí)點(diǎn)知識(shí)點(diǎn)：外部樣式表的樣式復(fù)用記憶關(guān)鍵詞：疊矩重規(guī)關(guān)鍵詞解析：許多html文件使用到的重復(fù)的css樣式，采用外部樣式表存放，可謂“重規(guī)”。外部樣式表有若干個(gè)，當(dāng)一個(gè)html文件引用了多個(gè)外部樣式表，換言之就是有多個(gè)外部樣式的若干個(gè)樣式一起疊加在該文件中，可謂“疊矩”?！度龂?guó)志·蜀書·郤正傳》：“君臣協(xié)美于朝，黎庶欣戴于野，動(dòng)若重規(guī)，靜若迭矩?！悲B矩重規(guī)——意思是規(guī)與規(guī)相重，矩矩與相迭，度數(shù)相同，完全符合。原比喻動(dòng)靜合乎法度或上下相合，后形容模仿、重復(fù)。7.2進(jìn)一步了解CSS樣式優(yōu)先權(quán)3知識(shí)點(diǎn)7.2進(jìn)一步了解CSS樣式優(yōu)先權(quán)從樣式表代碼所在位置來(lái)說(shuō)：內(nèi)部樣式表比外部樣式表優(yōu)先。從樣式表文件內(nèi)部來(lái)說(shuō)：

!important>內(nèi)聯(lián)樣式（行內(nèi)樣式）>ID選擇器>類選擇器>元素選擇器（標(biāo)簽選擇器）7.3掌握更多的CSS選擇器4本章練習(xí)7.3掌握更多的CSS選擇器CSS包含了數(shù)十種選擇器，只要學(xué)習(xí)過程中我們碰到與我們所學(xué)知識(shí)不同的選擇器，屆時(shí)在百度搜索相關(guān)資料。7.3.1關(guān)系選擇器關(guān)系選擇器是能夠根據(jù)其它元素的關(guān)系選擇適合的元素選擇器。關(guān)系選擇器分為子元素選擇器、后代選擇器、相鄰兄弟選擇器、兄弟元素選擇器。后代選擇器我們?cè)谇懊娴恼鹿?jié)大量使用，這里就不論述了。3知識(shí)點(diǎn)1.子元素選擇器子元素選擇器作用是找到指定標(biāo)簽的直接子元素。兩個(gè)選擇器之間使用“>”號(hào)連接，中間不要留空格，否則選擇器無(wú)法生效。用法示例：

.footer>p{color:red;}先找到類名為".footer"的標(biāo)簽，然后在這個(gè)標(biāo)簽中查找所有名稱叫做"p"的兒子元素。7.3掌握更多的CSS選擇器3知識(shí)點(diǎn)知識(shí)點(diǎn)：子元素選擇器特點(diǎn)記憶關(guān)鍵詞：子承父業(yè)關(guān)鍵詞解析：子元素選擇器只會(huì)查找兒子，不會(huì)查找其他嵌套的標(biāo)簽，簡(jiǎn)單地說(shuō)，父親元素尋找的傳承目標(biāo)只能是兒子，不能是孫子、曾孫等隔代傳承。7.3掌握更多的CSS選擇器宋·釋道原《景德傳燈錄·利山和尚》：“僧問：不歷僧只獲法身，請(qǐng)師直指。師云：子承父業(yè)?！弊映懈笜I(yè)——意思是指兒子繼承父親的事業(yè)。3知識(shí)點(diǎn)【案例1】請(qǐng)嘗試如圖7-4所示的代碼，并在子元素選擇器的“>”前面添加空格后再預(yù)覽效果。7.3掌握更多的CSS選擇器3知識(shí)點(diǎn)2.相鄰兄弟選擇器相鄰兄弟選擇器可選擇緊接在另一元素后的元素，強(qiáng)調(diào)后者與前者是相鄰關(guān)系，且二者有相同父元素。可以理解成：兄長(zhǎng)+第一個(gè)弟弟。例如，如果要增加緊接在h1元素（哥哥）后緊接著出現(xiàn)的段落p元素（弟弟）的文字顏色，可以這樣寫：h1+p{color:red;}7.3掌握更多的CSS選擇器3知識(shí)點(diǎn)知識(shí)點(diǎn)：相鄰兄弟選擇器特點(diǎn)記憶關(guān)鍵詞：近水樓臺(tái)關(guān)鍵詞解析：兄弟元素選擇器只會(huì)選中與哥哥（“+”號(hào)前面的元素）緊挨著的弟弟，而且這個(gè)弟弟符合“+”號(hào)后方指定的類型。7.3掌握更多的CSS選擇器宋·俞文豹《清夜錄》：“范文正公鎮(zhèn)錢塘，兵官皆被薦，獨(dú)巡檢蘇麟不見錄，乃獻(xiàn)詩(shī)云：‘近水樓臺(tái)先得月，向陽(yáng)花木易逢春。’”近水樓臺(tái)——指靠近水邊的樓臺(tái)；比喻由于接近某人或者事物，而搶先得到某種利益或便利。3知識(shí)點(diǎn)3.兄弟元素選擇器兄弟元素選擇器是選擇當(dāng)前元素的所有同級(jí)元素。可以理解成：兄長(zhǎng)~所有弟弟。例如，如果要增加緊接在h1元素后出現(xiàn)的所有段落p元素的行高，可以這樣寫：h1~p{line-height:1.5em;} 7.3掌握更多的CSS選擇器3知識(shí)點(diǎn)知識(shí)點(diǎn)：兄弟元素選擇器特點(diǎn)記憶關(guān)鍵詞：手足之情關(guān)鍵詞解析：與相鄰兄弟選擇器不同，兄弟元素選擇器不僅關(guān)心緊挨著參考元素的下一個(gè)兄弟，還關(guān)心所有在參考元素之后的所有兄弟。正如二哥分糖果時(shí)，只要是他的任何弟弟妹妹，都會(huì)收到糖果，但這位哥哥并不會(huì)把糖果留給大哥和自己。7.3掌握更多的CSS選擇器唐·李華《吊古戰(zhàn)場(chǎng)文》：“誰(shuí)無(wú)兄弟，如足如手。”宋·蘇轍《為兄軾下獄上書》：“臣竊哀其志，不勝手足之情?！笔肿阒椤馑际潜扔餍值艿母星楹芎?。3知識(shí)點(diǎn)【案例2】使用兄弟元素選擇器完成如圖7-6所示的特定行的樣式。7.3掌握更多的CSS選擇器3知識(shí)點(diǎn)7.3.2屬性選擇器屬性選擇器是CSS中一種強(qiáng)大的選擇器，它允許我們根據(jù)元素的屬性及屬性值來(lái)選擇特定的元素，從而實(shí)現(xiàn)精準(zhǔn)的樣式控制。它主要的應(yīng)用場(chǎng)景：為表單字段設(shè)置統(tǒng)一樣式、模塊化CSS以避免命名沖突、標(biāo)識(shí)表單控件的不同交互狀態(tài)、定制多語(yǔ)言環(huán)境下的文本展示、響應(yīng)不同媒體查詢條件等。屬性選擇器寫法為[屬性]，用法示例：a[href]{color:red;}/*只對(duì)有href屬性的a元素應(yīng)用樣式*/7.3掌握更多的CSS選擇器3知識(shí)點(diǎn)知識(shí)點(diǎn)：屬性選擇器特點(diǎn)記憶關(guān)鍵詞：有的放矢關(guān)鍵詞解析：CSS屬性選擇器允許針對(duì)具有特定屬性或?qū)傩灾档脑貋?lái)應(yīng)用樣式。通俗理解成針對(duì)具有特定“屬性箭靶”的元素來(lái)“發(fā)射”樣式規(guī)則的。7.3掌握更多的CSS選擇器宋代葉適《水心別集十五終論》：“論立于此，若射之有的也，或百步之外，或五十步之外，的必先立，然后挾弓注矢以從之?！庇械姆攀浮馑际欠偶獙?duì)準(zhǔn)靶子。比喻說(shuō)話做事有針對(duì)性。3知識(shí)點(diǎn)常見的大部分用法如表7-1所示。7.3掌握更多的CSS選擇器寫法作用范例[屬性]選擇所有具有指定屬性的元素，不論其屬性值為何。選擇所有帶有'type'屬性的元素[type]{……}[屬性="值"]選擇屬性值完全等于指定值的元素。選擇href屬性值完全等于指定URL的元素[href=""]{……}[屬性^="值"]選擇屬性值以指定值開始的元素。選擇href屬性值以'https://'開始的元素[href^="https://"]{……}[屬性$="值"]選擇屬性值以指定值結(jié)束的元素。選擇href屬性值以'.pdf'結(jié)束的元素[href$='.pdf']{……}[屬性*="值"]選擇屬性值包含指定字符串的元素。選擇title屬性值包含'hello'字符串的元素[title*='hello']{……}3知識(shí)點(diǎn)【案例3】敲入如圖7-9所示代碼，嘗試屬性選擇器的作用。7.3掌握更多的CSS選擇器3知識(shí)點(diǎn)7.3.3偽類選擇器7.3掌握更多的CSS選擇器偽類選擇器，是一種特殊的選擇器，它用來(lái)選擇元素在特定狀態(tài)下的樣式。這些特定狀態(tài)并不是由文檔結(jié)構(gòu)決定的，而是由用戶行為（如點(diǎn)擊、懸停）或元素的狀態(tài)（如被訪問、被禁用）來(lái)定義的。偽類選擇器包含數(shù)十種選擇器，大體包括以下三大類：結(jié)構(gòu)性偽類選擇器結(jié)構(gòu)性偽類選擇器主要用于選取DOM樹中特定位置的元素。狀態(tài)偽類選擇器狀態(tài)偽類選擇器主要用于選取具有特定交互狀態(tài)的元素。表單相關(guān)偽類選擇器表單相關(guān)偽類選擇器主要用于選取與表單相關(guān)的特定元素。3知識(shí)點(diǎn)知識(shí)點(diǎn)：偽類選擇器特點(diǎn)記憶關(guān)鍵詞：千變?nèi)f化關(guān)鍵詞解析：偽類選擇器可以根據(jù)不同的條件和狀態(tài)來(lái)選擇元素，這些條件和狀態(tài)可以是動(dòng)態(tài)的、交互的，甚至是基于文檔結(jié)構(gòu)的。因此，偽類選擇器在CSS中的應(yīng)用就像千變?nèi)f化的魔法，能夠根據(jù)不同的場(chǎng)景和需求，以靈活多變的方式為元素應(yīng)用樣式。7.3掌握更多的CSS選擇器《列子·周穆王》：“乘虛不墜，觸實(shí)不硋，千變?nèi)f化，不可窮極?！鼻ё?nèi)f化——比喻變化很多。3知識(shí)點(diǎn)以下幾種常見的偽類選擇器。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)行的主流效果。7.3掌握更多的CSS選擇器【案例4】設(shè)計(jì)如圖7-11所示的導(dǎo)航條的級(jí)聯(lián)菜單出現(xiàn)效果。3知識(shí)點(diǎ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ù)位置。7.3掌握更多的CSS選擇器【案例5】完成如圖7-14所示的文字效果。3知識(shí)點(diǎn)3.:first-child選擇器與:last-child選擇器:first-child是css中的一個(gè)選擇器，其作用是用于選擇它的父元素中的第一個(gè)子元素。用法示例：p:first-child{……}:last-child選擇器用來(lái)匹配父元素中最后一個(gè)子元素。單是從字面上看起來(lái)挺容易理解的，但實(shí)際隱藏了另外一個(gè)條件“這第一個(gè)子元素剛好是本身”。比如：li:first-child選擇器，一是要求從li元素的父元素挑第一個(gè)子元素，二是要求這第一個(gè)子元素還得必須是li元素。7.3掌握更多的CSS選擇器【案例6】打開上個(gè)《江城子·密州出獵》的練習(xí)，增加如圖所示的代碼。3知識(shí)點(diǎn)4.:nth-child(n)和:nth-last-child(n)選擇器:nth-child(n)選擇器匹配“父元素的第n個(gè)子元素，不論元素的類型”。:nth-last-child(n)選擇器匹配“父元素的倒數(shù)第n個(gè)子元素，不論元素的類型”。注意這里說(shuō)的“不論元素的類型”指的是“任何類型的元素都要納入n的計(jì)數(shù)內(nèi)”，但不是說(shuō)“任何類型的元素都可以相應(yīng)你的選擇器”。這兩種選擇器同樣也可以擁有odd、even關(guān)鍵字。7.3掌握更多的CSS選擇器【案例7】敲入如圖7-18所示的代碼，然后分析出現(xiàn)的預(yù)覽效果。3知識(shí)點(diǎn)7.3掌握更多的CSS選擇器3知識(shí)點(diǎn)7.3.4偽元素選擇器7.3掌握更多的CSS選擇器偽元素選擇器是Web設(shè)計(jì)中一個(gè)非常有用的工具，它允許開發(fā)者在不改變HTML結(jié)構(gòu)的情況下，通過CSS為元素添加裝飾性內(nèi)容和視覺效果，從而豐富網(wǎng)頁(yè)的視覺表現(xiàn)力和用戶體驗(yàn)。以下是一些具體的應(yīng)用場(chǎng)景：添加裝飾性圖標(biāo)或符號(hào)。面包屑導(dǎo)航。在面包屑導(dǎo)航中，可以使用偽元素來(lái)連接各個(gè)頁(yè)面之間的鏈接，如使用"?"符號(hào)連接頁(yè)面，使用"/"符號(hào)分隔頁(yè)面鏈接等。創(chuàng)建裝飾性邊框或背景：通過設(shè)置偽元素的樣式，可以為其添加邊框、背景色或其他視覺效果，從而增強(qiáng)元素的視覺吸引力。3知識(shí)點(diǎn)7.3掌握更多的CSS選擇器我們將介紹最常見的二種偽元素選擇器，分別為::before偽元素選擇器、::after偽元素選擇器。在早期的CSS規(guī)范中，偽元素選擇器使用單冒號(hào)（:）來(lái)表示，CSS3規(guī)范更新了語(yǔ)法，要求使用雙冒號(hào)（::）來(lái)表示偽元素選擇器。兩者的區(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;}3知識(shí)點(diǎn)7.3掌握更多的CSS選擇器知識(shí)點(diǎn)：偽元素選擇器特點(diǎn)記憶關(guān)鍵詞：無(wú)中生有關(guān)鍵詞解析：::before、::after偽元素選擇器可以在不影響html結(jié)構(gòu)的情況下，憑空添加一個(gè)元素，通過樣式中的content屬性賦予元素的內(nèi)容，照常設(shè)置其他css屬性即可?！皞巍币部梢岳斫獬伞耙粋€(gè)并不真實(shí)存在于html結(jié)構(gòu)”的元素。春秋·李耳《老子》：“天下萬(wàn)物生于有，有生于無(wú)?！睙o(wú)中生有——本來(lái)是道家的哲學(xué)思想，后來(lái)人們用它的字面意思，一般形容憑空捏造。3知識(shí)點(diǎn)7.3掌握更多的CSS選擇器【案例8】完成如圖7-20所示的熱搜榜版面效果。3知識(shí)點(diǎn)7.4CSS過渡與動(dòng)畫7.4CSS過渡與動(dòng)畫7.4.1過渡效果transitiontransition讀音——英[tr?n?z??n]之前我們?cè)趥€(gè)別案例中使用了transition屬性產(chǎn)生過渡動(dòng)態(tài)效果。它可以讓元素的某個(gè)屬性在一定的時(shí)間內(nèi)平滑地從一個(gè)值變化到另一個(gè)值。這種變化可以是顏色、大小、位置等任何可以改變的屬性。下面的代碼先建構(gòu)了一個(gè)100px*100px的紅色<div>元素。該元素樣式中為width屬性指定了過渡效果，持續(xù)時(shí)間為2秒；當(dāng)光標(biāo)浮在該元素上方時(shí)，該元素的width設(shè)置為300px，這就產(chǎn)生了width值變化的過程，也就激活了transition屬性，讓這個(gè)變化過程進(jìn)行對(duì)應(yīng)的動(dòng)態(tài)效果。div{width:100px;height:100px;background:red;transition:width2s;}div:hover{width:300px;}3知識(shí)點(diǎn)如果hover狀態(tài)下除了width屬性外，還有若干個(gè)屬性值發(fā)生變化，我們也可以將transition:width2s;改寫為transition:all2s;這里的all就是指“產(chǎn)生變化的所有屬性”。其實(shí)這是一種簡(jiǎn)寫形式，里面涉及到了若干個(gè)屬性，通常延遲屬性沒必要寫。transition簡(jiǎn)寫形式的用法示例：transition:屬性過渡持續(xù)時(shí)間速度曲線延遲;但個(gè)別屬性是不允許有過渡過程的，比如期待一個(gè)元素從不可見到慢慢可見，采用了display:none;狀態(tài)轉(zhuǎn)入display:block;，這實(shí)際是無(wú)法生效的。我們換一下思路，可以采用不透明度opacity:0;狀態(tài)轉(zhuǎn)入opacity:1;，或者采用位置偏移、增加父容器去響應(yīng)等等的方式。7.4CSS過渡與動(dòng)畫3知識(shí)點(diǎn)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ù)中定義自己的值2.延遲時(shí)間transition-delaytransition-delay屬性理解成動(dòng)畫啟動(dòng)之前有自行設(shè)定秒數(shù)的延遲時(shí)長(zhǎng)。7.4CSS過渡與動(dòng)畫3知識(shí)點(diǎn)【案例9】為如圖7-23所示的子菜單出現(xiàn)過程設(shè)置過渡效果。7.4CSS過渡與動(dòng)畫3知識(shí)點(diǎn)7.4CSS過渡與動(dòng)畫7.4.2@keyframes規(guī)則keyframes讀音——[‘ki?‘fre?m]CSS3的@keyframes規(guī)則用于創(chuàng)建動(dòng)畫。允許你創(chuàng)建一個(gè)或多個(gè)關(guān)鍵幀，每個(gè)關(guān)鍵幀可以設(shè)置不同的樣式，從而在動(dòng)畫過程中改變?cè)氐臉邮?。例如，你可以定義一個(gè)動(dòng)畫，使得一個(gè)元素的顏色在動(dòng)畫過程中從紅色直接跳轉(zhuǎn)成藍(lán)色，再由藍(lán)色變成綠色，最后變成黑色。