新聞中心
CSS中的class與id有很多值得學(xué)習(xí)的地方,本文通過CSS實(shí)例與Class類和ID分別的講解,相信您能從此深刻認(rèn)識(shí)和區(qū)分它們并且靈活使用。

CSS中的class與id區(qū)別及用法
我們平常在用DIVCSS制作Xhtml網(wǎng)頁頁面時(shí),常會(huì)用到class和id來選擇調(diào)用CSS樣式屬性。對(duì)學(xué)習(xí)CSS的新手來說class和id可能比較模糊,同時(shí)不知道什么時(shí)候該用class,什么時(shí)候又用id,以及它們用法與限制是怎么樣的。接下來我們就來詳細(xì)了解CLASS與ID基本屬性及用法。
Class類
Class在程序中稱“類”,同時(shí)在CSS中也書面語也叫“類”。在CSS樣式中以小寫的“點(diǎn)”及“.”來命名如:.css5{屬性:屬性值;},而在html頁面里則以class="css5"來選擇調(diào)用,命名好的CSS又叫css選擇器。如:.css5{屬性:屬性值;}選擇器在html調(diào)用為“
而且class(類)在同一個(gè)html網(wǎng)頁頁面可以無數(shù)次的調(diào)用相同的class類,在這里例子里則可以在對(duì)應(yīng)的網(wǎng)頁里可以無數(shù)次調(diào)用選擇“css5”。這也說明class一般是用來調(diào)用css中的預(yù)配制屬性的,比如說有一個(gè)預(yù)配制屬性為如這里的“.class01{屬性:屬性值;}”,這樣就可以像調(diào)用函數(shù)一樣不用再一個(gè)網(wǎng)頁頁面里重復(fù)的配置一個(gè)“類”屬性,而只需要寫上一個(gè)class類選擇,就可以在同一個(gè)頁面里任何位置調(diào)用選擇具有相同的CLASS類。
ID
ID是表示著標(biāo)簽的身份,在JS腳本中會(huì)用到id,當(dāng)JS要修改一個(gè)標(biāo)簽的屬性時(shí),JS會(huì)將id名作為該標(biāo)簽的唯一標(biāo)識(shí)進(jìn)行操作。也就是說ID只是頁面元素的標(biāo)識(shí),供其他元素腳本等引用。假如你的頁面里出現(xiàn)了兩個(gè)ID那JS效果特性較出現(xiàn)邏輯錯(cuò)誤不知道依據(jù)哪個(gè)ID來改變其標(biāo)簽屬性。在CSS里的ID不一定為JS而設(shè)置的,但是同樣ID在頁面里也只能出現(xiàn)一次,并且是唯一性。雖然可能我們才學(xué)DIV+CSS愛好者在一個(gè)頁面里同時(shí)調(diào)用相同的ID多次但是仍然沒有出現(xiàn)頁面混亂錯(cuò)誤,但是我們?yōu)榱薟3C及各個(gè)標(biāo)準(zhǔn)我們也要遵循ID在一個(gè)頁面里唯一性。以免出現(xiàn)瀏覽器兼容問題。
Divcss頁面中的ID是怎么個(gè)用法呢?
通常我們?cè)贑SS樣式定義的時(shí)候以“#”來開頭命名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---
接下來我們來看下完整關(guān)于Class和ID實(shí)例:
- "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
DIVCSS中CLASS與ID實(shí)例--DIV+CSS-www.divcss5.com - .css5{width:100px;height:100px;border:1pxsolid#000;float:left;}
- .css5_class{background:#FFF;}//背景白色
- #css5_id{background:#FF0000;}//背景紅色
我在瀏覽器下瀏覽,內(nèi)容背景將是白色


咨詢
建站咨詢