|
技巧延伸
在這個單元里,一起來探討怎么以繼承選擇器為一組嵌套狀清單的不同級別分別制定特殊樣式.我們所制作的是個小網(wǎng)站地圖的一部分.我們將發(fā)現(xiàn)保留十分基本的標(biāo)記代碼,不需要加上額外的分類屬性也能為每一層級分別指定樣式.
首先,一起來看看標(biāo)記代碼.
原始的標(biāo)記
嵌套,未指定樣式的清單能為大綱之類的提供最基本的層級結(jié)構(gòu)(當(dāng)然也十分適用這個例子中的網(wǎng)站地圖).由于使用了嵌套清單,因此我們能確信所有瀏覽器,設(shè)備都能正確顯示它的結(jié)構(gòu),同時稍后也能輕易使用CSS指定樣式.
小網(wǎng)站地圖的標(biāo)記代碼也許像這樣,三個頂層項目,還有幾個嵌套項目.
<ul>
<li>Weblog</li>
<li>Articles
<ul>
<li>How to Beat the Red Sox</li>
<li>Pitching Past the 7th Inning
<ul>
<li>Part I</li>
<li>Part II</li>
</ul>
</li>
<li>Eighty-Five Years Isn't All That Long, Really</li>
</ul>
</li>
<li>About</li>
</ul>
圖9-1是大多數(shù)瀏覽器顯示這個例子的效果,你能發(fā)現(xiàn),只要使用預(yù)設(shè)值,我們追求的結(jié)構(gòu)就已大致成型.就算不指定樣式,結(jié)構(gòu)仍然十分明顯,雖然他的確有點(diǎn)無聊,所以接著就開始加上一些CSS.
圖9-1 尚未設(shè)定樣式的嵌套狀清單
加上樣式
假設(shè)我們想為網(wǎng)站地圖的某一層加上一些樣式定義,我們需要對標(biāo)記代碼新增一些東西,其實也就只是一個id,這樣我們才能為這個清單指定與頁面上其他部分的清單不同的樣式,而不需要加上任何其他的標(biāo)記內(nèi)容.
<ul id="sitemap">
<li>Weblog</li>
<li>Articles
<ul>
<li>How to Beat the Red Sox</li>
<li>Pitching Past the 7th Inning
<ul>
<li>Part I</li>
<li>Part II</li>
</ul>
</li>
<li>Eighty-Five Years Isn't All That Long, Really</li>
</ul>
</li>
<li>About</li>
</ul>
使用繼承選擇器,就能為清單每一層分別制定獨(dú)特的樣式.舉例來說:如果想讓最外層的字體方法,粗體,使用橘色,而內(nèi)層逐漸縮小的話,可以先為整個清單指定大小,粗細(xì)和顏色.
#sitemap {
font-size: 140%;
font-weight: bold;
color: #f63;
}
這樣會讓整個清單變成大字,換成橘色粗體.接著為任一層嵌套結(jié)構(gòu)內(nèi)的<li>標(biāo)簽縮小字體,改變顏色.
#sitemap {
font-size: 140%;
font-weight: bold;
color: #f63;
}
#sitemap li ul {
font-size: 90%;
color: #000;
}
前面這段CSS會使所有頂層項目以大字,橘色粗體顯示,而內(nèi)層嵌套中的清單則是以黑色,90%字體(在這里是140%的90%)顯示,結(jié)果見圖9-2.
圖9-2 為頂層清單項目指定樣式
我們不需要為第三層指定更小的字體,因為他會自動使用90%的90%(有點(diǎn)讓人困惑,但是真的能運(yùn)作!)
現(xiàn)在清單的每一層有自動縮小的font-size了,接著加上一些圓點(diǎn)符號.
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁 標(biāo)記語言——精簡標(biāo)簽 [4] 下一頁 標(biāo)記語言——精簡標(biāo)簽 [6]
◎進(jìn)入論壇網(wǎng)頁制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評論。
|
第 1 頁 
第 5 頁 標(biāo)記語言——精簡標(biāo)簽 [5]
