CSS是英文(Cascading Style Sheets)的縮寫(xiě)祭玉,中文意為層疊樣式表抡四,是前端三大基本技術(shù)之一央串。其作用是對(duì)html起渲染和修飾的作用蚂踊。而其中以選擇器為基礎(chǔ)约谈,今天就為大家介紹一些基本選擇器。
基礎(chǔ)選擇器:
1.*:通配選擇器,遍歷文檔中的所有標(biāo)簽窗宇,無(wú)論你這
個(gè)標(biāo)簽有沒(méi)有寫(xiě)措伐,有沒(méi)有在文檔中出現(xiàn),對(duì)網(wǎng)頁(yè)性能有一定的影響
2.標(biāo)簽名選擇器:作用于一類標(biāo)簽
適用場(chǎng)景:body军俊,重置某類標(biāo)簽的默認(rèn)樣式如a標(biāo)簽h1等標(biāo)簽
3.群組選擇器:選擇器1侥加,選擇器2,選擇器3
4.類選擇器:.類名稱(類名:不要以數(shù)字開(kāi)頭 盡量要有意義 多個(gè)單詞建議使用_連接)
5.后代選擇器:選擇器1 選擇器2 選擇器3(選擇器1 2 3 為父子級(jí)關(guān)系)
CSS樣式引入
CSS樣式引入有三種方式:
1.行間樣式:行間樣式的優(yōu)缺點(diǎn)
優(yōu)點(diǎn):不會(huì)額外的產(chǎn)生請(qǐng)求
缺點(diǎn):1.容易產(chǎn)生重復(fù)的代碼粪躬,造成文檔體積變大
? ? ? ? ? ?2.不利于維護(hù)
? ? ? ? ? ?3.不符合結(jié)構(gòu)與樣式分離的規(guī)范
? ? ? ? ? 綜上所述:不建議使用行間樣式
2.外部樣式:外部引入css的優(yōu)缺點(diǎn):
優(yōu)點(diǎn):1.利于后期維護(hù)
? ? ? ? ? ?2.可以重復(fù)使用
? ? ? ? ? ?3.完全實(shí)現(xiàn)結(jié)構(gòu)與樣式的分離
缺點(diǎn):會(huì)產(chǎn)生額外的請(qǐng)求(但是我們可以借助工具抹平這個(gè)缺點(diǎn))
3內(nèi)部樣式:1.不會(huì)產(chǎn)生額外的請(qǐng)求
? ? ? ? ? ? ? ? ? ? ?2.初步實(shí)現(xiàn)結(jié)構(gòu)與樣式的分離
? ? ? ? ? ? ? ? ? ? ?3.適合單頁(yè)面網(wǎng)站應(yīng)用(移動(dòng)端應(yīng)用)
? ? ? ?缺點(diǎn):代碼復(fù)用不方便