基本CSS選擇器

 1、標記選擇器

       聲明哪些標記採用哪種CSS樣式。因此,每一種HTML標記的名稱都可以作爲相應的標記選擇器的名稱。例:

       

Code:
  1. <style>  
  2.     h1{  
  3.            color:red;  
  4.            font-size:25px;  
  5.     }  
  6. </style> 

2、類別選擇器     class selector

      class selector的名稱可以由用戶自定義。例:

  

Code:
  1. <style type="text/css">  
  2. .red{  
  3.   color:red;  
  4.   font-size:18px;  
  5. }  
  6. </style>  
  7.   
  8. <body>  
  9. <p class="red">.......</p>  
  10. </body>  

在HTML的標記中,還可以同時給一個標記運用多個class選擇器,從而將兩個類別的樣式風格同時運用在一個標記中。

Code:
  1. <h4 class="blue big">兩種class,同時blue和big</h4>  

3、ID選擇器

ID和CLASS的使用方法基本相同,不同的是ID選擇器只能在HTML頁面中使用一次,因此其針對性更強。

Code:
  1. <html>  
  2. <head>  
  3. <style type="text/css">  
  4. #bold{  
  5.   font-weight:bold;  
  6. }  
  7. </style>  
  8. </head>  
  9. <body>  
  10. <p id="blod">ID選擇器</p>  
  11. </body>  
  12. </html>  

將ID選擇器用於多個標記是錯誤的,因爲每個標記定義的id不只是CSS可以調用,javascript等其他腳本語言同樣可以調用。如函數getElementById()會出錯。

id selector不支持像class selector那樣的多風格同時使用,類似id="bold green"是完全錯誤的語法

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章