|
由結(jié)構(gòu)引導(dǎo)樣式
語(yǔ)義上來(lái)說(shuō),方法B十分完整,讓我們能為清單的每一個(gè)元素使用獨(dú)立標(biāo)簽,這讓我們能分別為名詞,揭示內(nèi)容制定特定樣式.
舉例來(lái)說(shuō),我們能做個(gè)簡(jiǎn)單修改,以CSS把<dt>變成粗體.只要幾行聲明就能達(dá)成這個(gè)目的.完全不必修改標(biāo)簽內(nèi)容.
dt {
font-weight: bold;
}
只要這樣就夠了,不必為清單內(nèi)容加上<strong>,<b>甚至是<span>標(biāo)簽,現(xiàn)在所有的<dt>都會(huì)變成粗體,與圖8-7一樣.
圖8-7 方法B為<dt>加上font-weight:bold的效果
加上圖片
或許你發(fā)現(xiàn)我喜歡用CSS為標(biāo)簽加上小圖標(biāo),我喜歡這個(gè)做法的理由,是因?yàn)槲夷苁褂肅SS的background屬性打扮頁(yè)面,同時(shí)把屬于裝飾性,不重要的圖片與頁(yè)面內(nèi)容,結(jié)構(gòu)分開(kāi).
更換,增加或移除這些圖片的動(dòng)作十分簡(jiǎn)單,因?yàn)槲也恍枰薷臉?biāo)簽內(nèi)容就能完成這些變動(dòng).
對(duì)定義清單來(lái)說(shuō),如果加上小箭頭圖標(biāo),從名詞指向定義內(nèi)容的話,應(yīng)該很有意思.我們能以下面這段CSS輕松加上這個(gè)效果:
dt {
font-weight: bold;
}
dd {
margin-left: 15px;
padding-left: 15px;
color: #999;
background: url(dd_arrow.gif) no-repeat 0 2px;
}
我們所做的修改,首先是以margin-left:15px稍微拿掉一些<dd>標(biāo)簽預(yù)設(shè)的外補(bǔ)丁,接著,我們把定義描述的顏色換成灰色,使其與<dt>的區(qū)別更大.同時(shí)在描述文字的左邊,理頂端2像素的地方放上一個(gè)小巧的橘色箭頭圖標(biāo),并且在描述文字的左邊留下15像素的內(nèi)部定,讓圖標(biāo)不會(huì)與文字重疊,圖8-8就是完成的效果.
圖8-8 加上圖標(biāo),凸顯文字關(guān)聯(lián)性的定義清單
如你所見(jiàn),使用定義清單結(jié)構(gòu),我們就能輕易地為每個(gè)構(gòu)成項(xiàng)目指定獨(dú)特的樣式,讓版面更豐富,而完全不必修改標(biāo)簽內(nèi)容,我們也能確信不支持樣式的瀏覽器仍會(huì)以有組織,容易閱讀的方式顯示這個(gè)清單.
其他應(yīng)用
又見(jiàn)很重要的事情必須指出:那就是定義清單的用途不僅限于標(biāo)注名詞,定義內(nèi)容.定義清單還能用來(lái)標(biāo)注對(duì)話,導(dǎo)航條,甚至是表單排版.
我們甚至可以引用W3C在HTML 4.01規(guī)范中對(duì)于定義清單的定義http://www.w3.org/TR/html4/struct/lists.html)
"以<dl>標(biāo)簽建立的定義清單,通常包含一系列名詞,定義內(nèi)容(雖然定義清單也能應(yīng)用在其他地方)"
所以,別害怕把定義清單用在名詞,解釋內(nèi)容之外的地方!
概要
本章到目前為止,我們看了另外的兩種清單:有序清單,定義清單.我們發(fā)現(xiàn)借著使用這些清單結(jié)構(gòu),代替無(wú)序清單加上額外標(biāo)簽的做法,能夠讓我們更容易控制樣式,同時(shí)也讓清單變得更容易維護(hù).
接著以我們本章最初的步驟清單當(dāng)作例子,用CSS為他調(diào)整一下樣式.
出處：藍(lán)色理想
責(zé)任編輯：bluehearts
上一頁(yè) 標(biāo)記語(yǔ)言——再談清單 [3] 下一頁(yè) 標(biāo)記語(yǔ)言——再談清單 [5]
◎進(jìn)入論壇網(wǎng)頁(yè)制作、WEB標(biāo)準(zhǔn)化版塊參加討論，我還想發(fā)表評(píng)論。
|
第 1 頁(yè) 
第 4 頁(yè) 標(biāo)記語(yǔ)言——再談清單 [4]
