第八課：元素組（span和div）

元素<span>和<div>用于文件中的組和結構，并經常與class和id一起使用。本課將進一步探討
<span>與<div>的用法，因為這兩個HTML元素實際上也是CSS的重要部分。

帶<span>的組
帶<div>的組

帶<span>的組

<span>元素被稱為中性組，它本身不給文件添加任何東西。但在CSS中，可以給文件的文字特殊部分添加視覺特性。這里以富蘭克林的名言作為實例：

<p>Early to bed and early to rise
makes a man healthy, wealthy and wise.</p>

假設我們想強調早起的好處，可以用<span>標記。然后給每個標記添加一個class，并在樣式表中定義：

<p>Early to bed and early to rise
makes a man <span class="benefit">healthy</span>,
<span class="benefit">wealthy</span>
and <span class="benefit">wise</span>.</p>

CSS代碼應該如下：

span.benefit {
color:red;
}

當然，你也可以用id給<span>-元素添加樣式。但應記住，需要分別給三個<span>-元素施用唯一的id。

帶<div>的組

前面的實例說明<span>被用于塊級元素，而<div> 被用于組成一個或更多塊級元素。除了這些區別以外，帶<div>的組在某些方面也有相同之處。看看下面這個關于美國總統的實例，他們按照政治背景被分為兩個列表。

<div id="democrats">
<ul>
<li>Franklin D. Roosevelt</li>
<li>Harry S. Truman</li>
<li>John F. Kennedy</li>
<li>Lyndon B. Johnson</li>
<li>Jimmy Carter</li>
<li>Bill Clinton</li>
</ul>
</div>

<div id=”republicans”>
<ul>
<li>Dwight D. Eisenhower</li>
<li>Richard Nixon</li>
<li>Gerald Ford</li>
<li>Ronald Reagan</li>
<li>George Bush</li>
<li>George W. Bush</li>
</ul>
</div>

在樣式表中，我們可以利用組以同樣方式分類：

#democrats {
background:blue;
}

#republicans {
background:red;
}

上面的例子，僅用<div> 與<span>給文字和背景色等簡單的東西添加特性。實際上，這兩個元素還能做更多事情，但不屬于本課介紹的范圍，我們將在后面的教程中單獨討論。

總結

第七和第八課，我們學習了選擇器id和class，以及元素span和div的用法。下一課將教給你使用box模式。