輕輕鬆鬆改CSS
原文 — faq — 2006-03-08 01:53:10
原文來自：http://sidekick.myblog.hk/archives/2006/03/06/744/
同 CSS 玩遊戲！
by: sidekick
CSS 是英語Cascading Style Sheets（層疊樣式表）的縮寫，它是一種用來表現HTML或XML等文件式樣的電腦語言。它的定義是由W3C來維護的。
(摘自 wikipedia)我們的 blog 頁面，大部份都是用 CSS 去制定頁面的配置，要改好像很難？
要寫就難，要改，其實很易！
來！讓我們跟 CSS 一起玩遊戲！
Firefox 是一個很好用的 browser，再加上為它而設的眾多 extension，功能就超大、超方便了！
要改 CSS，其實不用 dreamweaver之類的專業軟件，一個 Firefox 就夠了！
所需材料如下：
1/ Firefox Browser
2/ Web Developer Extension- 修改 CSS 用
（在Jacky的網摘看到，這extension 剛成為Extend Firefox Contest 的Grand Prize Winner: Upgraded Extension）
3/ ColorZilla Extension- 選顏色用
4/ IE Tab extension- 在 Firefox 觀看頁面在 IE 的效果方法：
用 Firefox 打開自己的 blog，在 Web Developer 的 menu bar，選 edit CSS，就會看到這個樣子：
左邊列出的，就是你的 blog 的 CSS script。你可以隨意修改 CSS 內的各類參數，如字體的大小、顏色、位置、甚至字距、行距等等，效果會即時顯示出來！
例如以mysinablog為例，“div.post_content”就是內文的設定，你將“font : 13px”的 13 改為更大的數值，字體就會即時變大，很好玩的！
放心！這並不會真正改動你 blog 的CSS設定，所以就算改錯了也沒所謂，盡管放膽去試罷！
注意：在改動中，不要點擊右邊的連結（mouse on 是可以的），否則左邊的 CSS script 會 reload，你之前的改動會消失的。
要偷師嗎？你可以用同樣的方法，到別人的 blog 看他的 CSS script。
給你顏色看！
看到左下角的吸管 icon 嗎？只要 click 一下，再放滑鼠放到右邊的不同位置，即會顯示出顏色的代碼。
（例如 Just another Sidekick 這個標題字的顏色 hex code 就是 #EDAA35）
有了這兩個 extension，按圖索驥般的亂摸一通，就算不懂 CSS，也可以輕易的猜出哪一句 script 跟版面的關係。
還以顏色！
想選另一個新顏色？可以 double click 左下角的吸管 icon，就會叫出 ColorZilla 的 Color Picker小窗口：
選一個新顏色後，抄下它的hex code，放到左列的相關位置，就是改顏色的方法了。
上傳
如此這般，改好了後，“全選”左邊的CSS script，copy and paste 到 blog 內的相關管理頁面就可以了！
當然，我會建議你先備份好舊的 CSS script，以防萬一！
（不同的 blog system有不同的上傳方法，這裡不細表了。）
看效果
完成後，又懶得開 IE 看效果？你可以在頁面 right click 滑鼠，選“View Page in IE tab”就可以了！
後話
大概就是這樣了，改 CSS 其實不太難嘛！就當是遊戲好了！
邊改邊學，是較易上手的方法。
到有興趣時，再看看其他網站的 CSS 教學罷！
相關文章：文繞圖的css script
回應(9) | 回應的RSS | 暫時未有引用通告| 
(1)
