用p CSS製作Xhtml網頁頁面時，常會用到class 和id來選擇調用CSS樣式屬性，那麼什麼時候該用class，什麼時候又用id，下面詳細瞭解CLASS與ID基本屬性及用法
我們平常在用p CSS製作Xhtml網頁頁面時，常會用到class 和id來選擇調用CSS樣式屬性。對學習CSS的新手來說class和id可能比較模糊，同時不知道什麼時候該用class，什麼時候又用id，以及它們用法與限制是怎麼樣的。接下來我們就來詳細瞭解CLASS與ID基本屬性及用法。
Class 在程式中稱“類”，同時在CSS中也書面語也叫“類”。在CSS樣式中以小寫“點”及“.”來命名如： .css5{屬性：屬性值;} ,而在html頁面裡則以class="css5" 來選擇調用,命名好的CSS又叫css選取器。如： .css5{屬性：屬性值;} 選取器在html調用為“<p class="css5">我是class例子</p> ”如果不知道怎麼引用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在頁面裡也只能出現一次，並且是唯一性。雖然可能我們才學p+CSS愛好者在一個頁面裡同時調用相同的ID多次但是仍然沒有出現頁面混亂錯誤，但是我們為了W3C及各個標準我們也要遵循ID在一個頁面裡唯一性。以免出現瀏覽器安全色問題。
p css 頁面中的ID是怎麼個用法呢？
通常我們在CSS樣式定義的時候 以“#”來開頭命名id名稱如：#css5{屬性:屬性值;} 這個也有點像class的定義，只是class是以小寫句號“.”開頭命名，而ID是以“#”好開頭定義。那id是怎麼個用法呢？ Css裡的ID用法與class用法一樣，只是把class換成id。如例子：在CSS樣式定義ID --- #css5{height:25px;width: 200px;} ,調用ID --- <p id="css5">我是ID例子</p>。
接下來我們來看下完整關於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>p CSS中CLASS與ID執行個體 - -p+CSS-www.pcss5.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> <p class="css5 css5_class">我在瀏覽器下瀏覽，內容背景將是白色</p> <p class="css5" id="css5_id">我在瀏覽器下瀏覽，內容背景將是紅色</p> </body> </html>
接下來我們分析一下以上執行個體：class="css5 css5_class" 怎麼是這樣的？這裡是相當於調用選擇了class類css5與css5_class 。class="css5" id="css5_id" 這裡同樣是選擇調用了class類 :css5和id :css5_id 。
本頁通過CSS執行個體與CLASS類和ID分別的講解，相信您能從此深刻認識和區分它們並且靈活。特別注意：在命名id和class類的時候特別要注意大小寫，ID和class是對大小寫非常敏感的，最好以英文開頭，不要用中文命名CSS類名。
以上就是本文的全部內容，希望對大家的學習有所協助，更多相關內容請關注topic.alibabacloud.com！
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
