本小節(jié)向大家介紹一下CSS布局中元素的分類與標(biāo)識，主要包括用class對元素進(jìn)行分類，利用id標(biāo)識元素兩大部分內(nèi)容，相信通過本文的學(xué)習(xí)你對class和id屬性的用法會有深刻的認(rèn)識。

成都創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站制作、做網(wǎng)站、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)新源,十多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18982081108

解析CSS布局中元素的分類與標(biāo)識（class和id）

有時你希望對特定元素或者特定一組元素應(yīng)用特殊的樣式。在這一課，我們將深入學(xué)習(xí)如何利用class和id來為所選元素指定屬性。

如何實現(xiàn)為網(wǎng)站上許多標(biāo)題中的某一個單獨(dú)應(yīng)用顏色？如何實現(xiàn)把網(wǎng)站上的鏈接分為不同的類，并對各類鏈接分別應(yīng)用不同的樣式？這只是本課將解決的諸多問題中的最具代表性的兩個問題。

用class對元素進(jìn)行分類

比方說，我們有兩個由鏈接組成的列表，它們分別是用于制造白葡萄酒和紅葡萄酒的葡萄。其HTML代碼如下：

以下是代碼片段：

 
 
 

  
  
  
制造白葡萄酒的葡萄：
  
  
  

  
  
  
雷司令（Riesling）
  
  
  
夏敦埃（Chardonnay）
  
  
  
白比諾（PinotBlanc）
  
  
  

  
  
  

  
  
  
制造紅葡萄酒的葡萄：
  
  
  

  
  
  
卡百內(nèi)索維農(nóng)
  
  
  
（CabernetSauvignon）
  
  
  
墨爾樂（Merlot）
  
  
  
黑比諾（PinotNoir）
  
  
  

  
  
  

 
 
 

現(xiàn)在，我們希望白葡萄酒的鏈接全部顯示為黃色，紅葡萄酒的鏈接全部顯示為紅色，其余的鏈接顯示為缺省的蘭色。

為了實現(xiàn)這一要求，我們將鏈接分為兩類。對鏈接的分類是通過為鏈接設(shè)置HTML屬性class實現(xiàn)的。

參加如下代碼：

以下是代碼片段：

 
 
 

  
  
  
制造白葡萄酒的葡萄：
  
  
  

  
  
  
雷司令（Riesling）
  
  
  
夏敦埃（Chardonnay）
  
  
  
白比諾（PinotBlanc）
  
  
  

  
  
  

  
  
  
制造紅葡萄酒的葡萄：
  
  
  

  
  
  
卡百內(nèi)索維農(nóng)
  
  
  
（CabernetSauvignon）
  
  
  
墨爾樂（Merlot）
  
  
  
黑比諾（PinotNoir）
  
  
  

  
  
  

 
 
 

 然后，我們就可以為白葡萄酒和紅葡萄酒的鏈接分別應(yīng)用不同的風(fēng)格了。

以下是代碼片段：

 
 
 

  
  
  
a{ 
  
  
  
color:blue; 
  
  
  
} 
  
  
  
a.whitewine{ 
  
  
  
color:#FFBB00; 
  
  
  
} 
  
  
  
a.redwine{ 
  
  
  
color:#800000; 
  
  
  
} 
  
  
  

 
 
 

如上例所示，你可以通過在樣式表里利用.classname來為屬于某一類的元素定義CSS屬性。#p#

利用id標(biāo)識元素

除了可以對元素進(jìn)行分類以外，你還可以標(biāo)識單個元素。這是通過HTML屬性id實現(xiàn)的。

HTML屬性id的特別之處在于，在同一HTML文檔中不能有兩個具有相同id值的元素。文檔中的每個id值都必須是唯一的。在其他情況下，你應(yīng)該使用class屬性。下面，我們來看一個使用id屬性的例子：

以下是代碼片段：

 
 
 

  
  
  
第1章
  
  
  
... 
  
  
  
第1.1節(jié)
  
  
  
... 
  
  
  
第1.2節(jié)
  
  
  
... 
  
  
  
第2章
  
  
  
... 
  
  
  
第2.1節(jié)
  
  
  
... 
  
  
  
第2.1.1小節(jié)
  
  
  
... 
  
  
  

 
 
 

 上例是一個文章的各章節(jié)的標(biāo)題。我們自然可以為其中每一章節(jié)指定一個id（如下）：

以下是代碼片段：

 
 
 

  
  
  
第1章
  
  
  
... 
  
  
  
第1.1節(jié)
  
  
  
... 
  
  
  
第1.2節(jié)
  
  
  
... 
  
  
  
第2章
  
  
  
... 
  
  
  
第2.1節(jié)
  
  
  
... 
  
  
  
第2.1.1節(jié)
  
  
  
... 
  
  
  

 
 
 

 假如我們要求第1.2節(jié)顯示為紅色，那么CSS可以這樣寫：

以下是代碼片段：

 
 
 

  
  
  
#c1-2{ 
  
  
  
color:red; 
  
  
  
} 
  
  
  

 
 
 

如上例所示，你可以在樣式表里通過#id為特定元素定義CSS屬性。

文章標(biāo)題：CSS布局中元素的分類(class)和標(biāo)識(id)
網(wǎng)站網(wǎng)址：http://m.5511xx.com/article/dhdgdoj.html