2010-12-21
id:用來(lái)定義頁(yè)面中大的樣式,如欄目劃分,頂部,正文,底部等;用#top的形式來(lái)定義;
class:用來(lái)定義一些比較細(xì)節(jié)的樣式,如具體的一個(gè)菜單,一行文字等,用.text的形式來(lái)定義。
定義HTML中的標(biāo)簽,如ul,img,p等時(shí),直接寫(xiě):img{}
#main和.main有什么區(qū)別:
#main 定義的是ID為"main"這個(gè)元素的樣式
.main 的意思是新建一個(gè)名為"main"的樣式
#main 只能定義ID為"main"這個(gè)元素的樣式
.main 一但定義以后,可以讓其他的元素來(lái)調(diào)用,方法為class="main"
用#定義CSS樣式,在調(diào)用時(shí)必須用ID,用.定義CSS樣式,在調(diào)用時(shí)必須用CLASS。用
#定義的樣式,一般都是定義結(jié)構(gòu)框架,一些大的容器,且在同一個(gè)頁(yè)面只能出現(xiàn)一
次;而且.定義的樣式,一般都是起修飾作用或多次重復(fù)的樣式。還一點(diǎn)就是在同一
個(gè)層里同時(shí)出現(xiàn)ID和CLASS樣式,ID更優(yōu)先于CLASS。
一個(gè)Class是用來(lái)根據(jù)用戶(hù)定義的標(biāo)準(zhǔn)對(duì)一個(gè)或多個(gè)元素進(jìn)行定義的。打個(gè)比較恰當(dāng)
的比方就是劇本:一個(gè)Class可以定義劇本中每個(gè)人物的故事線(xiàn),你可以通過(guò)CSS,
javascript等來(lái)使用這個(gè)類(lèi)。因此你可以在一個(gè)頁(yè)面上使用class="Frodo" ,
class="Gandalf", class="Aragorn"來(lái)區(qū)分不同的故事線(xiàn)。還有一點(diǎn)非常重要的是
你可以在一個(gè)文檔中使用任意次數(shù)的Class。
至于 ID,通常用于定義頁(yè)面上一個(gè)僅出現(xiàn)一次的標(biāo)記。在對(duì)頁(yè)面排版進(jìn)行結(jié)構(gòu)化布
局時(shí)(比如說(shuō)通常一個(gè)頁(yè)面都是由一個(gè)頁(yè)眉,一個(gè)報(bào)頭< masthead>,一個(gè)內(nèi)容區(qū)域
和一個(gè)頁(yè)腳等組成),一般使用ID比較理想,因?yàn)橐粋€(gè)ID在一個(gè)文檔中只能被使用
一次。而這些元素在同一頁(yè)面中很少會(huì)出現(xiàn)大于一次的情況。
class是樣式組,用.style定義,class="style":
.style定義樣式組,可以被反復(fù)調(diào)用,就是說(shuō)你一個(gè)頁(yè)面里,可以有多個(gè)元素用同一個(gè)style;
ID是固定標(biāo)簽,用#style1定義,ID="style1"
#style1定義固定標(biāo)簽,用于定義一個(gè)特定的元素,每個(gè)頁(yè)面只能出現(xiàn)一次,不能反復(fù)調(diào)用。雖然現(xiàn)在有的網(wǎng)頁(yè)多次調(diào)用#style1,但那是不規(guī)范的,在某些瀏覽器中也會(huì)無(wú)法解讀造成頁(yè)面出錯(cuò)。
class可以在頁(yè)面里面重復(fù)使用,id由于在頁(yè)面里面只能出現(xiàn)一次,所以不能重復(fù)使用,所以盡量用class來(lái)寫(xiě),這樣能在頁(yè)面里面重復(fù)引用你寫(xiě)的css,減小工作量和代碼量。
這種情況盡量用id:頁(yè)面大的模塊里面,用id來(lái)區(qū)分不同的模塊。比如頁(yè)面里面有這樣的模塊:新新聞,推薦新聞等。就可以考慮用id來(lái)區(qū)分。
還有一點(diǎn),由于id是頁(yè)面中唯一的,更多的是定義來(lái)留給給頁(yè)面里面的 javascript用。
補(bǔ)充:class和id在頁(yè)面里面的使用方法:
class:
.footer{background:red;}
id:
#footer{background:red;}
定義class的css是用點(diǎn):“.”,如.footer
定義id的css是用井號(hào)“#”,如#footer
我建議做網(wǎng)站公司在做網(wǎng)站時(shí)盡量使用規(guī)范的CSS
下一條:常用的CSS技巧