溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“CSS中class與id的區別是什么及怎么使用”，在日常操作中，相信很多人在CSS中class與id的區別是什么及怎么使用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”CSS中class與id的區別是什么及怎么使用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！
Class 在程序中稱“類”，同時在CSS中也書面語也叫“類”。在CSS樣式中以小寫的“點”及“.”來命名如： .css5{屬性：屬性值;} ,而在html頁面里則以class="css5" 來選擇調用,命名好的CSS又叫css選擇器。如： .css5{屬性：屬性值;} 選擇器在html調用為“<div class="css5">我是class例子</div> ”如果不知道怎么引用CSS，那就可以了解下css引用。
而且class(類)在同一個html網頁頁面可以無數次的調用相同的class類，在這里例子里則可以在對應的網頁里可以無數次調用選擇“css5”。這也說明class一般是用來調用css中的預配制屬性的，比如說有一個預配制屬性為如這里的“.class01{屬性：屬性值;} ”，這樣就可以像調用函數一樣不用再一個網頁頁面里重復的配置一個“類”屬性，而只需要寫上一個class類選擇，就可以在同一個頁面里任何位置調用選擇具有相同的CLASS類。
ID是表示著標簽的身份，在JS腳本中會用到id，當JS要修改一個標簽的屬性時，JS會將id名作為該標簽的唯一標識進行操作。也就是說ID只是頁面元素的標識，供其他元素腳本等引用。假如你的頁面里出現了兩個ID那JS效果特性較出現邏輯錯誤不知道依據哪個ID來改變其標簽屬性。 在CSS里的ID不一定為JS而設置的，但是同樣ID在頁面里也只能出現一次，并且是唯一性。雖然可能我們才學DIV+CSS愛好者在一個頁面里同時調用相同的ID多次但是仍然沒有出現頁面混亂錯誤，但是我們為了W3C及各個標準我們也要遵循ID在一個頁面里唯一性。以免出現瀏覽器兼容問題。
Div css 頁面中的ID是怎么個用法呢？
通常我們在CSS樣式定義的時候 以“#”來開頭命名id名稱如：#css5{屬性:屬性值;} 這個也有點像class的定義，只是class是以小寫句號“.”開頭命名，而ID是以“#”好開頭定義。那id是怎么個用法呢？ Css里的ID用法與class用法一樣，只是把class換成id。如例子：在CSS樣式定義ID --- #css5{height:25px;width: 200px;} ,調用ID --- <div id="css5">我是ID例子</div>。
接下來我們來看下完整關于CLASS和ID實例：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>DIV CSS中CLASS與ID實例 - -DIV+CSS-www.億速云.com</title>
<style>
.css5{ width:100px; height:100px; border:1px solid #000; float:left; }
.css5_class{ background:#FFF;} /* 背景白色 */
#css5_id{ background:#FF0000;} /* 背景紅色 */
</style>
</head>
<body>
<div class="css5 css5_class">我在瀏覽器下瀏覽，內容背景將是白色</div>
<div class="css5" id="css5_id">我在瀏覽器下瀏覽，內容背景將是紅色</div>
</body>
</html>
接下來我們分析一下以上實例：class="css5 css5_class" 怎么是這樣的？這里是相當于調用選擇了class類css5與css5_class 。class="css5" id="css5_id" 這里同樣是選擇調用了class類 :css5和id :css5_id 。
到此，關于“CSS中class與id的區別是什么及怎么使用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
