選擇器的種類

 

萬用選擇器(universal selector)

Ex:

* {padding : 0; margin: 0}

 

類型選擇器(type selector)

Ex:

body {color: white; background: red}

h1 {font-family: 華康粗圓體; font-size: 30px; color: blue}

後續選擇器(descendant selector)

Ex:

h1 { color : blue} // 類型選擇器h1,文字色彩為藍色

i {color: green} // 類型選擇器i,文字色彩為綠色

h1 i {color: red} // 後續選擇器hl i,文字色彩為紅色

 

類別選擇器(class selector)

命名格式為[*.XXX]或[.XXX],星號(*)可以省略不寫。

Ex:

.note1 { color : green}

class屬性為"note1"的HTML元件(可能不只一個)

Ex:

p.hotNews { font-family:華康粗圓體; font-size: 30px; color:maroon}

限制HTML元件的類型,即class屬性為"hotNews"的<p>標籤。

 

ID選擇器(ID selector)

命名格式為[*#XXX]或[#XXX},星號(*)可以省略不寫。

Ex:

#userIntro {color: green}

id屬性為"userIntro"的HTML元件(理論上是唯一)

Ex:

textarea#userIntro { color:green}

限制<textarea>的標籤,且id屬性為"userIntro"

 

CSS支援的度量單位如下:

度量單位 說明 度量單位 說明
px 像素(pixel) pt

點(1點 = 1/72英吋)

in 英吋(inch) pc pica(1pica = 1/6英吋)
cm 厘米(公分) em 大寫英文字母M的寬度
mm 毫米(公厘) ex 小寫英文子母x的高度

 

 

 

創作者介紹
創作者 Totui 的頭像
Totui

Totui

Totui 發表在 痞客邦 留言(0) 人氣()