CSS中的class與id區別及用法

時間 2019-11-11

標籤 css class 區別用法欄目 CSS 简体版

原文原文鏈接

咱們日常在用DIV CSS製做Xhtml網頁頁面時，常會用到class 和id來選擇調用CSS樣式屬性。對學習CSS的新手來講class和id可能比較模糊，同時不知道何時該用class，何時又用id，以及它們用法與限制是怎麼樣的。接下來咱們就來詳細瞭解CLASS與ID基本屬性及用法。css

Class 在程序中稱「類」，同時在CSS中也書面語也叫「類」。在CSS樣式中以小寫的「點」及「.」來命名如： .css5{屬性：屬性值;} ,而在html頁面裏則以class="css5" 來選擇調用,命名好的CSS又叫css選擇器。如： .css5{屬性：屬性值;} 選擇器在html調用爲「<div class="css5">我是class例子</div> 」若是不知道怎麼引用CSS，那就能夠了解下css引用。html

並且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實例：ui

  
 
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> spa 
 
  <html xmlns="http://www.w3.org/1999/xhtml"> code 
 
  <head> xml 
 
  <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> htm 
 
  <title>DIV CSS中CLASS與ID實例 - -DIV+CSS-www.divcss5.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>