第七課:元素組的識別與分組(class和id)

有時候,你想給特定元素或一組元素施用特定風格。本課將進一步探討怎樣用class和id給選定的元素定義特性。

怎樣讓網站上的一個特殊標題不同于其它標題?怎樣把鏈接組分成不同類別,并給每個類別一個特殊風格?下面是一些答案實例

用class分組元素

假設我們有兩列不同葡萄(用于生產白和紅葡萄酒)的鏈接,HTML代碼如下。:

<p>Grapes for white wine:</p>
<ul>
<li><a href="ri.htm">Riesling</a></li>
<li><a href="ch.htm">Chardonnay</a></li>
<li><a href="pb.htm">Pinot Blanc</a></li>
</ul>

<p>Grapes for red wine:</p>
<ul>
<li><a href=”cs.htm”>Cabernet Sauvignon</a></li>
<li><a href=”me.htm”>Merlot</a></li>
<li><a href=”pn.htm”>Pinot Noir</a></li>
</ul>

我們想讓白葡萄酒鏈接變成黃色,紅葡萄酒鏈接變成紅色,網頁的其余鏈接是藍色。要獲得這種效果,需要將鏈接分為兩類。用屬性class給每個鏈接安排類別就能做到這一點。讓我們嘗試定義上面例子的類別:

<p>Grapes for white wine:</p>
<ul>
<li><a href="ri.htm" class="whitewine">Riesling</a></li>
<li><a href="ch.htm" class="whitewine">Chardonnay</a></li>
<li><a href="pb.htm" class="whitewine">Pinot Blanc</a></li>
</ul>

<p>Grapes for red wine:</p>
<ul>
<li><a href=”cs.htm” class=”redwine”>Cabernet Sauvignon</a></li>
<li><a href=”me.htm” class=”redwine”>Merlot</a></li>
<li><a href=”pn.htm” class=”redwine”>Pinot Noir</a></li>
</ul>

我們可以在后面分別定義分屬于白葡萄酒和紅葡萄酒鏈接的特性。

a {
color: blue;
}

a.whitewine {
color: #FFBB00;
}

a.redwine {
color: #800000;
}

正如實例所示,你可以用.classname定義屬于特定類的元素特性。

用id識別元素

除了組元素以外,還可以用CSS代碼id識別和定義單個元素。屬性id的特殊之處是,同一個文件中不會有id相同的元素。每一個id都是唯一的。在其它情況下,用class代替。現在,讓我們看看使用id的實例:

<h1>Chapter 1</h1>
...
<h2>Chapter 1.1</h2>
...
<h2>Chapter 1.2</h2>
...
<h1>Chapter 2</h1>
...
<h2>Chapter 2.1</h2>
...
<h3>Chapter 2.1.2</h3>
...

上面標題可以是任何文件中段落或章節的標題。它很自然的給每個段落分配一個id:

<h1 id="c1">Chapter 1</h1>
...
<h2 id="c1-1">Chapter 1.1</h2>
...
<h2 id="c1-2">Chapter 1.2</h2>
...
<h1 id="c2">Chapter 2</h1>
...
<h2 id="c2-1">Chapter 2.1</h2>
...
<h3 id="c2-1-2">Chapter 2.1.2</h3>
...

假設段落1.2的標題必須是紅色,可以用CSS做到這一點:

#c1-2 {
color: red;
}

上述實例展示了如何用#id定義特定元素特性的方法。

總結

這一課學習了classs和id的使用,因此能讓你定義特殊元素的特定屬性。下一課,我們將學習和使用<span>和<div>。

版權宣告:
作者:Riley.Chou
連結:https://sh100k.com/%e7%ac%ac%e4%b8%83%e8%af%be%ef%bc%9a%e5%85%83%e7%b4%a0%e7%bb%84%e7%9a%84%e8%af%86%e5%88%ab%e4%b8%8e%e5%88%86%e7%bb%84%ef%bc%88class%e5%92%8cid%ef%bc%89/
來源:SH100K – 生活百科
文章版權歸作者所有,未經允許請勿轉載。

THE END
< <上一篇
下一篇>>