福彩幸运武林开奖 ?
歡迎來到DIVCSS5查找CSS資料與學習DIV CSS布局技術!
您的位置:DIVCSS5首頁 > CSS入門 >

CSS中的class與id區別及用法

我們平常在用DIV CSS制作Xhtml網頁頁面時,常會用到class 和id來選擇調用CSS樣式屬性。對學習CSS的新手來說class和id可能比較模糊,同時不知道什么時候該用class,什么時候又用id,以及它們用法與限制是怎么樣的。接下來我們就來詳細了解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實例:

  1.  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
     "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
    > 
  2. <html xmlns="http://www.w3.org/1999/xhtml"> 
  3. <head> 
  4. <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> 
  5. <title>DIV CSS中CLASS與ID實例 - -DIV+CSS-www.mcowk.com.cn</title> 
  6. <style> 
  7. .css5{ width:100px; height:100px; border:1px solid #000; float:left; } 
  8. .css5_class{ background:#FFF;} /* 背景白色 */ 
  9. #css5_id{ background:#FF0000;} /* 背景紅色 */ 
  10. </style> 
  11. </head> 
  12. <body> 
  13. <div class="css5 css5_class">我在瀏覽器下瀏覽,內容背景將是白色</div>  
  14. <div class="css5" id="css5_id">我在瀏覽器下瀏覽,內容背景將是紅色</div>  
  15. </body> 
  16. </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類名。歡迎來到DIVCSS5希望本頁對你有幫助!  

相關閱讀
div id class

如需轉載,請注明文章出處和來源網址:http://www.mcowk.com.cn/rumen/r3.shtml

我要分享到:

必備CSS教程 Essential CSS Tutorials

必備HTML基礎教程 Essential HTML Tutorials

如對文章有任何疑問請提交到DIV CSS論壇,或有任何網頁制作CSS問題立即到CSS論壇發貼求解 或 直接DIVCSS5網頁頂部搜索遇到DIVCSS疑問。
CSS教程文章修訂日期:2010-05-10 14:02 原創:DIVCSS5
本文www.mcowk.com.cn DIVCSS5版權所有。

福彩幸运武林开奖