第八章：元素的分類與標(biāo)識(shí)（class和id）
第八章：元素的分類與標(biāo)識(shí)（class和id）
有時(shí)，你希望對(duì)特定元素或者特定一組元素應(yīng)用特殊的樣式。在這一課，我們將深入學(xué)習(xí)如何利用class和id來(lái)為所選元素指定屬性。
如何實(shí)現(xiàn)為網(wǎng)站上許多標(biāo)題中的某一個(gè)單獨(dú)應(yīng)用顏色？如何實(shí)現(xiàn)把網(wǎng)站上的鏈接分為不同的類，并對(duì)各類鏈接分別應(yīng)用不同的樣式？這只是本課將解決的.諸多問(wèn)題中的最具代表性的兩個(gè)問(wèn)題。
用class對(duì)元素進(jìn)行分類
比方說(shuō)，我們有兩個(gè)由鏈接組成的列表，它們分別是用于A地區(qū)和B地區(qū)的山峰。其HTML代碼如下：
現(xiàn)在，我們希望A地區(qū)山峰的鏈接全部顯示為黃色，B地區(qū)的山峰的鏈接全部顯示為紅色，其余的鏈接顯示為缺省的蘭色。
為了實(shí)現(xiàn)這一要求，我們將鏈接分為兩類。對(duì)鏈接的分類是通過(guò)為鏈接設(shè)置HTML屬性class實(shí)現(xiàn)的。
參加如下代碼：
<p>A地區(qū)的山峰：</p>
<ul>
<li><a href="a.htm" class="Amountain">黃山（Riesling）</a></li>
</ul>
<p>制造紅葡萄酒的葡萄：</p>
<ul>
<li><a href="b.htm" class="Bmountain">嵩山（Cabernet Sauvignon）</a></li>
</ul>
然后，我們就可以為A地區(qū)的山峰和B地區(qū)的山峰的鏈接分別應(yīng)用不同的風(fēng)格了。
a {
color: blue;
}
a. Amountain {
color: #FFBB00;
}
a. Bmountain {
color: #800000;
}
如上例所示，你可以通過(guò)在樣式表里利用.classname來(lái)為屬于某一類的元素定義CSS屬性。
利用id標(biāo)識(shí)元素
除了可以對(duì)元素進(jìn)行分類以外，你還可以標(biāo)識(shí)單個(gè)元素。這是通過(guò)HTML屬性id實(shí)現(xiàn)的。
HTML屬性id的特別之處在于，在同一HTML文檔中不能有兩個(gè)具有相同id值的元素。文檔中的每個(gè)id值都必須是唯一的。在其他情況下，你應(yīng)該使用class屬性。下面，我們來(lái)看一個(gè)使用id屬性的例子：
<h1>第1章</h1>
...
<h2>第1.1節(jié)</h2>
...
<h2>第1.2節(jié)</h2>
...
<h1>第2章</h1>
...
<h2>第2.1節(jié)</h2>
...
<h2>第
...
上例是一個(gè)文章的各章節(jié)的標(biāo)題。我們自然可以為其中每一章節(jié)指定一個(gè)id（如下）：
<h1 id="c1">第1章</h1>
...
<h2 id="c1-1">第1.1節(jié)</h2>
...
<h2 id="c1-2">第1.2節(jié)</h2>
...
<h1 id="c2">第2章</h1>
...
<h2 id="c2-1">第2.1節(jié)</h2>
...
<h3 id="c
...
假如我們要求第1.2節(jié)顯示為紅色，那么CSS可以這樣寫：
#c1-2 {
color: red;
}
如上例所示，你可以在樣式表里通過(guò)#id為特定元素定義CSS屬性。
小結(jié)
在這一課，我們學(xué)習(xí)了通過(guò)使用class和id為一類元素或特定元素指定CSS屬性。
在下一課，我們將詳細(xì)學(xué)習(xí)兩個(gè)普遍見(jiàn)于與CSS聯(lián)合使用的HTML元素：span和div。
【第八章：元素的分類與標(biāo)識(shí)（class和id）】相關(guān)文章：
2.常用英語(yǔ)標(biāo)識(shí)語(yǔ)和提示語(yǔ)
4.英語(yǔ)汽車常用標(biāo)識(shí)語(yǔ)和提示語(yǔ)