這兩天看了用 Stylish 來自訂網頁樣式這文，忽然有這種想法，因為 Web Develop 不是有一功能『Edit CSS』，如果能將之轉成 Stylish 可以使用的 style（也許不是用"style"這一詞，反正就是能讓 Stylish 可以使用），就能讓更多人來修改網頁，是吧？

因為小弟我也是外行人，可又有需要修改網頁的樣式，也拜讀了 arphen 兄在『請問是否有stylish的教學？』中之文章，也嘗試使用 Web Develop、FireBug 等工具，不過尤如墮入五里霧中，完全不知如何找出【What】，也就無從使用 Selector 來挑出操作的對象。

以合作金庫的金融看板為例：

比如我想要透過 Stylish 來改變網頁的字型大小，卻不知如何透過 Web Develop 或 FireBug 來找到。

WebDeveloper -> CSS -> View Style Information

滑鼠懸停在你想改的元素上觀察它可以用何種選擇器
以你的網頁來說
其實
* {
font-size: XXpx;
}
最快了= =(好恐怖的源碼)

_________________
以下為簽名檔
半荒廢日誌....

Foolproof Project:
KomiX 漫畫瀏覽
Khopper 音樂轉檔

就算你百分之一百認定某人是渣滓中的渣滓，請仍然展示你的冷靜、體諒、尊重。

這題目下的蠻好玩的。
Stylish本來就是CSS語法，
只是用新的設定去蓋過舊的。

外行人但至少要對html和CSS有一點基本了解，
如果連網頁語法都看不懂的話，又要如何下手去修改它呢？
可以搜尋一下 html 和 CSS 教學，有一些教基本知識的網站。



這樣看起來實在太累了。
還是用Firebug>Inspect Element比較好找。

說得也是
而且WD如果架構太長會無法看到後面的路徑

其實我覺得只要有CSS的基礎用什麼東西觀察都無所謂

_________________
以下為簽名檔
半荒廢日誌....

Foolproof Project:
KomiX 漫畫瀏覽
Khopper 音樂轉檔

就算你百分之一百認定某人是渣滓中的渣滓，請仍然展示你的冷靜、體諒、尊重。

照預設值裝好 Firefox 跟 Stylish ，然後打開 Firefox ，看要不要把 Stylish 的圖示拉到工具列上，再來開好網頁，打開選單工具列的「工具 → DOM 觀察器」，再點一下觀察器的網址開網頁來觀察，然後圖示工具列最左邊那個有滑鼠游標的圖示點下去，再直接點選要觀察的網頁元素就好。（其它就看個人的 HTML 功力了）

CSS 方面，知道選擇子(selector) 、選擇子間的父子繼承關係，和規則優先度的觀念也很夠了，剩下就是怎麼寫規則出來而已。（當然也有 Stylish 特有的撰寫規則在，只是這裡懂 HTML 跟 CSS 也就能理解了。）

其它大概就是多拿別人寫好的 Stylish 原稿來看吧。（還有 CSS 有個 !important 的用法也要知道，雖然 Stylish 按個按鈕就幫你把這全弄好了啦。）

_________________
【Firefox 有問題請先看這裡】
回覆文章的建議
萬用自我檢測除錯大法 for Firefox
完全備份大法 for Firefox
重建 Firefox 的設定
乾淨升級 Firefox
（本帳號停用中）

感謝三位的說明，首先是 legnaleurc 兄，你說的方法（就是 ~ 好恐怖的源碼），小弟試了並沒有作用，不過根據你和 CSY 兄的說明，小弟對於 FireBug、Web Develop 的使用總算是有收獲，所以自己又做了以下的試驗：






結果沒有任何作用，可是我試 Google 時就能順利修改，所以蠻疑惑的。

PS：CSY 兄，HTML 我也是懂些皮毛（最多也就用記事本 key 一張簡單的網頁，頂多帶有超連結、圖片、弄個頁框、加些 table 而已），可 CSS 就沒碰過，所以我才會想問問看有沒有這類的方式可以處理。

因為『Edit CSS』能直接修改（實驗性質），卻不能像 Stylish 那樣一直套用，也不能直接把『Edit CSS』的內容就這麼貼到 Stylish 上（貼了也沒用，因為格式好像不合）。

所以我想若可以的話，就只要將原本的 CSS 透過轉換步驟，就能貼到 Stylish 上，這樣做些微調方面的修改就是相當快速（要改寫整版應該也行，有對照的依據）。

不過依 wini 兄的說明，應該是沒可能了，而要在一天內弄完也是來不及的，多謝三位的說明。

有試過wini說的!important嗎?
另外要注意CSS的某些屬性是不會繼承的
(PS: 其實我說恐怖的是那個JSP用的tags)

_________________
以下為簽名檔
半荒廢日誌....

Foolproof Project:
KomiX 漫畫瀏覽
Khopper 音樂轉檔

就算你百分之一百認定某人是渣滓中的渣滓，請仍然展示你的冷靜、體諒、尊重。

Stylish 的每個樣式表是這樣的（目標是網頁時）：



其中 @-moz-document 後面接的部分，是判斷該用什麼方式(domain, url-prefix...)來處理網址，只要點 Stylish 圖示選一選就會全幫你填好了。

其它的我上面應該都有說了，不過如果你一定要用別的工具的話，那大概是不必看 DOM 觀察器的部分啦。

（剛看了一下，是網址判斷的部分有誤而已，建議直接點 Stylish 圖示來選用適當的樣版來填。）

----
話說剛從 Google 挖回來 MozTW Wiki 上的 Stylish 資源整理頁面了

_________________
【Firefox 有問題請先看這裡】
回覆文章的建議
萬用自我檢測除錯大法 for Firefox
完全備份大法 for Firefox
重建 Firefox 的設定
乾淨升級 Firefox
（本帳號停用中）

原來如此，關於 wini 兄所說的 !important，我也嘗試過，也是無解。

也多謝 wini 兄的說明，我也不是一定非要用該種方式不可，只是礙於時間緊迫，不能花個幾天的工夫去慢慢研究 CSS，昨晚稍微看了一點有關CSS 的教學，用是會一點，不過也只會稍微改些簡單的網頁（如：Google、MozTW）。

還是說可以推薦個適合初學者的 CSS 中文教學，小弟還剩下一天，可以再研究看看。

http://www.w3.org/TR/REC-CSS2/selector.html

5.1的表格就講得很清楚了
我先自婊它不是中文....
但是學習真的沒有王者之路

話說我寫這樣就出來了

不知道你卡在哪裡?

_________________
以下為簽名檔
半荒廢日誌....

Foolproof Project:
KomiX 漫畫瀏覽
Khopper 音樂轉檔

就算你百分之一百認定某人是渣滓中的渣滓，請仍然展示你的冷靜、體諒、尊重。

因為你本來並沒有說明那部分不懂，
所以我想說假設嚴苛一點，指引的完整一點。
（我是有裝但沒在用Web Developer啦，因為覺得Firebug比較合我用。）

可是看到你這裡的說明，我又搞不懂了。

你是不是把CSS的功能搞錯了呢？
CSS的使用，只是把html語法作微調排版。（基本上啦）

合作金庫的網頁，它並不是另外呼叫內部檔案，它的CSS語法就寫在網頁開頭啊。
不過寫太累贅了，看Firebug都把它簡化了

legnaleurc兄已經寫出來了，我只補充如果用.text就只影響到表格內部。
如果是wini兄說的table *，就是整個表格。

我相信MozTW絕對不是個好改的網站，我都直接借以前大大po的來用。

------
題外話，
我想大家學習CSS的方法都一樣吧？
上網加買書。
再來就是天下文章一大抄，
誰的網站寫得好，就把它的抄來研究利用。

多謝三位的說明，legnaleurc 兄，其實問題被 wini 兄點出來，不過我沒能理解，legnaleurc 兄你幫忙改出來的 code 就讓我看出問題：


因為 wini 兄提到「Stylish 的每個樣式表是這樣的（目標是網頁時）」，我想也是這樣（看其它現成的例子），所以一直以

為目標，但其實問題就在這邊，不能用
而是要用



其實 wini 兄在最後一段有提到「（剛看了一下，是網址判斷的部分有誤而已，建議直接點 Stylish 圖示來選用適當的樣版來填。） 」，只是我一時沒能意會，原來 Stylish 可以幫忙製作樣版，看到 legnaleurc 兄的 code，再回頭想清楚 wini 兄的說明，問題就很清楚了。


更要感謝 CSY 兄，幸虧你的說明「legnaleurc 兄已經寫出來了，我只補充如果用.text就只影響到表格內部。
如果是wini兄說的table *，就是整個表格。 」，我才能進一步找出原因，不然我也不會想到，明明兩個網頁的大體是用 table 來呈現，怎麼會無法一體適用，進而留意到 legnaleurc 兄 Code 的有關 Stylish 的樣式表開頭部份與我的部份有異，也不會回頭去想 wini 兄所說的部份。

PS：沒想到花了這麼多時間，結果卡在這地方（我自己覺得蠻可笑的），問題一解決，之前嘗試改的部份就都能用了。

之前我還以為是我不熟悉 Web Develop、FireBug 的用法，想說找出來的 CSS 怎麼不會是要改的目標，後來看了 CSS 教學又覺得沒找錯，Copy 來的樣式表我以為能配合的部份我都配合了，想不出頭緒，看到 wini 兄把『@-moz-document domain("moztw.org")』字放大，我以為 wini 兄意思是我把目標網頁打錯，可左看右看都看不出所以然，後來也嘗試把網址改成：

http://www.tcb-bank.com.tw/
www.tcb-bank.com.tw/
www.tcb-bank.com.tw/wps/WPS_PA_901/jsp/ ... geMore.jsp

當然都不能用，可當時為什麼沒想到改成：

www.tcb-bank.com.tw
tcb-bank.com.tw

之類的，現在想想也是挺奇怪的，好像腦袋會自動忽略一樣，怪啊 =_=!!