Stylish 讓 user 以自訂 CSS 的方式來達到改變網頁樣貌的目的，常見的應用如：改變字型、改變字體大小粗細、改變顏色、隱藏某些內容(如廣告)等。
因此，user 首先要學會使用 CSS 語法。
學習 CSS 最重要必須掌握二個關鍵 - What & How?
What 指的是操作的對象為何? How 指的是想要它有什麼表現。
例如想隱藏網頁上的某張圖片，則該圖片就是我們的操作對象(What)；我們要圖片不顯示，即 How。
下面是一個 CSS 範例，其中 #imgId 就是 What，括號內所指動作即 How。
代碼:
#imgId
{
display: none !important;
}
把握住上述二個關鍵後，幾乎所有 CSS 語法就是要先指出 What，再告訴它 How。只要練習幾次，就能得心應手。
那麼，CSS 要如何指定 What 呢?
個人認為這是最重要的步驟，因為不知如何選出操作對象，其它動作就免談。
在 CSS 裡有個工具叫 selector，顧名思義是讓我們選東西用的。也就是說，我們可透過適當的 selectors 把操作對象給挑出來。
Selector 的用法大家一定要先搞清楚，必要時記下來，使用時會更得心應手。
以下是 selectors 的參考網址，注意 Fx 尚未支援所有語法，實測是最好的驗證方式。
http://www.w3.org/TR/css3-selectors/
Selector 分為以下幾大類，我在前面標註使用頻率及學習難度(僅供參考)：
* Universal selector: (常用/簡單) 用於選取所有物件，例如：* (星號)
* Type selectors: (常用/簡單) 用於選取 html 語法的某種 tag 物件，例如：img (選取所有圖片)
* Class selectors: (常用/簡單) 用於選取屬於某種類別的物件，例如：.myClass (一點，再加上類別名稱myClass)
* ID selectors: (常用/簡單) 以id來指定物件，例如：#myID (井號，再加上代號myID)
* Attribute selectors: (少用/普通) 用於選取(不)具某種屬性的物件，例如：img[width="100"] (選取寬為100的圖片)
* Pseudo-classes: (少用/較難) 這種 selector 不建議初學者嘗試，如果前面幾種都學會了，自己再來鑽研吧！
下面是所有 selectors 的速查表：
http://www.w3.org/TR/css3-selectors/#selectors
學會各種 selectors 後，再加上各種排列組合，幾乎可以挑出所有想操弄的對象。
當然，仍有少數頑劣份子無法以現有 selectors 取出，這有賴日後 CSS 規格的修訂以瀏覽器的配合。
寫到這裡，照理應往下繼續寫 How 的部份。但我認為如果各位看到這裡都還跟得上，下面也不需多說了，網路上 CSS 隨手可得，以各位目前的功力，自己觀摩應綽綽有餘。
輔助工具
倒是想再分享一下使用Stylish的心得，承如前面所言，選取對象是我覺得最困難的部份，目前來說，Stylish並未提供任何可以幫助user的自動化工具。因此，必須藉助於其它工具。
我建議 FireBug 這個 Addon，它的 Inspect 功能讓user可以用滑鼠點選網頁的任何看得到的物件，選取後可以觀察它的詳細資訊，包括：html tag, id, class, attributes, ...有了這些資訊，配合 CSS selectors 就可以大顯身手了。
另外 Firefox 內建的 DOM Inspector 也可以，不過我覺得它不太適合初學者。
更進一步
如果說 Stylish 讓 user 改變網頁樣貌，那麼 Greasemonkey 就是讓 user 改變網頁的行為。
當你成為 Stylish 的重度使用者後，你會發現 CSS 無法滿足你所有需求，建議可以朝 Greasemonkey 發展。
Demo
http://aiddlywiki.sourceforge.net/tmp/stylish/index.html
登入
註冊
問答集
搜尋
