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说:

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

说点什么吧




wireless earbuds moscow mule mugs bluetooth speakers waterproof camera best wireless earbuds best vacuum cleaner best drugstore foundation best dishwasher best waist trainer wireless headphones best vacuum 0594918 best bluetooth earbuds waterproof bluetooth speaker tattoo cover up action camera
订阅本站