WordPress主题(模板)修改教程(七):如何使用火狐的firebug插件

十一月 28
磊子 2011年 6 条评论

由于前几天家里断网,耽搁了几天,那时真是郁闷之极,不过还是乐观面对吧。今天继续为大家讲解wordpress主题修改,前几篇主要说了下基础方面的东西,虽然简单但是还需要下点功夫来掌握哟。今儿主要说下主题修改的必要工具,火狐浏览器的firebug插件使用安装方法磊子在第一篇教程准备工作中有写到,不大清楚的可以点击看下。

我们在修改主题时一般都是找到自己的喜欢的一款的主题后,将里面自己觉得不需要的,或者哪里需要添加点儿功能和样式的然后进行修改。还有就是自己开发主题,但是不想一个一个文件创建这样一步一步做,于是找些适合开发的主题框架进行修改和制作,不过通过磊子在网上的接触大多数都是前者。自己建个博客写点东西,并没有想把学习这些东西,即便如此你也需要一个方便的工具来使用,这样做起来效率上是非常高的。而后者选择合适的主题框架进行开发,我们需要的框架首先主题很简洁,文件结构简单(像默认主题显得有点儿多,有些东西其实我们是用不到的),还有就是没有过多的主题设置等等一些内容进行开发制作主题,这样更需要一个好的辅助工具来帮助你,火狐浏览器的firebug插件就是一款非常好用的工具。刚好磊子在: 龟仙岛站中看到了 在Firebug中调试CSS,这篇文章!分享给大家!

1.审核层级表规则

检查一个CSS元素非常简单,类似于在上一章中介绍的检查一个HTML元素。要检查一个CSS元素,我们只需要将Firefox以检查模式(inspect mode)打开。

注意:可以使用以下两个方法来打开Firebug的检查模式:

Ctrl+Shift+c 快捷键直接打开检查模式 按F12,然后点击如下图标,这个图标在Firebug窗口左上角,紧挨着臭虫图标。Firebug选择区域查看图标

下面这个截图演示了对一个HTML元素的CSS检查(观察屏幕上的Zen Garden的矩形框):

查看CSS

下面是找到并检查一个HTML元素的CSS格式的步骤:

打开一个站点(本例是http://wwww.csszengarden.com)并且按Ctrl+Shift+C(默认快捷键),以检查模式 打开Firebug。 移动鼠标指针到Web页面我们希望检查的HTML元素上。如下一个截图所示(本例中是印有“Zen Garden”字样的图片)。随着鼠标移动,我们可以看到在鼠标下面显示有一个蓝色的矩形框。无论矩形框内包含的是什么内容,Firebug都将立即显示 该内容的HTML代码在左边的面板中,而该内容的CSS代码将显示在右边的面板中。 当我们找到了有问题的HTML元素,点击它。此时Web页面上的矩形框消失了,在Firebug将显示出该元素的HTML代码和CSS规则。

Firebug也将显示链接(在右边的面板中),并指示出CSS文件中所应用的CSS属性所在行数。当我们点击链接,Firebug将转到CSS标 签页, 并显示出该CSS文件所链接的行的内容。这个特性能够帮助web开发者和设计者轻松的找到准确的CSS文件以及需要作出调整的内容所在行。

2.预览颜色与图片

为确认我们是否已经选择了正确的元素,在CSS规则查看的面板中,移动鼠标指针在到背景的URL值上面,如下图所示。这时将在Firebug中显示 出图片 预览。只要我们把鼠标移动到这个值上面,Firebug将显示方便的预览提示,并在这个图片预览中显示图片的宽度与高度。

在Firebug中预览图片

与之类似,我们也可以在Firebug中预览颜色。例如,我们来检查<h3>元素:The Road to Enlightment,如下图所示:

在Firebug中预览字体颜色

现在,我们移动鼠标指针到CSS属性color的值上(在本例中该值为#7D775C),如下面的屏幕截图:

在Firebug中预览字体颜色2

3.即时微调CSS

使用Firebug,可以编辑CSS规则,即时微调CSS属性,并且实时地查看在页面上刚刚发生的改变。我们不必每次在对CSS文件做出改变时,都重载页面。这个Firebug的特点不仅节约了我们的开发时间和成本,并且帮助我们修正CSS中的错误和问题。

Firebug会显示所有对被选中元素有影响的CSS规则,以及那些继承自祖先元素的CSS规则。如果某些CSS属性或样式被覆写了,这些规则和属性仍然会显示,不过是以被删除的方式显示(例如,color:red)。

小贴士:当编辑CSS属性时,可以按ESC键来取消编辑。

现在让我们来讨论如何微调前面的例子:”The Roda to Enlightment”,在前面我们已经看到其屏幕截图。现在回想一下<h3>元素的颜色属性,或者我们指出如下的CSS样式:

h3 { color:#7D775C;
font-family:georgia,sans-serif;
font-size:1.4em;
font-size-adjust:none;
font-style:italic;
font-variant:normal;
font-weight:normal;
letter-spacing:1px;
line-height:normal;
}

为了从Firebug中编辑此CSS规则,只需如下几步:
打开Firebug并且检查需要编辑CSS规则的有疑问的HTML元素。 在HTML标签的“样式”面板下,点击CSS属性值(在我们的例子中,点击CSS属性color的值#7D775C。当我们点击后,一个小的文本编辑框将会出现,如下截图所示:

用Firebug编辑颜色

现在,在#7D775C这里输入red。效果可以立即在页面上看到;所选中元素的颜色已经改变为红色,这里并没有重载页面。
注意:当CSS属性处于可编辑的模式时,你可以用这个方法在属性之间跳转来浏览它们的值:按TAB键向前跳转,按Shift+TAB键向后跳转。

有另外一个容易的方法来编辑CSS样式表。在CSS标签页上点击“编辑”按钮,此时Firebug将把CSS面板变成一个编辑器。当我们完成编辑后,再次 点击“编辑”按钮。通过点击这个按钮,将保存我们所做的改变,并且再次将这个面板由编辑器变成正常的CSS面板模式。

用Firebug编辑颜色2

4.启用及禁用某个CSS规则

Firebug允许我们在CSS内来禁用影响某个元素的样式。当我们禁用某个属性,并且这个属性值在样式表中已经被覆写为另外的值,那么此前被覆盖 的值将 重新激活,我们可以这样删除属性值来测试网页。为了关掉一个属性,我们可以在“样式”面板中点击此属性左边,这里将出现一个红色的“禁用”图标(如下图), 此属性将变灰或者消失。同时,对这个新的属性值产生实际影响的层级表元素,其删除线将被移除。我们可以让这个被禁用的属性值重新启用,只要我们再次点击 “禁用”小图标。但是,如果这个属性值是因为被覆写而“消失”了,我们将不得不再次查看该元素来显示出消失的属性,然后启用它。

下面两个截图演示了启用和禁用CSS属性:

Firebug禁用CSS功能

当我们禁用h3的CSS的color属性时,发生下列改变:

<h3>元素“The Road to Englightment”的颜色将发生改变。 我们禁用的属性将变灰。 影响这个元素的color属性值上的删除线将被移除。

Firebug禁用效果

在上图中,启用CSS属性的效果已经高亮显示出来。文本颜色被再次改变为红色,body规则的CSS颜色属性被覆写了。

5.检查我们的样式表

Firebug的HTML标签页仅仅让我们检查单一元素的CSS样式,而主CSS标签页让我们可以浏览该页面导入的整个样式表。为了检查当前页面导入的全部样式表,我们需要使用CSS标签页。下面的截图显示了如何从下拉菜单中选择样式表:

检查CSS

在CSS标签页,我们可以看到在顶端左边的“编辑”按钮的旁边有一个下拉菜单。点击这个下拉菜单,它将会显示导入此页面的样式表清单。现在,我们可以轻松的在这个标签页内选择要检查的样式表。

一旦我们从列表中选择了样式表,该样式表将在CSS标签页中打开供查看。

6.从Firebug的UI修改CSS

当我们在Firebug中右击CSS属性,如下图所示,一个与CSS相关的快捷菜单将会出现,在这个菜单上有几个选项。这是一个动态的上下文菜单,显示的选项有:编辑、删除、禁用等与我们所点击的CSS属性相关的选项。

Firebug的CSS功能

现在让我们来了解此菜单的各种选项:

新建规则:当我们点击“新建规则…”选项时,在Firebug窗口中将出现一个小的编辑器。在这个编辑器中你可以定义一个新的CSS选择器,也就是说,你可以在这里定义一个CSS类或ID。按TAB键来执行这个改变。

修改CSS

新建属性值:当我们点击“新建属性值…“选项时,Firebug将在此CSS规则内打开一个小的编辑框,在 这里我 们可以就点击的CSS属性定义一个新的属性值。在此区域内,我们可以输入任意的CSS属性(例如外边距、内边距、背景、颜色等等)我们可以通过按TAB 键,并输入我们想要的值的方式,将属性值赋予一个属性。

小贴士:你也可以通过在任意CSS规则前面双击的方式,来定义新的属性。

下面的截图显示了“新建属性值…“的菜单选项:

新建属性

编辑“**属性”通过编辑此选项,Firebug让我们可以编辑显示在菜单中的某个属性。
注意:我们也可以简单的点击此属性来编辑它。一旦我们点击了此属性,Firebug就让它变成可编辑的状态。如果我们想要取消编辑,只需点击ESC键。
删除“**属性”此选项将从CSS中移除该属性。如果我们希望被移除的属性又放回来,只需刷新页面。
禁用“**属性”这个菜单选项将禁用该CSS属性。禁用属性并不会把该属性从文档中移除,我们总是能够通过点击“禁用图标”来再次启用它。

7.检查和微调盒模型

盒模型使我们可以设置所选元素的高度、宽度、内边距、边框和外边距。当你在查看一个元素时,左边面板中显示HTML代码,右边面板显示CSS。在选 择 HTML标签页时,在右边面板的上面将显示“布局”(Layout)标签。为了查看此页面上任意元素的高度,当这个窗口打开并且移动鼠标到我们想检查的行 中或块级元素,你可以点击查看图标,或者使用Ctrl+Shift+C快捷键。

检查模型

8.在CSS标签页中搜索

为了在CSS标签页中进行搜索,我们所要做的就是使用Firebug的搜索框并在该框中写入搜索字符串。在CSS标签页,搜索框的行为发生了改变,并且搜索的空间变成当前的CSS文件。
在搜索的时候,为了区分大小写,我们可以从弹出菜单中选择“强制区分大小写”选项,这个菜单在搜索框取得焦点时弹出。
我们还可以从这个菜单中选择“多个文件”选项,选择此选项增加了搜索范围,Firebug将在所有的CSS文件对输入的字符串进行搜索。
“上一个”和“下一个”按钮可以在浏览输出结果时使用。(译者注:在新的1.6版本中,还增加了一个选项“使用正则表达式”)

检查模型2

9.小结
在本章中,我们讨论了怎样轻松和迅速的使用Firebug来即时微调CSS样式。我们可以即时在页面上看到所做的改变。
我们学会了如何检查DOM树中引起错误的元素以及如何调整其CSS规则。如果一个元素具有color或者background(image)的CSS属性,我们可以通过Firebug的弹出提示工具来预览其颜色或图片。
如果我们想移除一个元素的某些CSS属性,我们可以通过点击“禁止”图标来启用或禁用这些属性。

» 版权所有©转载必须以链接形式注明作者和原始出处:磊子的博客 » WordPress主题(模板)修改教程(七):如何使用火狐的firebug插件
» 地址:( Ctrl+C 复制 )
» 如果对本站感兴趣,请到网站右下方订阅本站,将为你带来更多精彩和实用的文章
» 如果您对这篇文章感兴趣,不妨小小的 捐助(Donate)一下博主吧,不管多少都是对博主最大的支持和鼓励哟,博主-磊子感谢大家的支持!!!

6 条留言 其中:访客:5 条, 博主:1 条

  1. 贾说:

    教程不错,我是菜鸟都可以看得懂

  2. 依然说:

    试了试这个插件,的确挺好用,不过修改是不能实时保存的对吧,我看好像没有保存选项。磊子的博文像指向标,我正按着你指的路自由发挥呢!

  3. :shock:

  4. Chrome的审核元素已经够我用了

  5. Robin说:

    博主创作相当认真啊,加油~

说点什么吧




订阅本站