第九章：組織元素（span和div）
第九章：組織元素（span和div）
span和div元素用于組織和結構化文檔，并經常聯合class和id屬性一起使用。
在這一課中，我們將進一步探究span和div的用法，因為這兩個HTML元素對于CSS是很重要的。
- 用span組織元素
- 用div組織元素
9.1用span組織元素
span元素可以說是一種中性元素，因為它不對文檔本身添加任何東西。但是與CSS結合使用的話，span可以對文檔中的部分文本增添視覺效果。
讓我們用一句本杰明·弗蘭克林（Benjamin Franklin）的名言來舉個例子：
<p>早睡早起
使人健康、富裕又聰穎。</p>
假設我想用紅色來強調弗蘭克林先生所認為的“不要在睡眠中度過一天”的好處，我們可以用<span>標簽來標記上述三點好處。然后，我們將這幾個span設置為相同的class。這樣，我們稍后就可以在樣式表里針對這個class定義特定的.樣式。
<p>早睡早起
使人<span class="benefit">健康</span>、
<span class="benefit">富裕</span>
和<span class="benefit">聰穎</span>。</p>
相應的CSS代碼如下：
span.benefit {
color:red;
}
當然，你也可以采用id來為span元素添加樣式。不過正如我們在上一課所學的，如果采用id的話，你必須為這三個span元素各自分別指定一個唯一的id。
9.2用div組織元素
如前面例子所示，span的使用局限在一個塊元素內，而div可以被用來組織一個或多個塊元素。
除去這點區別，div和span在組織元素方面相差無幾。讓我們來看一個例子。我們將歷屆美國總統按其所屬的政營分別組織為兩個列表：
<div id="democrats">
<ul>
<li>富蘭克林·D·羅斯福</li>
<li>哈利·S·杜魯門</li>
<li>約翰·F·肯尼迪</li>
<li>林登·B·約翰遜</li>
<li>吉米·卡特</li>
<li>比爾·克林頓</li>
</ul>
</div>
<div id="republicans">
<ul>
<li>德懷特·D·艾森豪威爾</li>
<li>理查德·尼克松</li>
<li>杰拉爾德·福特</li>
<li>羅納德·里根</li>
<li>喬治·布什</li>
<li>喬治·W·布什</li>
</ul>
</div>
在這里，我們可以采用跟上例同樣的方法來處理樣式表：
#democrats {
background:blue;
}
#republicans {
background:red;
}
在上例中，我們僅僅將div和span使用在一些很簡單的方面，譬如文本和背景色等。但其實這兩個元素都可用于作更加復雜的處理，比如。。。不過這里我們暫并不作介紹。之后我們還將對它們作深入了解。
小結
在第7課和第8課，你已經學習了id和class這兩個選擇器（selector）以及span和div元素。
現在，你應該可以分類或標識差不多一篇文檔中的所有部分了，這可是向著精通CSS的方向邁進了一大步哦！在第9課，我們將向你介紹盒狀模型（box model）。
【第九章：組織元素（span和div）】相關文章：