CSS中的class與id有很多值得學習的地方，本文通過CSS實例與Class類和ID分別的講解，相信您能從此深刻認識和區分它們並且靈活使用。
CSS中的class與id區別及用法
我們平常在用DIVCSS制作XHtml網頁頁面時，常會用到class和id來選擇調用CSS樣式屬性。對學習CSS的新手來說class和id可能比較模糊，同時不知道什麼時候該用class，什麼時候又用id，以及它們用法與限制是怎麼樣的。接下來我們就來詳細了解CLASS與ID基本屬性及用法。
Class類
Class在程序中稱“類”，同時在CSS中也書面語也叫“類”。在CSS樣式中以小寫的“點”及“.”來命名如：.css5{屬性：屬性值;},而在html頁面裡則以class="css5"來選擇調用,命名好的CSS又叫css選擇器。如：.CSS5{屬性：屬性值;}選擇器在Html調用為“<divclass="css5">我是class例子</div>”如果不知道怎麼引用CSS，那就可以了解下CSS引用。
而且class(類)在同一個Html網頁頁面可以無數次的調用相同的class類，在這裡例子裡則可以在對應的網頁裡可以無數次調用選擇“css5”。這也說明class一般是用來調用CSS中的預配制屬性的，比如說有一個預配制屬性為如這裡的“.class01{屬性：屬性值;}”，這樣就可以像調用函數一樣不用再一個網頁頁面裡重復的配置一個“類”屬性，而只需要寫上一個class類選擇，就可以在同一個頁面裡任何位置調用選擇具有相同的CLASS類。
ID
ID是表示著標簽的身份，在JS腳本中會用到id，當JS要修改一個標簽的屬性時，JS會將id名作為該標簽的唯一標識進行操作。也就是說ID只是頁面元素的標識，供其他元素腳本等引用。假如你的頁面裡出現了兩個ID那JS效果特性較出現邏輯錯誤不知道依據哪個ID來改變其標簽屬性。在CSS裡的ID不一定為JS而設置的，但是同樣ID在頁面裡也只能出現一次，並且是唯一性。雖然可能我們才學DIV+CSS愛好者在一個頁面裡同時調用相同的ID多次但是仍然沒有出現頁面混亂錯誤，但是我們為了W3C及各個標准我們也要遵循ID在一個頁面裡唯一性。以免出現浏覽器兼容問題。
DivCSS頁面中的ID是怎麼個用法呢？
通常我們在CSS樣式定義的時候以“#”來開頭命名id名稱如：#css5{屬性:屬性值;}這個也有點像class的定義，只是class是以小寫句號“.”開頭命名，而ID是以“#”好開頭定義。那id是怎麼個用法呢？Css裡的ID用法與class用法一樣，只是把class換成id。如例子：在CSS樣式定義ID---#css5{height:25px;width:200px;},調用ID---<divid="CSS5">我是ID例子</div>。
接下來我們來看下完整關於Class和ID實例：
- <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHtml1.0Transitional//EN"
- "http://www.w3.org/TR/xhtml1/DTD/xHtml1-transitional.dtd">
- <HtmlXMLnsHtmlXMLns="http://www.w3.org/1999/xHtml">
- <head>
- <metahttp-equivmetahttp-equiv="Content-Type"content="text/Html;charset=gb2312"/>
- <title>DIVCSS中CLASS與ID實例--DIV+CSS-www.divCSS5.com</title>
- <style>
- .CSS5{width:100px;height:100px;border:1pxsolid#000;float:left;}
- .CSS5_class{background:#FFF;}//背景白色
- #CSS5_id{background:#FF0000;}//背景紅色
- </style>
- </head>
- <body>
- <divclassdivclass="css5CSS5_class">我在浏覽器下浏覽，內容背景將是白色</div>
- <divclassdivclass="CSS5"id="CSS5_id">我在浏覽器下浏覽，內容背景將是紅色
- </div>
- </body>
- </Html>
接下來我們分析一下以上實例：class="css5css5_class"怎麼是這樣的？這裡是相當於調用選擇了class類css5與css5_class。class="css5"id="css5_id"這裡同樣是選擇調用了class類:css5和id:CSS5_id。
特別注意：
在命名id和class類的時候特別要注意大小寫，ID和class是對大小寫非常敏感的，最好以英文開頭，不要用中文命名CSS類名。
【編輯推薦】