詳細(xì)了解CSS中的class與id區(qū)別及用法

2024-07-11 08:52:04

字體：大中小

供稿：網(wǎng)友

我們平常在用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)用為“<div class="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愛好者在一個(gè)頁(yè)面里同時(shí)調(diào)用相同的ID多次但是仍然沒有出現(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 --- <div id="css5">我是ID例子</div>。

接下來(lái)我們來(lái)看下完整關(guān)于CLASS和ID實(shí)例：

復(fù)制代碼

上一篇：css字體樣式(Font Style) 屬性

下一篇：Css設(shè)置img屬性讓圖片水平居中/居左/居右的寫法