第九章：組織元素（span和div）
第九章：組織元素（span和div）
span和div元素用于組織和結(jié)構(gòu)化文檔，并經(jīng)常聯(lián)合class和id屬性一起使用。
在這一課中，我們將進(jìn)一步探究span和div的用法，因?yàn)檫@兩個(gè)HTML元素對(duì)于CSS是很重要的。
- 用span組織元素
- 用div組織元素
9.1用span組織元素
span元素可以說是一種中性元素，因?yàn)樗粚?duì)文檔本身添加任何東西。但是與CSS結(jié)合使用的話，span可以對(duì)文檔中的部分文本增添視覺效果。
讓我們用一句本杰明·弗蘭克林（Benjamin Franklin）的名言來舉個(gè)例子：
<p>早睡早起
使人健康、富裕又聰穎。</p>
假設(shè)我想用紅色來強(qiáng)調(diào)弗蘭克林先生所認(rèn)為的“不要在睡眠中度過一天”的好處，我們可以用<span>標(biāo)簽來標(biāo)記上述三點(diǎn)好處。然后，我們將這幾個(gè)span設(shè)置為相同的class。這樣，我們稍后就可以在樣式表里針對(duì)這個(gè)class定義特定的.樣式。
<p>早睡早起
使人<span class="benefit">健康</span>、
<span class="benefit">富裕</span>
和<span class="benefit">聰穎</span>。</p>
相應(yīng)的CSS代碼如下：
span.benefit {
color:red;
}
當(dāng)然，你也可以采用id來為span元素添加樣式。不過正如我們?cè)谏弦徽n所學(xué)的，如果采用id的話，你必須為這三個(gè)span元素各自分別指定一個(gè)唯一的id。
9.2用div組織元素
如前面例子所示，span的使用局限在一個(gè)塊元素內(nèi)，而div可以被用來組織一個(gè)或多個(gè)塊元素。
除去這點(diǎn)區(qū)別，div和span在組織元素方面相差無幾。讓我們來看一個(gè)例子。我們將歷屆美國總統(tǒng)按其所屬的政營分別組織為兩個(gè)列表：
<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使用在一些很簡(jiǎn)單的方面，譬如文本和背景色等。但其實(shí)這兩個(gè)元素都可用于作更加復(fù)雜的處理，比如。。。不過這里我們暫并不作介紹。之后我們還將對(duì)它們作深入了解。
小結(jié)
在第7課和第8課，你已經(jīng)學(xué)習(xí)了id和class這兩個(gè)選擇器（selector）以及span和div元素。
現(xiàn)在，你應(yīng)該可以分類或標(biāo)識(shí)差不多一篇文檔中的所有部分了，這可是向著精通CSS的方向邁進(jìn)了一大步哦！在第9課，我們將向你介紹盒狀模型（box model）。
【第九章：組織元素（span和div）】相關(guān)文章：