Joomla教程查看并修改模板的CSS技巧

论坛上有许多关于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)。

该插件的其他功能同样值得花时间去了解和使用。