振宇網頁設計公司
關於振宇 網站設計作品 網站排名 線上洽詢
CSS語法教學: CLASS及ID二者間的分辨與技巧
2010/12/29
CSS語法教學: CLASS及ID二者間的分辨與技巧

ID與CLASS的原則

據說W3C對於ID與CLASS的設定是ID具有唯一性,CLASS 具有普遍性。所以我們這裡的使用原則也是依據這一特性建立的。

ID是不能重複的,所以在 XHTML的結構中,大結構一定是用ID。比如標誌、導航、主體內容、版權。這些呢接我自己制定的規範命名為#logo , #nav , #content , #copyright 這些是雷打不動的命名。有人說佈局排版用ID,配色背景用CLASS,其實這是不正確的,ID與佈局排版沒有直接關係,CLASS與配色也不是對等的。

有人呢為了麻煩全都用ID或是全都用CLASS,全都用CLASS呢還有可理解,全都用ID就不正常了,這有悖ID唯一性。如果每個ID都不一樣,那非累死不可。我通過實踐總結的使用原則是:ID需要具有唯一性,並且儘量在週邊使用。而CLASS具有可重複性,並且儘量在結構內部使用。這樣做的好處是有利於網站代碼的後期維護與修改,這樣的做法就會讓所有的CLASS都成為ID的子級或是孫級。

你可以有兩個兒子但你能有兩個爸爸嗎,就是這個道理。在我們寫 CSS的時候可以寫成這樣 #father .child {…} 儘量不要讓Class包含ID,.father #child {…}如果寫成這樣顯得有點可笑 。當然這也不是鐵定的,特殊情況需要特殊對待嘛。但是通常情況下這種形式的必要性不大。 以上就是ID與CLASS使用原則,歸總起來一句話:ID是唯一的並是父級的,CLASS是可以重複的並是子級的。

定義格式:

形如id="aaa"定義的,在css中是這樣設置其樣式的: #aaa{ 樣式清單 }

而以class="bbb"形式定義的,在css中應該這樣設置其樣式: .bbb{ 樣式清單 }

用途:
class元素分2種,關聯的和獨立的.關聯的用於html的相關tag的,比如
h1.redone{color:red}
<h1 class= redone> 字體為紅色的 <h1>
<h1> 字體是黑色的 <h1>

獨立的元素可以用於所有的html元素的,比如
.classname {property:value}

id元素和獨 立的class功能相似,區別是id 是唯一的而且對於javascript操作html 元素有説明,
#idname {property: value}

概念定義: id是元素的名稱,可以供js或其它腳本程式來訪問該元素物件,而class是該元素的css類名。 id的值在整個當前網頁中應該是唯一的,即某一個元素定義了id="aaa",那麼這個網頁中其它的元素的id就不能定義成aaa,而class則可以。

若出現重複定義時,從優先順序來看是:

Style > ID > Class > 缺省的Html元素

一個Class是用來根據使用者定義的標準對一個或多個元素進行定義的。打個比較恰當的比方就是劇本:一個Class可以定義劇本中每個人物的故事線,你可以通過CSS,javascript等來使用這個類。因此你可以在一個頁面上使用class="Frodo" ,class="Gandalf", class="Aragorn"來區分不同的故事線。還有一點非常重要的是你可以在一個文檔中使用任意次數的Class。

至於 ID,通常用於定義頁面上一個僅出現一次的標記。在對頁面排版進行結構化佈局時(比如說通常一個頁面都是由一個頁眉,一個報頭< masthead>,一個內容區域和一個頁腳等組成),一般使用ID比較理想,因為一個ID在一個文檔中只能被使用一次。而這些元素在同一頁面中很少會出現大於一次的情況。

歸納成一句話就是:Class可以反復使用而ID在一個頁面中僅能被使用一次。有可能在很大部分瀏覽器中反覆使用同一個ID不會出現問題,但在標準上這絕對是錯誤的使用,而且很可能導致某些瀏覽器的現實問題。 在實際應用的時候,Class可能對文字的排版等比較有用,而ID則對宏觀佈局和設計放置各種元素較有用。

ID與CLASS的使用技巧

1. 子級的命名的包含父命名中的部分為開頭。這樣方便在編寫CSS時明確層次關係。

2. CLASS中的子級最好不用ID。當然特殊情況特殊對待。

3. CLASS的命名最好命名用大小寫合用。例 .newMovie 這樣的寫法與第一條結合起來使用明確關係最合適。要需要注意的是IE以外的瀏覽器對於大小寫是很敏感的。還有就是一定要以字母開頭。 其實上面講的都是一些大家都明白的內容,只是我撿了個漏先寫下來算是一個總結。希望大家對於ID與CLASS的使用提出自己的新觀點新思路。一起總結出最適合也最有效率的規範來。

最後更新 ( 2010/12/29 )
相關文章
更多網頁設計教學

網站設計 FAQ

網站架構圖及設計流程

More...

網頁設計包括哪些費用?

More...

網站建置需要多少時間?

More...
預算有限,想先體驗網路行銷的效果嗎?
More...
如何讓商機源源不絕而來?
More...
我需不需要自行架設主機呢?
More...
什麼是網域名稱(網址)?什麼是虛擬主機(網站空間)?
More...

RUS Website Design 瑞宇.台中網頁設計公司  Copyright © 2004 振宇網頁設計 All rights Reserved.  線上詢價
振宇首頁關於振宇設計作品線上洽詢常見問題新聞時事網頁設計教學友站連結網站地圖  免費交換連結
回到首頁 聯絡振宇