來自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

13styles.com可以讓使用者在線上製作純CSS+XHTML的多層選單（精確地說是主要與次要兩層），理論上共有13種樣式，不過目前只有4種可以選擇。
| 繼續閱讀…

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