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

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

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

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

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

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;
}

通過(guò)這些代碼，我們可以了解到：

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

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

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

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