CSS入門教程:CSS選擇器
上節課我們講了一下CSS通過什么方式去控制頁面,如果不記得,我來幫大家回憶一下,總共有四種方式行內方式、內嵌方式、鏈接方式、導入方式,大家通過這四種方式就可以實現CSS對HTML頁面樣式的控制,如果要讓這些樣式對HTML頁面中的元素實現一對一,一對多或者多對一的控制,這就需要用到CSS選擇器,HTML頁面中的元素就是通過CSS選擇器進行控制的。
CSS選擇器共有三種:標簽選擇器、ID選擇器、類選擇器。
為了后面的對選擇器的解釋更容易理解,在這里先打個比喻,如果把你所處的環境視為HTML頁面的話,環境里的每一個人則相當于HTML頁面內標簽元素,每個人都有一個ID(身份證),那么html中的每一個標簽也都有自己的ID,大家都知道ID是唯一的,不可能重復。
【標簽選擇器】
一個完整的HTML頁面是有很多不同的標簽組成,而標簽選擇器,則是決定哪些標簽采用相應的CSS樣式,(在大環境中你可能出于不同的位置,但是不管怎么樣,你總是穿著同一套衣服,這件衣服就是由標簽選擇器事先給你限定好的,不管走到哪里都是這身衣服)比如,在style.css文件中對p標簽樣式的聲明如下:p{
則頁面中所有p標簽的背景都是#900(紅色),文字大小均是12px,顏色為#090(綠色),這在后期維護中,如果想改變整個網站中p標簽背景的顏色,只需要修改background屬性就可以了,就這么容易!
font-size:12px;
background:#900;
color:090;
}
【ID選擇器】
ID選擇器在某一個HTML頁面中只能使用一次(當然也可以用好幾次,不過就不符合W3C標準了,那頁面也就不是標準頁面嘍,咱們的目的不就是為了做標準的頁面么,所以建議大家不要在同一個html頁面中多個標簽擁有共同的ID),就像在你所處的環境中,你只有一個ID(身份證),不可能重復!相信大家也能看出來,ID選擇器更具有針對性,如:
先給某個HTML頁面中的某個p標簽起個ID,代碼如下:<p id="one">此處為p標簽內的文字</p>
在CSS中定義ID為one的p標簽的屬性,就需要用到#,代碼如下:#one{
這樣頁面中的某個p就會是CSS中定義的樣式。
font-size:12px;
background:#900;
color:090;
}
【類選擇器】
這種選擇器更容易理解了,就是使頁面中的某些標簽(可以是不同的標簽)具有相同的樣式,就像國慶中某個方陣中,肯定都是不同的人,卻均穿紅色衣服,手中高舉花環,樣式都是一樣的,如果想讓這一類人都有共同的樣式,該怎么做呢呵呵,和ID選擇器的用法類似,只不過把id換做class,如下:<p>此處為p標簽內的文字</p>
如果我還想讓div標簽也有相同的樣式,怎么辦呢?加上同樣的class就可以了,如下<div>此處為p標簽內的文字</div>
這樣頁面中凡是加上class="one"的標簽,樣式都是一樣的嘍CSS定義的時候和ID選擇器差不多,只不過把#換成.,如下.one{
補充:一個標簽可以有多個類選擇器的值,不同的值用空格分開,如:
font-size:12px;
background:#900;
color:090;
}<div>此處為p標簽內的文字</div>
這樣我們可以將多個樣式用到同一個標簽中,當然也可以,ID和class一塊用<div id="div1">此處為p標簽內的文字
</div>
【通用選擇器】
到這里,前三種基本的選擇器說完了,但是還需要給大家介紹一個CSS選擇器中功能最強大但是用的最少的一種選擇器“通用選擇器”*{此處為CSS代碼}
強大之處是因為他對父級中的所有HTML標簽進行樣式定義,可對具有共同樣式的標簽樣式進行定義(有點小學數學中的提取公因式),這樣可以大大精簡代碼;既然有這么強大的功能為什么是用的最少呢,同樣還是因為他的強大,他是對父級元素內的所有標簽進行定義,所以只要你定義了,那么父級里面的所有的標簽,甭管有沒有必要,也都相當于加上了通用選擇器里面的代碼了,能這么說大家不能夠完全理解,沒關系,我給大家舉個例子,請看下面<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
大家運行一下上面的例子,div1里面的兩個標簽是不是樣式一樣,這就是通用選擇器的強大之處,不管里面有多少個標簽都會將樣式加到所有標簽內,如果div1里面得所有的標簽都有一部分相同的CSS代碼,那么可以把這部分代碼提取出來,用通用選擇器來定義,這樣可以大大縮減代碼,但是如果div1里面只要有一個和其他元素沒有相同的代碼,就不能用通用選擇器來定義,這也就是CSS通用選擇器不靈活的一點。現在大家明白為什么通用選擇器是選擇器里面功能最強大的但又是用的最少的選擇器了吧呵呵
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>無標題文檔</title>
<style type="text/css">
<!--
#div1 *{
background:#eee;/*設置DIV1里面所有的元素背景均為灰色*/
color:#333;/*設置置DIV1里面所有的元素的字體顏色均為黑色*/
}
-->
</style>
</head>
<body>
<div id="div1">
<p>這里是p標簽區域</p>
<div>這里是a標簽區域</div>
</div>
<div id="div2">
<p>這里是p標簽區域</p>
<div>這里是a標簽區域</div>
</div>
</body>
</html>
對于通用選擇器還有一個不得不提的用法,就是為了保證作出的頁面能夠兼容多種瀏覽器,所以要對HTML內的所有的標簽進行重置,會將下面的代碼加到CSS文件的最頂端*{margin:0; padding:0;}
為什么要這么用呢,因為每種瀏覽器都自帶有CSS文件,如果一個頁面在瀏覽器加載頁面后,發現沒有CSS文件,那么瀏覽器就會自動調用它本身自帶的CSS文件,但是不同的瀏覽器自帶的CSS文件又都不一樣,對不同標簽定義的樣式不一樣,如果我們想讓做出的頁面能夠在不同的瀏覽器顯示出來的效果都是一樣的,那么我們就需要對對HTML標簽重置,就是上面的代碼了,但是這樣也有不好的地方,因為HTML4.01中有89個標簽,所以相當于在頁面加載CSS的時候,先對這89個標簽都加上了{margin:0; padding:0;},在這里我不建議大家這么做,因為89個標簽中需要重置的標簽是很少數,沒有必要將所有的標簽都重置,需要哪些標簽重置就讓哪些標簽重置就可以了,如下body,div,p,a,ul,li{margin:0; padding:0;}
如果還需要dl、dt、dd標簽重置,那就在上面加上就可以了,如下body,div,p,a,ul,li,dl,dt,dd{margin:0; padding:0;}
用到那些就寫那些,這點也可以看做衡量頁面重構師制作頁面水平的高低,以及是否專業的一個方面到這里大家更應該明白這句話“通用選擇器是功能最強大但是用的最少的選擇器”了吧_
OK!選擇器的內容我向大家應該都明白了,后面就繼續講解一下“選擇器的集體聲
明”和“選擇器的嵌套”
【選擇器的集體聲明】
在我們使用選擇器的時候,有些標簽樣式是一樣的,或者某些標簽都有共同的樣式屬性,我們可以將這些標簽集體聲明,不同的標簽用“,”分開,比如:
- h1,h2,h3,h4,h5,h6{color:#900;}
- #one,#three,.yellow{font-size:14px;}
#one{background:#ccc;}
#three{background:#ccc;}
.yellow{background:#ccc;}
和小學的提取公因式差不多,把共同的部分提取出來,這么做的好處,相同的部分共同定義,不同的部分單獨定義,保證風格統一,樣式修改靈活,這也是優化CSS代碼的一塊,要記住喲
【選擇器的嵌套】
選擇器也是可以嵌套的,如:
- #div1 p a{color:#900;}/*意思是在ID為div1
內的p標簽內的鏈接a標簽的文字顏色為紅色*/
這樣的好處就是不需要在單獨的為ID為div1的標簽內的p標簽內的a標簽單獨定義class選擇器或者ID選擇器,CSS代碼不就少了嘛同樣也是CSS代碼優化的一塊。
到這里,基本的選擇器說完了,但是還需要給大家介紹一個“通用選擇器”
- *{此處為CSS代碼}
好,這節課主要講解了三種CSS代碼選擇器、選擇器的聲明、選擇器的嵌套三塊知識,要掌握好,如果有不懂,可以留言。
Tag: 設計公司 網頁設計公司 廣告公司 網站設計 平面設計 互動媒體 網頁設計 Web design Website design design house 媒體公司 Iphone app 程式設計 Flash 網頁 Flash game 動畫設計 後期製作 網上商店 網上宣傳 網頁服務
