上節課我們講了一下CSS通過什么方式去控制頁面,如果不記得,我來幫大家回憶一下,總共有四種方式行內方式、內嵌方式、鏈接方式、導入方式,大家通過這四種方式就可以實現CSS對HTML頁面樣式的控制,如果要讓這些樣式對HTML頁面中的元素實現一對一,一對多或者多對一的控制,這就需要用到CSS選擇器,HTML頁面中的元素就是通過CSS選擇器進行控制的。
CSS選擇器共有三種:標簽選擇器、ID選擇器、類選擇器。
為了后面的對選擇器的解釋更容易理解,在這里先打個比喻,如果把你所處的環境視為HTML頁面的話,環境里的每一個人則相當于HTML頁面內標簽元素,每個人都有一個ID(身份證),那么html中的每一個標簽也都有自己的ID,大家都知道ID是唯一的,不可能重復。
【標簽選擇器】
一個完整的HTML頁面是有很多不同的標簽組成,而標簽選擇器,則是決定哪些標簽采用相應的CSS樣式,(在大環境中你可能出于不同的位置,但是不管怎么樣,你總是穿著同一套衣服,這件衣服就是由標簽選擇器事先給你限定好的,不管走到哪里都是這身衣服)比如,在style.css文件中對p標簽樣式的聲明如下:
p{
font-size:12px;
background:#900;
color:090;
}
則頁面中所有p標簽的背景都是#900(紅色),文字大小均是12px,顏色為#090(綠色),這在后期維護中,如果想改變整個網站中p標簽背景的顏色,只需要修改background屬性就可以了,就這么容易!
【ID選擇器】
ID選擇器在某一個HTML頁面中只能使用一次(當然也可以用好幾次,不過就不符合W3C標準了,那頁面也就不是標準頁面嘍~,咱們的目的不就是為了做標準的頁面么,所以建議大家不要在同一個html頁面中多個標簽擁有共同的ID),就像在你所處的環境中,你只有一個ID(身份證),不可能重復!相信大家也能看出來,ID選擇器更具有針對性,如:
先給某個HTML頁面中的某個p標簽起個ID,代碼如下:
<p id="one">此處為p標簽內的文字</p>
在CSS中定義ID為one的p標簽的屬性,就需要用到#,代碼如下:
#one{
font-size:12px;
background:#900;
color:090;
}
這樣頁面中的某個p就會是CSS中定義的樣式。
【類選擇器】
這種選擇器更容易理解了,就是使頁面中的某些標簽(可以是不同的標簽)具有相同的樣式,就像國慶中某個方陣中,肯定都是不同的人,卻均穿紅色衣服,手中高舉花環,樣式都是一樣的,如果想讓這一類人都有共同的樣式,該怎么做呢~呵呵,和ID選擇器的用法類似,只不過把id換做class,如下:
<p class="one">此處為p標簽內的文字</p>
如果我還想讓div標簽也有相同的樣式,怎么辦呢?加上同樣的class就可以了,如下
新聞熱點
疑難解答