CSS中的class與id區(qū)別及用法
本文和大家重點(diǎn)討論一下CSS中的class與id區(qū)別及用法，對(duì)學(xué)習(xí)CSS的新手來(lái)說(shuō)class和id可能比較模糊，同時(shí)不知道什么時(shí)候該用class，什么時(shí)候又用id，以及它們用法與限制是怎么樣的。相信通過(guò)本節(jié)的介紹你對(duì)CSS中的class與id區(qū)別及用法一定會(huì)有明確的認(rèn)識(shí)。
CSS中的class與id區(qū)別及用法
我們平常在用DIV CSS制作Xhtml網(wǎng)頁(yè)頁(yè)面時(shí)，常會(huì)用到class和id來(lái)選擇調(diào)用CSS樣式屬性。對(duì)學(xué)習(xí)CSS的新手來(lái)說(shuō)class和id可能比較模糊，同時(shí)不知道什么時(shí)候該用class，什么時(shí)候又用id，以及它們用法與限制是怎么樣的。接下來(lái)我們就來(lái)詳細(xì)了解CLASS與ID基本屬性及用法。
◆Class在程序中稱“類”，同時(shí)在CSS中也書面語(yǔ)也叫“類”。在CSS樣式中以小寫的“點(diǎn)”及“.”來(lái)命名如：.css5{屬性：屬性值;},而在html頁(yè)面里則以class="css5"來(lái)選擇調(diào)用,命名好的CSS又叫css選擇器。如：.css5{屬性：屬性值;}選擇器在html調(diào)用為“<divclass="css5">我是class例子</div>”如果不知道怎么引用CSS，那就可以了解下css引用。
而且class(類)在同一個(gè)html網(wǎng)頁(yè)頁(yè)面可以無(wú)數(shù)次的調(diào)用相同的class類，在這里例子里則可以在對(duì)應(yīng)的網(wǎng)頁(yè)里可以無(wú)數(shù)次調(diào)用選擇“css5”。這也說(shuō)明class一般是用來(lái)調(diào)用css中的預(yù)配制屬性的，比如說(shuō)有一個(gè)預(yù)配制屬性為如這里的“.class01{屬性：屬性值;}”，這樣就可以像調(diào)用函數(shù)一樣不用再一個(gè)網(wǎng)頁(yè)頁(yè)面里重復(fù)的配置一個(gè)“類”屬性，而只需要寫上一個(gè)class類選擇，就可以在同一個(gè)頁(yè)面里任何位置調(diào)用選擇具有相同的CLASS類。
◆ID是表示著標(biāo)簽的身份，在JS腳本中會(huì)用到id，當(dāng)JS要修改一個(gè)標(biāo)簽的屬性時(shí)，JS會(huì)將id名作為該標(biāo)簽的唯一標(biāo)識(shí)進(jìn)行操作。也就是說(shuō)ID只是頁(yè)面元素的標(biāo)識(shí)，供其他元素腳本等引用。假如你的頁(yè)面里出現(xiàn)了兩個(gè)ID那JS效果特性較出現(xiàn)邏輯錯(cuò)誤不知道依據(jù)哪個(gè)ID來(lái)改變其標(biāo)簽屬性。在CSS里的ID不一定為JS而設(shè)置的，但是同樣ID在頁(yè)面里也只能出現(xiàn)一次，并且是唯一性。雖然可能我們才學(xué)DIV+CSS愛(ài)好者在一個(gè)頁(yè)面里同時(shí)調(diào)用相同的ID多次但是仍然沒(méi)有出現(xiàn)頁(yè)面混亂錯(cuò)誤，但是我們?yōu)榱薟3C及各個(gè)標(biāo)準(zhǔn)我們也要遵循ID在一個(gè)頁(yè)面里唯一性。以免出現(xiàn)瀏覽器兼容問(wèn)題。
Div CSS頁(yè)面中的ID是怎么個(gè)用法呢？
通常我們?cè)贑SS樣式定義的時(shí)候以“#”來(lái)開頭命名id名稱如：#css5{屬性:屬性值;}這個(gè)也有點(diǎn)像class的定義，只是class是以小寫句號(hào)“.”開頭命名，而ID是以“#”好開頭定義。那id是怎么個(gè)用法呢？Css里的ID用法與class用法一樣，只是把class換成id。如例子：在CSS樣式定義ID---#css5{height:25px;width:200px;},調(diào)用ID---<divid="css5">我是ID例子</div>。
接下來(lái)我們來(lái)看下完整關(guān)于CLASS和ID實(shí)例：
- <!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實(shí)例--DIV+CSS-www.divcss5.com</title>
- <style>
- .css5{width:100px;height:100px;border:1pxsolid#000;float:left;}
- copyrightwww.divcss5.comdivcss5
- .css5_class{background:#FFF;}//背景白色
- #css5_id{background:#FF0000;}//背景紅色
- </style>
- </head>
- <body>
- <divclassdivclass="css5css5_class">我在瀏覽器下瀏覽，內(nèi)容背景將是白色</div>
- <divclassdivclass="css5"id="css5_id">我在瀏覽器下瀏覽，內(nèi)容背景將是紅色</div>
- </body>
- </html>
接下來(lái)我們分析一下以上實(shí)例：class="css5css5_class"怎么是這樣的？這里是相當(dāng)于調(diào)用選擇了class類css5與css5_class。class="css5"id="css5_id"這里同樣是選擇調(diào)用了class類:css5和id:css5_id。
本頁(yè)通過(guò)CSS實(shí)例與CLASS類和ID分別的講解，相信您能從此深刻認(rèn)識(shí)和區(qū)分它們并且靈活。特別注意：在命名id和class類的時(shí)候特別要注意大小寫，ID和class是對(duì)大小寫非常敏感的，***以英文開頭，不要用中文命名CSS類名。歡迎來(lái)到DIVCSS5希望本頁(yè)對(duì)你有幫助！
【編輯推薦】
- DIV CSS編碼時(shí)必須注意的細(xì)節(jié)
- DIV+CSS網(wǎng)頁(yè)布局的五大特點(diǎn)
- DIV CSS隱藏內(nèi)容樣式方法詳解
- CSS兼容：解決IE6、IE7和IE8的兼容問(wèn)題妙招
- DIV CSS網(wǎng)頁(yè)布局需要掌握的八大技巧
