CSS樣式書(shū)寫(xiě)之選擇器詳解

2020-03-24 18:57:46

字體：大中小

供稿：網(wǎng)友

為了更多的朋友能夠更深入的學(xué)習(xí)了解CSS的使用，我們這里再次對(duì)其基礎(chǔ)知識(shí)進(jìn)行講解，本文詳解?html' target='_blank'>CSS樣式書(shū)寫(xiě)之選擇器。
CSS基本書(shū)寫(xiě)方法CSS的書(shū)寫(xiě)由三部分組成，選擇器、屬性和屬性值，寫(xiě)法：選擇器 { 屬性: 屬性值; }例如前面看到過(guò)的：h1 {color:red;font-size:14px;}其中h1就是選擇器，color和font-size是屬性，red和14px就是兩者各自的屬性值，屬性和屬性值之間要用冒號(hào)（“:”）連接，兩個(gè)屬性之間要以分號(hào)（“；”）隔開(kāi)。平時(shí)把它們寫(xiě)在.css文件里時(shí)為了可讀性和修改方便，最好分行寫(xiě)：
h1 {
color:red;
font-size:14px;
}CSS組合寫(xiě)法CSS也可以給多個(gè)選擇器附加相同的屬性和屬性值，只需要在選擇器間用逗號(hào)（“,”）隔開(kāi)就可以了。
h1,h2,h3,h4,h5,h6 {
color:red;
font-size:14px;
}
上面是將h1到h6標(biāo)題的字體變成14像素的紅體字。
派生選擇器派生選擇器也叫后代選擇器，顧名思義，它是處于一個(gè)已有的選擇器之下的。它是在已定義的樣式下既繼承原有多數(shù)樣式，再單獨(dú)定制一個(gè)或多個(gè)特殊樣式的選擇器。例如：
strong {
color: red;
}
h2 {
color: red;
}
h2 strong {
color: blue;
}
頁(yè)面代碼： p 一段文字 strong 紅色粗體字 /strong . /p
h2 這里也是紅體字 /h2
h2 這里是特殊定義的 strong 藍(lán)色粗體字 /strong . /h2 在上面的代碼中strong標(biāo)簽和h2標(biāo)簽被定義為紅色字體，所以代碼中前兩行內(nèi)容都被定義為紅色字體。
而第三行strong標(biāo)簽中的字體被定義為藍(lán)色字體，因?yàn)樵跇邮奖碇杏衕2 strong這樣的定義，它的含義是將位于h2標(biāo)簽內(nèi)的strong定義為藍(lán)色字體，這就是派生選擇器的作用。
CSS注釋為了將CSS代碼書(shū)寫(xiě)的更清晰，方便理解，易于以后修改，可以在CSS代碼中添加注釋。
注釋以“/*”為開(kāi)頭，以“*/”為結(jié)尾。h1 {
color:red;/*定義為紅色字體*/
font-size:14px;/*定義字體大小為14像素*/
}html教程

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請(qǐng)第一時(shí)間聯(lián)系我們修改或刪除，多謝。

上一篇：php使用gzip壓縮傳輸js和css文件的方法

下一篇：玩轉(zhuǎn)Dreamweaver 8：了解CSS層疊樣式表