国产在线观看h导航|又粗又大又硬又爽毛片|国产一级毛片在线不卡作|日本美女骚妇一区二区三区|国产高清一区二区在线观看|亚洲日韩AV不卡中文字幕|自偷自自拍亚洲综合精品蜜臀|国产精品亚洲欧美一级久久精品

合肥市高新區(qū)長江西路與科學(xué)大道交口5F創(chuàng)業(yè)園A座309
136 5560 1775

css屬性中class與id的區(qū)別

發(fā)表日期:2010-06-02 瀏覽次數(shù):3100次

     css屬性中class與id的區(qū)別,我在前面的文章中已經(jīng)講過了。但還是有新手對此非常迷茫,不知道什么時候該用id,什么時候該用class。這兩個選擇器讓新手左右為難。
   一、在web標(biāo)準(zhǔn)中是不容許重復(fù)id的,例如 div id="a"  不容許重復(fù)2次;而class所定義的是類,理論上可以無限重復(fù)。以根據(jù)需要多次引用。
   二、屬性的優(yōu)先級問題:id 的優(yōu)先級要高于class,合肥網(wǎng)站建設(shè)在下面的代碼中有示例說明。
   三、方便JS等客戶端腳本的引用,如果在頁面中要對某個對象進(jìn)行腳本操作,那么可以給他定義一個id,否則只能利用遍歷頁面元素加上指定特定屬性來找到它,這是相對浪費(fèi)時間資源,遠(yuǎn)遠(yuǎn)不如一個id來得簡單與快捷。
下面假設(shè)div的樣式名稱為main,如果屬性為id就是 #main ,如果屬性為class就是 .main

#main 定義的是id為"main"這個元素的樣式
.main 的意思是新建一個名為"main"的樣式
#main 只能定義id為"main"這個元素的樣式
.main 一但定義以后,可以讓其他的元素來調(diào)用,方法為class="main"

    用#定義css樣式,在調(diào)用時必須用id,用.定義css樣式,在調(diào)用時必須用class。用#定義的樣式,一般都是定義結(jié)構(gòu)框架,一些大的容器,且在同一個頁面只能出現(xiàn)一次;而且.定義的樣式,一般都是起修飾作用或多次重復(fù)的樣式。還一點(diǎn)就是在同一個層里同時出現(xiàn)id和class樣式,id更優(yōu)先于class。

    一個class是用來根據(jù)用戶定義的標(biāo)準(zhǔn)對一個或多個元素進(jìn)行定義的。打個比較恰當(dāng)?shù)谋确骄褪莿”荆阂粋€class可以定義劇本中每個人物的故事線,你可以通過css,javascript等來使用這個類。因此你可以在一個頁面上使用class="Frodo" ,class="Gandalf", class="Aragorn"來區(qū)分不同的故事線。還有一點(diǎn)非常重要的是你可以在一個文檔中使用任意次數(shù)的class。

    至于id,通常用于定義頁面上一個僅出現(xiàn)一次的標(biāo)記。在對頁面排版進(jìn)行結(jié)構(gòu)化布局時(比如說通常一個頁面都是由一個頁眉,一個報(bào)頭< masthead>,一個內(nèi)容區(qū)域和一個頁腳等組成),一般使用id比較理想,因?yàn)橐粋€id在一個文檔中只能被使用一次。而這些元素在同一頁面中很少會出現(xiàn)大于一次的情況。

要自己多動手寫css代碼,才能發(fā)現(xiàn)自己的不足.不能只看別人的,只抄別人的!

那么定義div應(yīng)該使用class還是id呢

    css實(shí)戰(zhàn):id是狙擊槍 class是雙刃劍 合則兩利分則兩敗

    想要做好網(wǎng)頁結(jié)構(gòu),id與class都是必須熟練掌握的,所謂“兩手抓,兩手都要硬”。id就象狙擊槍一樣,可以幫助我們精準(zhǔn)地定位要想要加載樣式的元素;而class則是俠客的佩劍,信手拈來更加輕盈靈便,兩者的結(jié)合能夠?qū)崿F(xiàn)結(jié)構(gòu)良好且表現(xiàn)豐富的頁面。

   然而現(xiàn)在有一種錯誤的觀點(diǎn),就是id完全可以用class來取代,事實(shí)上許多網(wǎng)頁源代碼也的確如此,打開來通篇class,找不到一個id。造成這種現(xiàn)象的理由有很多種,然而自table時代傳下來的根深蒂固的“class=css”的觀念才是本因。

   的確,class比id用途更廣更靈活,但也必須意識到,class對于構(gòu)建良好的網(wǎng)頁布局結(jié)構(gòu)遠(yuǎn)不如id有效。id的強(qiáng)制唯一性使得我們可以很容易通過id檢索到我們需要的任意模塊,而class則沒有這個優(yōu)勢。雖然我們可以為模塊定義唯一的class名,但前提是——只有制作者本人可以動網(wǎng)頁樣式。

   否則換一個稍微懶一些的伙計(jì),看到樣式相同便直接把前面的class拿來套用,其結(jié)果就是我們發(fā)現(xiàn)網(wǎng)頁里有十幾個模塊都叫做“gonggao”或者“xinwen”,以至于為了區(qū)分還不得不加上大量的html注釋,這樣的結(jié)果顯然并不是我們想要的。再者就是前面提到的,通過通用class所節(jié)省下來的代碼,又不得不在每個單獨(dú)定義的class中揮霍掉。


將文章分享到:

版權(quán)所有:啟邁科技-合肥網(wǎng)站建設(shè) 皖I(lǐng)CP備19009304號-1 皖公網(wǎng)安備 34010402702162號

網(wǎng)站建設(shè),網(wǎng)站設(shè)計(jì)公司啟邁科技,為眾多企業(yè)提供網(wǎng)站建設(shè),網(wǎng)站制作,響應(yīng)式網(wǎng)站設(shè)計(jì),手機(jī)網(wǎng)站建設(shè),微網(wǎng)站,模板建站,企業(yè)郵箱等一站式互聯(lián)網(wǎng)解決方案和建站服務(wù)10年。