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

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

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

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

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

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/ 沒？通過這些的屬性值設定，你可以隨意修改。 保存所做的修改，搞定。

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

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

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

分享題目：Joomla教程查看并修改模板的CSS技巧
URL地址：http://m.newbst.com/news25/278775.html

成都網站建設公司_創新互聯，為您提供定制開發、網站營銷、App設計、移動網站建設、網站維護、營銷型網站建設

廣告

聲明：本網站發布的內容（圖片、視頻和文字）以用戶投稿、用戶轉載內容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網站立場，如需處理請聯系客服。電話：028-86922220；郵箱：631063699@qq.com。內容未經允許不得轉載，或轉載時需注明來源： 創新互聯