|
不止用在側(cè)邊欄
我們只展示了頁(yè)面的一個(gè)段落(就是側(cè)邊欄),不過(guò)這個(gè)做法可以應(yīng)用到整個(gè)頁(yè)面結(jié)構(gòu)上,只要將標(biāo)記內(nèi)容依照邏輯分成幾個(gè)段落(或許是#nav,#content,#sidebar,#footer),然后以繼承選擇器為這個(gè)段落內(nèi)的標(biāo)簽分別制定特殊樣式就可以了.
舉例來(lái)說(shuō),假設(shè)在頁(yè)面內(nèi)的#content與#sidebar段落內(nèi)都用了<h3>標(biāo)簽,并且希望它們都使用serif字體,然而,你希望其中一個(gè)段落的<h3>以紫色顯示,另一個(gè)則是橘色.
這是不需要修改任何標(biāo)簽,加上分類屬性.我們可以通過(guò)一個(gè)全局樣式指定所有<h3>標(biāo)簽共用的規(guī)則,然后用繼承選擇器根據(jù)標(biāo)簽的位置設(shè)定顏色.
h3 {
font-family: Georgia, serif; /* All h3s to be serif */
}
#content h3 {
color: purple;
}
#sidebar h3 {
color: orange;
}
指定所有<h3>標(biāo)簽都使用senif字體,而顏色必須根據(jù)內(nèi)容上下文關(guān)系選擇使用紫色或是橘色,此時(shí)我們不需要重復(fù)共享規(guī)則(這個(gè)例子中是font-family),因此能縮短CSS的內(nèi)容,同時(shí)防止多個(gè)聲明內(nèi)出現(xiàn)重復(fù)的規(guī)則.
我們不僅能減少class屬性需要的額外的標(biāo)記空間,同時(shí)CSS結(jié)構(gòu)也變得更具意義,讓我們更容易閱讀它的內(nèi)容,更容易依照頁(yè)面分段進(jìn)行組織,修改特定的規(guī)則也變得很簡(jiǎn)單,對(duì)龐大,復(fù)雜的排版來(lái)說(shuō)特別明顯,因?yàn)檫@時(shí)你可能會(huì)同時(shí)擁有上百條CSS規(guī)則.
舉例來(lái)說(shuō),在這個(gè)例子中,如果把共享規(guī)則加到每個(gè)聲明中,而稍后想把所有<h3>換成sans serif字體的話,就得修改三個(gè)地方,沒(méi)辦法一次搞定.
越少分類越好維護(hù)
除了減少需要使用的源代碼空間之外,用繼承選擇器代替多余分類還代表了標(biāo)記內(nèi)容未來(lái)易于擴(kuò)展.
舉例來(lái)說(shuō),讓我們假設(shè)你想讓sidebar之內(nèi)的鏈接變成紅色,而不是像頁(yè)面的其余部分那樣使用藍(lán)色,因此你建立了一個(gè)red類,像這樣加到錨點(diǎn)標(biāo)簽中:
<div id="sidebar">
<h3>About This Site</h3>
<p>This is my site.</p>
<h3>My Links</h3>
<ul>
<li><a href="archives.html" class="red">Archives</a></li>
<li><a href="about.html" class="red">About Me</a></li>
</ul>
</div>
而把這些鏈接變成紅色(假設(shè)預(yù)設(shè)的鏈接顏色不是紅色)則需要類似這樣的CSS:
a:link.red {
color: red;
}
這些動(dòng)作沒(méi)什么問(wèn)題,也完全可以正常運(yùn)作,但是如果未來(lái)你改變心意,想把這些鏈接換成綠色的話怎么辦?或者更實(shí)際一點(diǎn),你的老板偶爾說(shuō)了"今年紅色已經(jīng)過(guò)時(shí)了,把這些側(cè)邊欄鏈接換成綠色"!沒(méi)問(wèn)題,你只要修改CSS里的red類就搞定了,但是標(biāo)記內(nèi)容里的class屬性還是red,明顯這不完全符合語(yǔ)義,就跟使用其他顏色當(dāng)作分類名稱一樣.
這不是個(gè)使用顯示效果當(dāng)作分類名稱的好地方,但是完全不指定分類的話,我們能省去許多處理分類的精力(以及代碼),同時(shí)讓內(nèi)容語(yǔ)義更合理,我們倒不如以繼承選擇器選擇這些側(cè)邊欄的鏈接,依照需要指定樣式.
標(biāo)記內(nèi)容和方法B完全相同,而設(shè)定側(cè)邊欄的鏈接所需的CSS將是這樣:
#sidebar li a:link {
color: red;
}
基本上,這代表"只有在<div id="sidebar">之內(nèi)的<li>標(biāo)簽里的使用了href屬性的錨點(diǎn)標(biāo)簽應(yīng)還顯示成紅色".
現(xiàn)在,我們維持了簡(jiǎn)短靈活的標(biāo)記內(nèi)容,而未來(lái)更新只需要用到CSS,不管想讓鏈接變成紅色,綠色,粗體,斜體都沒(méi)問(wèn)題.
接著,來(lái)看看另一個(gè)精簡(jiǎn)標(biāo)簽的做法:消除不必要的<div>標(biāo)簽,直接取用現(xiàn)有的塊級(jí)標(biāo)簽.
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 標(biāo)記語(yǔ)言——精簡(jiǎn)標(biāo)簽 [2] 下一頁(yè) 標(biāo)記語(yǔ)言——精簡(jiǎn)標(biāo)簽 [4]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 3 頁(yè) 標(biāo)記語(yǔ)言——精簡(jiǎn)標(biāo)簽 [3]
