點(diǎn)擊這里返回腳本之家　HTML教程　欄目．
上文：標(biāo)記語言——錨點(diǎn)
原文出處 Chapter 8 再談清單
先前在第一章,我們討論過幾種標(biāo)記清單的做法,研究以<ul>和<li>將它們標(biāo)記成無序清單的好處.這個(gè)方法能標(biāo)識(shí)清單的結(jié)構(gòu),確保所有瀏覽器與設(shè)備都能正確顯示它的內(nèi)容,同時(shí)也讓我們能以CSS為它加上各種樣式.
而在各種環(huán)境下,處理個(gè)別問題時(shí)標(biāo)記清單的所有做法寫出來的話塞滿整本書都不難,我不打算塞滿整本書,但是我的確打算以獨(dú)立一章討論除了無序清單之外的其他幾種清單類別.研究幾種適合使用清單的狀況.
清單是個(gè)組織頁面結(jié)構(gòu)的強(qiáng)大工具,為每個(gè)獨(dú)立的項(xiàng)目加上意義,讓你能在稍后以css加上獨(dú)立的樣式.
讓我們先來看看編了號(hào)的項(xiàng)目清單,以及兩種標(biāo)記這類清單的做法.或許你一眼就能看出哪種方法比較有益,但是我仍會(huì)再度詳細(xì)說明這個(gè)例子,以便強(qiáng)調(diào)結(jié)構(gòu)化標(biāo)記,使用正確工具解決問題的重要性. 編號(hào)項(xiàng)目清單的標(biāo)記法,哪種最好?
假設(shè)你打算標(biāo)記一個(gè)步驟清單,每個(gè)項(xiàng)目之前都有編號(hào),我們將會(huì)研究?jī)煞N能夠達(dá)成這個(gè)目標(biāo)的不同方法,同時(shí)說明為何某個(gè)方法比較適用. 方法A:亂中有序

<ul>
<li>1. Chop the onions.</li>
<li>2. Saute the onions for 3 minutes.</li>
<li>3. Add 3 cloves of garlic.</li>
<li>4. Cook for another 3 minutes.</li>
<li>5. Eat.</li>
</ul>

前面這份清單可能是烹飪歷史上最糟糕的食譜之一.但是拿來當(dāng)簡(jiǎn)單的例子還蠻合適的,加點(diǎn)鹽和雞蛋可能好些,或是...不管,回到正題.
方法A我們選擇以無序清單標(biāo)記這些步驟,以便獲得我們?cè)诘谝徽绿徇^的所有好處,我們?yōu)閮?nèi)容加上結(jié)構(gòu),同時(shí)知道大多數(shù)瀏覽器,屏幕閱讀器以及其他設(shè)備都能正確處理這部分內(nèi)容,稍侯我們也能用css輕易為它指定樣式,很棒!但是... 數(shù)字游戲
由于這是個(gè)有編號(hào)的清單,因此我們?cè)诿總€(gè)項(xiàng)目之前加上編號(hào),編號(hào)之后跟著句號(hào),以便標(biāo)識(shí)每個(gè)步驟的順序,但是如果稍侯需要在第2步,第3步之間加上新步驟的話該怎么辦呢?這下我們需要(手動(dòng))為新增步驟之后的所有項(xiàng)目重新編號(hào).對(duì)這個(gè)清單來說,不是什么麻煩事,但是如果你正在修改某個(gè)具有100個(gè)項(xiàng)目的清單時(shí),修改過程就會(huì)變得非常冗長(zhǎng)乏味了. 出現(xiàn)小圓點(diǎn)符號(hào)
由于我們以無序清單標(biāo)記這個(gè)示例中的結(jié)構(gòu),因此在每個(gè)編了號(hào)的項(xiàng)目之前都會(huì)看到一個(gè)小圓點(diǎn)符號(hào)(就像圖8-1),你或許會(huì)喜歡小圓點(diǎn)符號(hào),如果不喜歡的話當(dāng)然可以通過CSS把它去掉,但是不使用CSS瀏覽這個(gè)清單的時(shí)候一定會(huì)再看到這些小圓點(diǎn)符號(hào).

圖8-1,瀏覽器關(guān)閉CSS閱讀方法A的結(jié)果
有個(gè)更簡(jiǎn)單,更具意義,更容易維護(hù)的方法,讓我們看看方法B. 方法B:有序清單

<ol>
<li>Chop the onions.</li>
<li>Saute the onions for 3 minutes.</li>
<li>Add 3 cloves of garlic.</li>
<li>Cook for another 3 minutes.</li>
<li>Eat.</li>
</ol>

我確信這是大多數(shù)人選用的做法,但是這并不代表我們都沒有在某些情況下,因?yàn)槟撤N原因使用方法A.<ol>代表"有序清單"(ordered list),因此語義上我們使用了正確的元素解決手上的問題.方法B還有什么特別之處? 自動(dòng)編號(hào)
或許你發(fā)現(xiàn)我們不必手動(dòng)為每個(gè)清單項(xiàng)目加上編號(hào)了,在使用了<ol>時(shí),會(huì)自動(dòng)依照順序產(chǎn)生編號(hào),如果我們的步驟清單內(nèi)包含了超過100個(gè)項(xiàng)目,而我們需要在中間插入幾個(gè)新步驟時(shí),我們只需要簡(jiǎn)單的在正確的位置插入新的<li>項(xiàng)目就行了,瀏覽器會(huì)自動(dòng)重新編號(hào),簡(jiǎn)直就跟魔術(shù)一樣.
如果使用方法A的話,我們就需要在插入每個(gè)項(xiàng)目的時(shí)候手動(dòng)修正所有編號(hào),我隨便都能想到比這更有趣的工作可以做...
圖8-2,十一版瀏覽器顯示方法B的效果,在每個(gè)步驟之前都自動(dòng)加上編號(hào).

圖8-2 瀏覽器顯示方法B的效果 愉快的包裝者,第二部
方法B的另一個(gè)好處是,很長(zhǎng)的清單項(xiàng)目在換行的時(shí)候,會(huì)縮進(jìn)到產(chǎn)生的編號(hào)后面,而方法A則會(huì)折到編號(hào)下面(圖8-3)

圖8-3 比較方法A和方法B換行效果 清單種類
雖然有序清單的預(yù)設(shè)編號(hào)樣式通常是阿拉伯?dāng)?shù)字(1,2,3,4,5等),但是我們能通過使用CSS的list-style-type屬性換掉編號(hào)樣式.而list-style-type能在以下幾種任選其一: decimal: 1,2,3,4,...(通常是預(yù)設(shè)值) upper-alpha: A,B,C,D... lower-alpha: a,b,c,d... upper-roman: I,II,III,IV... lower-roman: i,ii,iii,iv... none: 不加上編號(hào)
因此,舉例來說,如果我們想讓方法B產(chǎn)生大寫羅馬編號(hào)的話,我們就能夠以下的CSS達(dá)成目的:

ol li {
list-style-type: upper-roman;
}

圖8-4就是方法B配上這份CSS在瀏覽器內(nèi)的顯示效果,我們的步驟列表現(xiàn)在不再是預(yù)設(shè)的阿拉伯?dāng)?shù)字,而是改用羅馬數(shù)字編號(hào)了.當(dāng)然,標(biāo)記的部分仍然完全相同.改變主意了嗎?只要做點(diǎn)小小的修改,換上先前列出的其他樣式,就能馬上把清單的編號(hào)方式改成你喜歡的樣子.

圖8-4 換用羅馬數(shù)字的有序清單
HTML的type屬性:之前可能有些人會(huì)直接在<ol>標(biāo)簽中使用type屬性,把清單的編號(hào)方式換成羅馬數(shù)字,英文字母等等,然而,為了支持稍早所述的CSS規(guī)則,從HTML 4.01標(biāo)準(zhǔn)開始就不建議使用type屬性了,因此,你不應(yīng)該再使用type屬性,應(yīng)該改用CSS.
稍后,在技巧延伸中,我們會(huì)以CSS為這個(gè)有序清單加上樣式.但現(xiàn)在讓我們先看看另一個(gè)清單種類的例子.
#p# 一群名詞與解釋的標(biāo)記法,哪種更好?
OK,這個(gè)問題已經(jīng)提供夠多線索,本身差不多就是答案了.在我們看完下面兩種方式之后,你就會(huì)知道剛才這句話的意義了.比問題本身更重要的是:方法A是個(gè)在標(biāo)記名詞與解釋時(shí)經(jīng)常使用的做法,而方法B其實(shí)是一種很少人會(huì)使用的清單,但是它能應(yīng)用在許多情況下,結(jié)構(gòu)也更靈活.
首先,讓我們很快的看看你可能十分熟悉的名詞 / 解釋標(biāo)記法,特別是W3C定下的幾個(gè)標(biāo)準(zhǔn): 方法A

<ul>
<li>CSS<br />
A simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.</li>
<li>XHTML<br />
A family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML.</li>
<li>XML<br />
A simple, very flexible text format derived from SGML.</li>
</ul>

這個(gè)方法看起來有點(diǎn)道理,使用無序清單,并且以<br />標(biāo)簽隔開名詞與定義內(nèi)容.
然而,如果我們想為每個(gè)名詞(CSS,XHTML和XML)與定義內(nèi)容指定不同的樣式,那么要怎么做呢?使用方法A時(shí)的唯一選項(xiàng),是加上某些可以指定樣式的標(biāo)簽,像是額外的<span>或<strong>.從維護(hù)的角度來看,這不是個(gè)理想的做法.
圖8-5是方法A在一般瀏覽器中的顯示效果,名詞與定義分別處于單獨(dú)一行.

圖8-5 以一般瀏覽器顯示方法A的效果
除了不能為每行制定特殊的樣式外,方法A并沒有什么缺點(diǎn),但是已經(jīng)足夠當(dāng)成接口,讓我凸顯方法B使用的清單種類 -- 定義清單. 方法B

<dl>
<dt>CSS</dt>
<dd>A simple mechanism for adding style (e.g. fonts, colors, spacing) to Web documents.</dd>
<dt>XHTML</dt>
<dd>A family of current and future document types and modules that reproduce, subset, and extend HTML, reformulated in XML.</dd>
<dt>XML</dt>
<dd>A simple, very flexible text format derived from SGML.</dd>
</dl>

定義清單(<dl>)內(nèi)容由兩種額外標(biāo)簽組成:<dt>(定義名詞)以及<dd>(定義描述).對(duì)我們的例子來說,定義清單完美符合內(nèi)容代表的意義 -- 因?yàn)槲覀兙褪窃诙x一系列名詞,解釋.
根據(jù)預(yù)設(shè)值,大多數(shù)可視化瀏覽器會(huì)將定義描述<dd>顯示在獨(dú)立的一行內(nèi),并且稍微縮進(jìn)(圖8-6),當(dāng)然我們可以利用CSS視需要修改縮進(jìn)設(shè)定.

圖8-6 一般瀏覽器顯示方法B的效果 由結(jié)構(gòu)引導(dǎo)樣式
語義上來說,方法B十分完整,讓我們能為清單的每一個(gè)元素使用獨(dú)立標(biāo)簽,這讓我們能分別為名詞,揭示內(nèi)容制定特定樣式.
舉例來說,我們能做個(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屬性打扮頁面,同時(shí)把屬于裝飾性,不重要的圖片與頁面內(nèi)容,結(jié)構(gòu)分開.
更換,增加或移除這些圖片的動(dòng)作十分簡(jiǎn)單,因?yàn)槲也恍枰薷臉?biāo)簽內(nèi)容就能完成這些變動(dòng).
對(duì)定義清單來說,如果加上小箭頭圖標(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é)構(gòu),我們就能輕易地為每個(gè)構(gòu)成項(xiàng)目指定獨(dú)特的樣式,讓版面更豐富,而完全不必修改標(biāo)簽內(nèi)容,我們也能確信不支持樣式的瀏覽器仍會(huì)以有組織,容易閱讀的方式顯示這個(gè)清單. 其他應(yīng)用
又見很重要的事情必須指出:那就是定義清單的用途不僅限于標(biāo)注名詞,定義內(nè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)容之外的地方!
#p# 概要
本章到目前為止,我們看了另外的兩種清單:有序清單,定義清單.我們發(fā)現(xiàn)借著使用這些清單結(jié)構(gòu),代替無序清單加上額外標(biāo)簽的做法,能夠讓我們更容易控制樣式,同時(shí)也讓清單變得更容易維護(hù).
接著以我們本章最初的步驟清單當(dāng)作例子,用CSS為他調(diào)整一下樣式. 技巧延伸
讓我們復(fù)習(xí)一下本章最初的有序步驟清單:

<ol>
<li>Chop the onions.</li>
<li>Saute the onions for 3 minutes.</li>
<li>Add 3 cloves of garlic.</li>
<li> Cook for another 3 minutes.</li>
<li>Eat.</li>
</ol>

沒有加上任何CSS的話,瀏覽器的顯示效果與圖8-2差不多,就與本書其他的結(jié)構(gòu)化標(biāo)記語法示例一樣,在導(dǎo)入CSS的時(shí)候,有序清單是一組容易指定樣式的標(biāo)簽組.
我們知道,由于使用了正確的結(jié)構(gòu),因此不支持CSS或把CSS關(guān)閉的瀏覽器也能正確顯示出清單的內(nèi)容.
讓我們裝飾的花俏一些,先來自定每個(gè)項(xiàng)目之前的編號(hào)吧. 識(shí)別每個(gè)項(xiàng)目
為了讓我們能存取每個(gè)清單項(xiàng)目,把它的編號(hào)換成更華麗的樣式,我們需要為每個(gè)<li>標(biāo)簽加上id,我們也會(huì)為整個(gè)有序清單加上id,讓我們能為這個(gè)清單指定特定樣式,而不影響其他所有的<ol>.

<ol id="recipe">
<li id="one">Chop the onions.</li>
<li id="two">Saute the onions for 3 minutes.</li>
<li id="three">Add 3 cloves of garlic.</li>
<li id="four"> Cook for another 3 minutes.</li>
<li id="five">Eat.</li>
</ol>

現(xiàn)在我們能識(shí)別每個(gè)項(xiàng)目了,因此我們對(duì)清單內(nèi)每個(gè)元素的樣式都進(jìn)行完整控制.值得一提的是,在此為每個(gè)項(xiàng)目加上獨(dú)特的id之后,我們就無法依賴有序清單的"自動(dòng)編號(hào)"功能了.如果稍侯在中間插入新步驟的話,我們就得自己變更往后步驟的id值,在此事先提醒一下. 自定數(shù)字
為清單建立自定數(shù)字的第一個(gè)步驟是用list-style-type屬性去掉#recipe元素預(yù)設(shè)的自動(dòng)產(chǎn)生數(shù)字的效果:

#recipe {
list-style-type: none;
}

圖8-9 是用上面這條規(guī)則去掉數(shù)字之后的清單顯示效果.
圖8-9 用CSS關(guān)閉數(shù)字編號(hào)之后的有序清單
現(xiàn)在我們已經(jīng)防止自動(dòng)產(chǎn)生數(shù)字了,接著就能以自己的數(shù)字圖片代替.用photoshop(或是你喜歡的繪圖工具)建立5個(gè)GIF圖片,一個(gè)數(shù)字一張圖.圖8-10是我用紅色Prensa字體建立的五個(gè)數(shù)字.
圖8-10 用在有序清單內(nèi)的五個(gè)GIF圖片 把數(shù)字加到CSS中
由于尺寸較大,因此我們需要為每個(gè)清單項(xiàng)目加上一點(diǎn)內(nèi)外補(bǔ)丁,以便為數(shù)字圖片留下足夠的空間讓它們顯示成背景,我們也會(huì)在每個(gè)步驟下面加上一條淺灰色的邊線.
我們能以繼承選擇器 #recipe li將這些規(guī)則套用到位于#recipe 中的<li>上,這讓我們不必為每個(gè)id重復(fù)定義這些規(guī)則.

#recipe {
list-style-type: none;
}
#recipe li {
padding: 10px 50px;
margin-bottom: 6px;
border-bottom: 1px solid #ccc;
}

把這些設(shè)定值套用到清單內(nèi)的每一個(gè)<li>之后,接著我們就能為每個(gè)id指定對(duì)應(yīng)的數(shù)字圖片.

#recipe {
list-style-type: none;
}
#recipe li {
padding: 10px 50px;
margin-bottom: 6px;
border-bottom: 1px solid #ccc;
}
#one {
background: url(ol_1.gif) no-repeat 6px 50%;
}
#two {
background: url(ol_2.gif) no-repeat 2px 50%;
}
#three {
background: url(ol_3.gif) no-repeat 3px 50%;
}
#four {
background: url(ol_4.gif) no-repeat 0px 50%;
}
#five {
background: url(ol_5.gif) no-repeat 6px 50%;
}

你應(yīng)該發(fā)現(xiàn)每張圖片指定的水平位置都有些差異,這是因?yàn)槊繌垐D片的寬度都不一樣,跟我選用的字體有關(guān)系,為了補(bǔ)正這個(gè)差異,我們把每張圖片視需要稍微向右移動(dòng)一點(diǎn),讓每個(gè)數(shù)字旁邊的句號(hào)能夠排列整齊.
加上6px 50%會(huì)讓圖片擺放在離左邊6像素,上下50%的位置上,讓它對(duì)齊水平中線. 結(jié)果
圖8-11是以一般瀏覽器查看最終結(jié)果的樣子,每個(gè)圖片都顯示在項(xiàng)目的左側(cè),而每個(gè)步驟的底部都有一條灰色直線,進(jìn)一步把它們區(qū)分開來.

圖8-11 使用一般瀏覽器查看的最終效果
借著幾張圖片,幾條CSS規(guī)則,我們?yōu)榻Y(jié)構(gòu)化的有序清單加上了些自定的樣式:再度證明我們能把不重要的圖片放在標(biāo)簽之外,便于稍后更新. 結(jié)論
除了無需清單的變化之外,有序清單,定義清單也能提供相應(yīng)的語義結(jié)構(gòu),便利的樣式選擇,發(fā)揮你的想象力,試著用這幾種不同的清單類型 -- 同時(shí)以CSS為基礎(chǔ)結(jié)構(gòu)加上華麗的外衣吧.
在最后,你會(huì)得到能在各處正確顯示的堅(jiān)實(shí)基礎(chǔ),同時(shí)又能以CSS位功能強(qiáng)大的瀏覽器修改顯示效果.
從章節(jié)上看,本書的一半已經(jīng)翻譯完成了,這才知道把英文文獻(xiàn)搞成中文有多不容易了...首先得理解原作者的本意才能用自己的語言組織... 關(guān)于這一張,我還是比較喜歡用合成背景圖然后用background-position來為每個(gè)清單列表指定相應(yīng)的背景圖的做法,至少會(huì)從視覺上減少載入圖片的次數(shù)...哈哈

最新評(píng)論