|
分類CSS
指定樣式時(shí),假設(shè)我們想讓標(biāo)題變成橘色,使用serif字體,底部加上淺灰色邊線,而"sidelinks"無(wú)序清單則要把小圓點(diǎn)符號(hào)去掉,清單項(xiàng)目改為粗體.
方法A需要的CSS內(nèi)容看起來(lái)會(huì)像這樣:
.sideheading {
font-family: Georgia, serif;
color: #c63;
border-bottom: 1px solid #ccc;
}
.sidelinks {
list-style-type: none;
}
.link {
font-weight: bold;
}
我們能參照標(biāo)記內(nèi)制定的分類名稱(class),為這些標(biāo)簽指定特殊樣式,你甚至能想象頁(yè)面的其他部分也照這個(gè)方式組織: 導(dǎo)航條,頁(yè)尾與內(nèi)容區(qū),每個(gè)標(biāo)簽都加上了雜亂的分類,以便對(duì)它們有完全控制權(quán).
沒(méi)錯(cuò),它的確能運(yùn)作,但是有個(gè)簡(jiǎn)單的做法能夠節(jié)省這些分類屬性(class),同時(shí)讓你的CSS更容易閱讀,更具組織性,接著看方法B.
方法B:自然的選擇
<div id="sidebar">
<h3>About This Site</h3>
<p>This is my site.</p>
<h3>My Links</h3>
<ul>
<li><a href="archives.html">Archives</a></li>
<li><a href="about.html">About Me</a></li>
</ul>
</div>
方法B短小精悍!但是等等,分類都到哪里去了?恩...你很快就會(huì)發(fā)現(xiàn)我們其實(shí)并不是真的需要它們,主要是因?yàn)槲覀儼堰@些標(biāo)簽都塞進(jìn)一個(gè)具有惟一名稱(本例是sidebar)的<div>的關(guān)系.
這就是發(fā)揮繼承選擇器作用的地方了.我們只需要直接以標(biāo)簽名稱指定位于sidebar之內(nèi)的標(biāo)簽,就能去掉這些多余的分類屬性.
以內(nèi)容前后關(guān)系指定CSS
讓我們看看與方法A相同的樣式,但是這次我們用繼承選擇器指定位于sidebar里的標(biāo)簽.
#sidebar h3 {
font-family: Georgia, serif;
color: #c63;
border-bottom: 1px solid #ccc;
}
#sidebar ul {
list-style-type: none;
}
#sidebar li {
font-weight: bold;
}
通過(guò)參考 #sidebar ID,就能為包含在其中的標(biāo)簽指定特殊樣式,舉例來(lái)說(shuō),只有位于<div id="sidebar">之內(nèi)的<h3>標(biāo)簽會(huì)設(shè)定上述的CSS規(guī)則.
這種根據(jù)內(nèi)容前后關(guān)系指定樣式的做法是縮短標(biāo)記內(nèi)容的關(guān)鍵.通常在為內(nèi)容設(shè)計(jì)好語(yǔ)義結(jié)構(gòu)之后,就不必為標(biāo)簽加上分類屬性了.
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 標(biāo)記語(yǔ)言——精簡(jiǎn)標(biāo)簽 [1] 下一頁(yè) 標(biāo)記語(yǔ)言——精簡(jiǎn)標(biāo)簽 [3]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 2 頁(yè) 標(biāo)記語(yǔ)言——精簡(jiǎn)標(biāo)簽 [2]
