PHP培訓(xùn)之CSS簡(jiǎn)介（二）

CSS基本選擇器

基本選擇器

Style屬性(行內(nèi)樣式)：直接寫在標(biāo)簽內(nèi)

如：u<p style=”font-size:12px; color:red;” >文字內(nèi)容</p>

標(biāo)簽選擇器

針對(duì)HTML的標(biāo)簽設(shè)置樣式，這個(gè)需要寫在<style>標(biāo)簽內(nèi)。(biaoqiancss.html)

ID選擇器

ID 選擇器可以為標(biāo)有特定 ID 的 HTML 元素指定特定的樣式。 根據(jù)元素ID來選擇元素，具有唯一性，這意味著同一id在同一文檔頁(yè)面中只能出現(xiàn)一次盡管你會(huì)發(fā)現(xiàn)即便你把幾個(gè)元素都命名成相同的id名字，css選擇器還是會(huì)把這些元素都選中應(yīng)用樣式，對(duì)于css選擇器，id屬性的唯一性似乎不存在。然而，對(duì)于js而言，它只會(huì)選擇具有相同id名字元素中的第一個(gè)。出于一個(gè)好的編程習(xí)慣，同一個(gè)id不要在頁(yè)面中出現(xiàn)第二次。

語(yǔ)法：以”#”開頭

使用方法：<p id=”id的名稱”></p>

類選擇器

語(yǔ)法：以”.”開頭，后面跟類名

使用方法：<p class=”類名”>內(nèi)容</p>

通配符選擇器

針對(duì)當(dāng)前頁(yè)面所用的標(biāo)簽應(yīng)用同樣的樣式(對(duì)標(biāo)簽的初始化)

*{CSS規(guī)則}

如：*{margin:0;padding:0;border:0;}

標(biāo)簽和類結(jié)合

如：p.test{color:red}=>針對(duì)p標(biāo)簽應(yīng)用類名為test的樣式

組合選擇器

多元素選擇器

多個(gè)標(biāo)簽或選擇器同時(shí)聲明。

如：h1,h2,ul,li{margin:0;padding:0;}

定義的方法：選擇器之間用逗號(hào)隔開

后代選擇器

后代選擇器也稱為包含選擇器，用來選擇特定元素或元素組的后代，將對(duì)父元素的選擇放在前面，對(duì)子元素的選擇放在后面，中間加一個(gè)空格分開。后代選擇器中的元素不僅僅只能有兩個(gè)，對(duì)于多層祖先后代關(guān)系，只要對(duì)祖先元素的選擇在后代元素之前、中間以空格分開即可。

例如：p空格span{color:red;}

子元素選擇器

請(qǐng)注意這個(gè)選擇器與后代選擇器的區(qū)別，子選擇器（child selector）僅是指它的直接后代，或者你可以理解為作用于子元素的第一個(gè)后代。而后代選擇器是作用于所有子后代元素。后代選擇器通過空格來進(jìn)行選擇，而子選擇器是通過“>”進(jìn)行選擇。

例如：p>span{color:red;}

只會(huì)針對(duì)p標(biāo)簽內(nèi)的第一級(jí)span標(biāo)簽有效

偽類選擇器

有時(shí)候還會(huì)需要用文檔以外的其他條件來應(yīng)用元素的樣式，比如鼠標(biāo)懸停等。這時(shí)候我們就需要用到偽類了。

如：<a href=”#”></a>

A:link鏈接的政策狀態(tài)

A:visited鼠標(biāo)單擊過的鏈接狀態(tài)

A:hover鼠標(biāo)放在鏈接上面的(懸停)狀態(tài)

A:active當(dāng)前正在訪問的鏈接狀態(tài)