CSS實戰(zhàn):id是狙擊槍class是雙刃劍合則兩利分則兩敗_Div+CSS教程
教程Tag:暫無Tag,歡迎添加,賺取U幣!
想要做好網(wǎng)頁結(jié)構(gòu),id與class都是必須熟練把握的,所謂“兩手抓,兩手都要硬”。ID就象狙擊槍一樣,可以幫助我們精準(zhǔn)地定位要想要加載樣式的元素;而class則是俠客的佩劍,信手拈來更加輕盈靈便,兩者的結(jié)合能夠?qū)崿F(xiàn)結(jié)構(gòu)良好且表現(xiàn)豐富的頁面。
然而現(xiàn)在有一種錯誤的觀點,就是id完全可以用class來取代,事實上許多網(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)頁樣式。
否則換一個稍微懶一些的伙計,看到樣式相同便直接把前面的class拿來套用,其結(jié)果就是我們發(fā)現(xiàn)網(wǎng)頁里有十幾個模塊都叫做“gonggao”或者“xinwen”,以至于為了區(qū)分還不得不加上大量的html注釋,這樣的結(jié)果顯然并不是我們想要的。再者就是前面提到的,通過通用class所節(jié)省下來的代碼,又不得不在每個單獨定義的class中揮霍掉。
id是狙擊槍,class是雙刃劍,合則兩利,分則兩敗!
然而現(xiàn)在有一種錯誤的觀點,就是id完全可以用class來取代,事實上許多網(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)頁樣式。
否則換一個稍微懶一些的伙計,看到樣式相同便直接把前面的class拿來套用,其結(jié)果就是我們發(fā)現(xiàn)網(wǎng)頁里有十幾個模塊都叫做“gonggao”或者“xinwen”,以至于為了區(qū)分還不得不加上大量的html注釋,這樣的結(jié)果顯然并不是我們想要的。再者就是前面提到的,通過通用class所節(jié)省下來的代碼,又不得不在每個單獨定義的class中揮霍掉。
id是狙擊槍,class是雙刃劍,合則兩利,分則兩敗!
相關(guān)Div+CSS教程:
- DIV+CSS設(shè)計的誤區(qū)
- CSS基礎(chǔ):常用CSS英文字體介紹
- IE6和IE7中border邊框斷線現(xiàn)象
- border:none;與border:0;的有什么不同?
- div+css下js對聯(lián)廣告不隨屏幕滾動的解決方法
- HTML元素的ID和Name屬性的區(qū)別
- divcss教程:深入了解css的行高Line Height屬性
- CSS文檔流,塊級元素和內(nèi)聯(lián)元素
- 5個你該知道的CSS3新技術(shù)
- 用正則表達(dá)式替換a標(biāo)記href值
- 30個優(yōu)秀的CSS導(dǎo)航和按鈕設(shè)計教程
- css中px和em有什么區(qū)別
Div+CSS教程Rss訂閱Div+Css教程搜索
Div+CSS教程推薦
猜你也喜歡看這些
- DIV CSS布局入門示例(一)頁面布局與規(guī)劃
- CSS布局教程:用DIV CSS實現(xiàn)國內(nèi)經(jīng)典式三行兩列布局
- DIVCSS菜單:黑白灰?guī)в嘘幱靶Ч腃SS橫向菜單
- CSS實例:用fieldset、legend實現(xiàn)文字寫在邊線上的效果
- CSS實例教程:紅藍(lán)炫CSS橫向菜單
- DIVCSS布局教程:應(yīng)用ul、li實現(xiàn)表格形式
- 用css網(wǎng)站布局之十步實錄!(九)
- 一個無序列表UL鼠標(biāo)激活顯示背景色的實例
- Web標(biāo)準(zhǔn)實戰(zhàn)CSS網(wǎng)頁布局Google首頁
- CSS菜單實例:簡潔的效果火紅的圍城
- 相關(guān)鏈接:
- 教程說明:
Div+CSS教程-CSS實戰(zhàn):id是狙擊槍class是雙刃劍合則兩利分則兩敗
。