來自Web Designer Wall的一篇舊文「Style Your Ordered List」，介紹如何讓有序清單（ordered list，ol元素）的編號和內文使用不同的字型。

方法很簡單，編號的字型設定在ol的CSS樣式裡面，內文的字型則設定在ol p裡面（我之前一直沒想到可以這樣設）：

ol {
  font: italic 1em Georgia, Times, serif;
  color: #999999;
}

ol p {
  font: normal .8em Arial, Helvetica, sans-serif;
  color: #000000;
}

最後的成品就會長成這樣（編號的數字是用Georgia字型，內文則是Arial）：

Firefinder是Firebug的擴充套件，用來快速找到網頁中，符合特定CSS選擇器或是XPath表達式的HTML元素。

Firefinder的面板內會顯示符合的筆數並將這些元素條列出來，在網頁中也會用紅色虛線框將他們標示出來；當滑鼠指向面板內列出的某個元素時，網頁內相應的元素則會用藍色虛線框標示。

安裝完畢後，開啟Firefinder面板的快捷鍵是Ctrl（Command）+ Shift + V。

XRAY是一款可安裝於Safari、Firefox、Camino和Mozilla的bookmarklet（書籤小程式，IE版本尚在開發中），使用者可以用它來檢視網頁中各項(X)HTML元素的Box Model資訊。

只要在原始網頁中，將灰色的「XRAY」連結拖曳到瀏覽器的書籤工具列，便安裝完成了。之後點一下Xray書籤即可進入檢視模式，網頁中會出現一個黑色半透明的視窗，此後只要在網頁的任意元素上面點一下，其box model資訊（元素、id、class名稱、hierarchy關係、position、margin、padding等值）便可在該視窗中一覽無遺。

雖然上次介紹過Web Developer Toolbar裡面也有這個功能，但是XRAY的顯示介面除了較精美外，還很貼心地在黑色半透明視窗的右上角作了一個「關閉」的按鈕，讓使用者不必重新整理頁面即可離開此檢視模式。缺點則是不像WDT會以紅色框線預示選取範圍，遇到較複雜的box model，常要點個幾次才能正確找到自己要看的元素。[via Zeldman.com]

相關套件：
CSSViewer
Aardvark

首先，使用者須設定選單名稱，並選擇一款樣式：

步驟二，從右下角選擇選單第一層的選項數量，最多10個，然後按下「ADD NEW」：

步驟三，填入選項名稱（Menu Item Title）、連結網址（Link URL）、連結目標（Target）：

步驟四，為選單加入第二層選項，直接點擊選項的連結進入設定；也可以使用ORDER欄位的箭頭來調整選項的順序：

步驟五，重做步驟二、三來加入第二層選項。

步驟六，可以預覽成品，確定無誤後，按下「Download Source Code」連結，即可下載原始碼檔案。

下載回來的原始碼檔案非常簡單，包含了XHTML檔案、CSS檔案（有for IE的版本）和選單的圖檔。要注意的是，如果選單的選項有使用中文的話，必須將XHTML檔案的文字編碼改為UTF-8才能正常顯示（預設為iso-8859-1，中文會變亂碼）。

利用13styles製作的多層選單可以適用於目前幾種主流的瀏覽器，網站上有詳細的相容性說明表格可供參考。有需要的人也可以利用我的範例成品測試看看。

2007/09/22補記：現在13styles已經不提供線上客製化產生原始碼的服務了，有需要的人可以試用CSS Menu Generator這個網站。

Andy Peatling所製作的CSS Tweak網站，提供CSS檔案瘦身服務。使用的方法很簡單，只要將CSS上傳或張貼到網站上以後，針對個人需求勾選要調整的項目，便可以開始執行。

CSS Tweak目前可以調整的項目有：

• 字型（Fonts）：將字型的相關屬性如”font-family”、”font-size”合併到”font”一項裡面。
• 背景（Backgrounds）：將背景的相關屬性如”background-image”和”background-position”合併到”background”一項裡面。
• 框線（Borders）：將多個框線屬性如”border-left-color”合併到”border”一項。
• 清單（Lists）：將多個清單樣式如”list-style-position”合併到”list-style”一項。
• 移除註解（Comments）：將CSS檔案中所有的註解移除。
• 移除0的單位：CSS的特性值為0時，則無須加註單位，0px只要寫成0即可。
• 格式（Formatting）：可以選擇要移除所有的空行（White-Space），或者是保持原來的排版方式（Layout）。

完成調整之後，CSS Tweak會將檔案瘦身了多少百分比顯示出來，並且讓使用者下載完成檔。

如上圖所示，因為我選擇不要移除CSS的註解並且保留原來的排版，所以瘦身的比例只有1%而已。不過如果移除掉註解和排版的空行，就可以達到25%的瘦身比例囉。把瘦身比例高的CSS檔案放到網站上，不失為節省頻寬的好方法，有此需要的webmaster趕快試試CSS Tweak吧。

• 第0級：CSS？那不是一個多人射擊遊戲嗎？（CSS? Isn’t that a multiplayer game?）

有些人因為在找CS:S（Counter Strike: Source）這款遊戲的資訊而進到#CSS網站。不必擔心這些人，他們不可能製作太多網頁，所以對網路也不會造成多大傷害。

• 第1級：是啊，我偶爾用它來移除連結的底線（Yeah, I use it to remove underlines on links sometimes）

和第0級的人不同，這些人學過HTML，也製作過幾個簡單的網站。他們只有在無法使用HTML製作出某些效果時，才會使用CSS，例如移除連結的底線或者設定行高。這些人的網站通常規模不大也沒什麼訪客，所以他們也不會對網路造成太大傷害。

• 第2級：不，我不喜歡div元素；表格好用多了（No, I don’t like divs; tables are much easier to work with）

他們聽過使用div元素來設計網頁這件事，也花了些時間學習CSS。不過他們很快就放棄了，覺得CSS太難而且支援度不佳，還是寧可用表格排版。
注意！他們是危險人物！他們在這個領域已經待了一段時間，許多都是網站部門的主管。和他們接觸是很重要的，提倡網路標準的人應該多多開導他們，這對網路的意義非同小可。

• 第3級：是啊，聽說它挺好的，不過我沒用它因為……（Yes I’ve heard it’s good, but I can’t use it because of…）

這些人雖然知道CSS的優點，不過總是基於某些原因而無法使用它，例如他們可能有第2級的上司，或者他們必須考慮到Netscape 4的使用者。
舊版的瀏覽器雖然不支援CSS，不過使用者還是可以看見完整的內容。而基於親和力（accessibility）和易用性（usability）的好處，CSS可以為網站帶來更多訪客。把這些優點告訴第3級的開發人員，即使他們不是決策者，或許多少能對第2級的上司發揮點影響力吧。

• 第4級：CSS？喔！沒錯，我用div元素來排版（CSS? Oh! Yes, I use divs for all my layouts）

在頁面中使用過多的div元素反而是這群人的問題，他們會用#toprightredline或是#r5_c7（表示第5列第7欄）這樣的方式設定div元素的id。即使可以通過XHTML 1.1的驗證，這種排版方式卻無法發揮CSS的優勢。螢幕朗讀軟體（screen readers，視障者使用的瀏覽器）很難解譯這些網頁，舊版瀏覽器也會有同樣的問題，網頁的內容無法完整顯示。而不良的class與id命名方式，也對於版面的修改造成極大不便。
雖然第4級的人製作的網站仍然很糟，不過由於他們很容易接受新的觀念，因此對網路造成的傷害較小。許多所見即所得（WYSIWYG）的編輯器製作出充滿div元素的原始碼，可能也是誤導這群人的原因。幸好這些編輯器已經逐漸改良了，希望這會有助於第4級的人繼續往上提昇。

• 第5級：我用CSS來設計，這比表格好多了，因為……（I use CSS for design, it’s better than tables because of…）

第5級的人知道CSS的優點並樂於使用，雖然有時會遇到些問題，但並不嚴重。他們也能運用長期的CSS工作經驗，與人辯論為甚麼要將網頁的結構與設計分開。我猜這篇文章大部分的讀者是這一級的CSS開發人員，我想我自己也是。不過這還不是最好的……

• 第6級：哪個版本的CSS？是的，我知道啊。你有讀過我的書關於……（What version of CSS? Yes, I do. Did you read my book about…）

第6級的人致力於改良CSS，並且寫了許多很棒的文章介紹它的新用法。其中有些人將W3C關於CSS的說明文件全部讀完了，並且知道哪些功能在哪個版本的瀏覽器才有支援。他們是CSS初學者的典範，並且運用他們的影響力使網路更加進步。其中有許多人組成了Web Standards Project，如果你在他們的網站上面發現任何錯誤，那一定是有理由的，向他們請教之後你必能獲得滿意的解答。

我想我不像Emil這麼高明，充其量只能算是第4.5級的CSS開發人員，離開了第4級，正往第5級邁進。不過看來距離第6級，還有很長的路要走啊！

如果你有使用兩張圖片作為網頁背景的需要，那麼不妨看看Yesterdayishere的這個範例網頁（如上圖）。

該網頁使用了兩張不同的圖片作為背景，左邊的圖片稱為Background image #1，如下：
右邊的圖片則是Background image #2，如下：

要將這兩張圖片，分別置於網頁的左右兩邊作為背景，作者Bojan使用的方法是在CSS中分別定義html和body元素的background特性，語法如下：

html { background: url(Background image #1的圖片路徑) no-repeat; }
body { background: url(Background image #2的圖片路徑) 710px 0 no-repeat;}

其中body的background-position乃視前圖Background image #1的寬度來決定，本例設定為710px 0，表示Background image #2應距離左邊界710px，距離上邊界0的意思。

這個方式雖然簡便，不過要注意的是，除了在IE6.0和Firefox1.5以上版本的瀏覽器可以作用之外，舊版的瀏覽器因為無法讀取html元素的背景值，所以會看不見Background image #1，像下圖一樣。

依照Web Content Accessibility Guidelines 1.0的規範，任何與連結內容有關的敘述，都應包含在連結文字當中。因此，將內部連結與外部連結採用不同的標示法，也是增進網頁易讀性的一種方式。

以下的步驟將示範，如何在連結文字的最後，加上一個特別的圖示表示外部連結。

步驟1：為外部連結加上class屬性「external」。

<a class="external" href="http://www.hemidemi.com/">HEMiDEMi</a>

步驟2：在連結文字的後面加上「外部連結」的提示。

<a class="external" href="http://www.hemidemi.com/">HEMiDEMi（外部連結）</a>

步驟3：把提示文字「外部連結」用<span>元素包起來。

<a class="external" href="http://www.hemidemi.com/">HEMiDEMi<span>（外部連結）</span></a>

步驟4：增加一個CSS規則來隱藏提示文字。

雖然直接使用「display: none」這個特性是個快速的方法，但是將導致螢幕朗讀軟體（screen readers，視障者使用的瀏覽器）無法讀取這段文字。因此，利用絕對定位的方式，將「外部連結」這四個字推到螢幕以外，會是較好的方案。

也就是說，加上「外部連結」這四個提示文字，是為了增進網頁的親和力（accessibility），讓螢幕朗讀軟體的使用者也能知道這是一個外部連結。而一般使用者的瀏覽器是不需要看到這段文字的。

a.external span
{
position: absolute;
left: -5000px;
width: 4000px;
}

步驟5：如果你希望標示外部連結的圖示能夠隨著連結的狀態（link, hover, visited）而不同，可以製作三個不同的圖示放在同一個檔案中，記得圖示之間要留一大片空白，如下圖：

步驟6：增加一個CSS規則，來為外部連結（link狀態）加上背景圖示。

a.external:link
{
background: url(步驟5的圖檔路徑名稱) no-repeat 100% 0;
padding: 0 20px 0 0;
}

padding-right的值是依照圖示的寬度設定的，本例的圖寬為17px，故設定為稍大的20px。

步驟7：設定visited狀態外部連結的CSS規則。

a.external:visited
{
color: purple;
background: url(步驟5的圖檔路徑名稱) no-repeat 100% -100px;
padding: 0 20px 0 0;
}

因為圖示之間的距離約為100px，所以將背景圖的垂直值設為-100px。

步驟8：設定hover狀態外部連結的CSS規則。

a.external:hover
{
color: red;
background: url(步驟5的圖檔路徑名稱) no-repeat 100% -200px;
padding: 0 20px 0 0;
}

步驟9：在網站中應加上該圖示之用途說明。

成果範例：

HEMiDEMi（外部連結）是最近台灣的部落格圈非常熱門的網路書籤服務。

[via Max Design - Simple, accessible external links]