論壇上有許多關(guān)于CSS的問題，例如“想找的樣式究竟在哪里？” “模塊的樣式是在哪里設(shè)定的？”等等。本文將介紹一些免費(fèi)但壯大的工具來幫助我們迅速解決以上提出的那類問題。

Firefox瀏覽器提供了許多工具，特殊是一些很好的插件，會在我們的web開發(fā)工作中提供特別很是有效的幫助。出自Chris Pederick的“Web Developer Extension”是一款極其優(yōu)異的工具。該插件會在Firefox中增添一條用于開發(fā)的工具條(當(dāng)然可以設(shè)置為隱藏)。在眾多其他類似的工具中，“Web Developer Extension”在CSS方面的體現(xiàn)好為出眾。

關(guān)于CSS的使用，有許多問題需要了解：編輯CSS，查看CSS，添加用戶樣式表，查看樣式信息等等。本文中將要探討的好主要的一點(diǎn)就是怎樣去查看樣式信息。

假設(shè)你在CSS方面的經(jīng)驗(yàn)很有限，你不了解“table.moduletable”代表什么，或者它在模板的CSS中起怎樣的作用。但是你希望修改 模板中某個指定模塊(module)的頭部背景。通過快捷鍵Ctrl+Shift+Y，我們可以開啟“Web Developer Extension”中查看樣式信息的功能。窗口中會出現(xiàn)一個十字光標(biāo)，你可以移動它到模板上。設(shè)想你希望修改某個模塊的頭部背景及尺寸，但你不知道到哪 里做怎樣的修改。

通過“Web Developer Extension”的查看樣式信息功能，將十字光標(biāo)置于需要修改的模塊頭部并點(diǎn)擊，之后你會看到例如下面這樣的樣式代碼：

table.moduletable th
{
background-color: transparent;
background-image: url(../images/title_background.png);
background-repeat: no-repeat;
background-attachment: scroll;
-x-background-x-position: 0%;
-x-background-y-position: 0%;
-moz-background-clip: initial;
-moz-background-origin: initial;
-moz-background-inline-policy: initial;
vertical-align: middle;
font-size: 11px;
font-weight: bold;
color: rgb(204, 204, 204);
text-align: left;
text-indent: 15px;
width: 100%;
height: 24px;
text-transform: uppercase;
}

通過這些代碼，我們可以了解到：

"table.moduletable.th"的容器是什么；這就是我們需要修改樣式的元素，可以使用文本編輯器或任何其他高級編輯器來找到樣式文件并修改此容器的樣式。 假如你想修改某個樣式，看到那些color/size/weight/width/spacing/ 沒？通過這些的屬性值設(shè)定，你可以隨意修改。 保存所做的修改，搞定。

安裝使用“Web Developer Extension”的步驟是這樣的：

下載Firefox瀏覽器(假如電腦里沒有安裝Firefox的話)。 安裝并選擇“自定義安裝”，確保選中安裝開發(fā)工具。 Firefox會主動完成剩余的安裝部分。 打開Firefox，選擇“工具”>“附加組件”>“獲取附加組件”>“瀏覽悉數(shù)附加組件”，搜索到“Web Developer”并點(diǎn)擊“安裝到Firefox”。 按照提醒重啟Firefox之后，在安裝好的“Web Developer”工具條中的CSS下拉菜單中找到“查看樣式信息”并點(diǎn)擊(或通過快捷鍵Ctrl+Shift+Y)。

該插件的其他功能同樣值得花時間去了解和使用。