由于前几天家里断网，耽搁了几天，那时真是郁闷之极，不过还是乐观面对吧。今天继续为大家讲解wordpress主题修改，前几篇主要说了下基础方 面的东西，虽然简单但是还需要下点功夫来掌握哟。今儿主要说下主题修改的必要工具，火狐浏览器的firebug插件使用安装方法磊子在第一篇教程准备工作中有写到，不大清楚的可以点击看下。
我们在修改主题时一般都是找到自己的喜欢的一款的主题后，将里面自己觉得不需要的，或者哪里需要添加点儿功能和样式的然后进行修改。还有就是自己开 发主题，但是不想一个一个文件创建这样一步一步做，于是找些适合开发的主题框架进行修改和制作，不过通过磊子在网上的接触大多数都是前者。自己建个博客写 点东西，并没有想把学习这些东西，即便如此你也需要一个方便的工具来使用，这样做起来效率上是非常高的。而后者选择合适的主题框架进行开发，我们需要的框 架首先主题很简洁，文件结构简单(像默认主题显得有点儿多，有些东西其实我们是用不到的)，还有就是没有过多的主题设置等等一些内容进行开发制作主题，这 样更需要一个好的辅助工具来帮助你，火狐浏览器的firebug插件就是一款非常好用的工具。刚好磊子在: 龟仙岛站中看到了 在Firebug中调试CSS,这篇文章！分享给大家！
1.审核层级表规则
检查一个CSS元素非常简单，类似于在上一章中介绍的检查一个HTML元素。要检查一个CSS元素，我们只需要将Firefox以检查模式（inspect mode）打开。
注意：可以使用以下两个方法来打开Firebug的检查模式：
Ctrl+Shift+c 快捷键直接打开检查模式 按F12，然后点击如下图标，这个图标在Firebug窗口左上角，紧挨着臭虫图标。
下面这个截图演示了对一个HTML元素的CSS检查（观察屏幕上的Zen Garden的矩形框）：
下面是找到并检查一个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中预览颜色。例如，我们来检查<h3>元素：The Road to Enlightment，如下图所示：
现在，我们移动鼠标指针到CSS属性color的值上（在本例中该值为#7D775C），如下面的屏幕截图：
3.即时微调CSS
使用Firebug,可以编辑CSS规则，即时微调CSS属性，并且实时地查看在页面上刚刚发生的改变。我们不必每次在对CSS文件做出改变时，都重载页面。这个Firebug的特点不仅节约了我们的开发时间和成本，并且帮助我们修正CSS中的错误和问题。
Firebug会显示所有对被选中元素有影响的CSS规则，以及那些继承自祖先元素的CSS规则。如果某些CSS属性或样式被覆写了，这些规则和属性仍然会显示，不过是以被删除的方式显示（例如，color:red）。
小贴士：当编辑CSS属性时，可以按ESC键来取消编辑。
现在让我们来讨论如何微调前面的例子：”The Roda to Enlightment”，在前面我们已经看到其屏幕截图。现在回想一下<h3>元素的颜色属性，或者我们指出如下的CSS样式：
01 | h3 { color:#7D775C; |
02 | font-family:georgia,sans-serif; |
03 | font-size:1.4em; |
04 | font-size-adjust:none; |
05 | font-style:italic; |
06 | font-variant:normal; |
07 | font-weight:normal; |
08 | letter-spacing:1px; |
09 | line-height:normal; |
10 | } |
为了从Firebug中编辑此CSS规则，只需如下几步：
打开Firebug并且检查需要编辑CSS规则的有疑问的HTML元素。 在HTML标签的“样式”面板下，点击CSS属性值（在我们的例子中，点击CSS属性color的值#7D775C。当我们点击后，一个小的文本编辑框将会出现，如下截图所示：
现在，在#7D775C这里输入red。效果可以立即在页面上看到；所选中元素的颜色已经改变为红色，这里并没有重载页面。
注意：当CSS属性处于可编辑的模式时，你可以用这个方法在属性之间跳转来浏览它们的值：按TAB键向前跳转，按Shift+TAB键向后跳转。
有另外一个容易的方法来编辑CSS样式表。在CSS标签页上点击“编辑”按钮，此时Firebug将把CSS面板变成一个编辑器。当我们完成编辑后，再次 点击“编辑”按钮。通过点击这个按钮，将保存我们所做的改变，并且再次将这个面板由编辑器变成正常的CSS面板模式。
4.启用及禁用某个CSS规则
Firebug允许我们在CSS内来禁用影响某个元素的样式。当我们禁用某个属性，并且这个属性值在样式表中已经被覆写为另外的值，那么此前被覆盖 的值将 重新激活，我们可以这样删除属性值来测试网页。为了关掉一个属性，我们可以在“样式”面板中点击此属性左边，这里将出现一个红色的“禁用”图标(如下 图)， 此属性将变灰或者消失。同时，对这个新的属性值产生实际影响的层级表元素，其删除线将被移除。我们可以让这个被禁用的属性值重新启用，只要我们再次点击 “禁用”小图标。但是，如果这个属性值是因为被覆写而“消失”了，我们将不得不再次查看该元素来显示出消失的属性，然后启用它。
下面两个截图演示了启用和禁用CSS属性：
当我们禁用h3的CSS的color属性时，发生下列改变：
<h3>元素“The Road to Englightment”的颜色将发生改变。 我们禁用的属性将变灰。 影响这个元素的color属性值上的删除线将被移除。
在上图中，启用CSS属性的效果已经高亮显示出来。文本颜色被再次改变为红色，body规则的CSS颜色属性被覆写了。
5.检查我们的样式表
Firebug的HTML标签页仅仅让我们检查单一元素的CSS样式，而主CSS标签页让我们可以浏览该页面导入的整个样式表。为了检查当前页面导入的全部样式表，我们需要使用CSS标签页。下面的截图显示了如何从下拉菜单中选择样式表：
在CSS标签页，我们可以看到在顶端左边的“编辑”按钮的旁边有一个下拉菜单。点击这个下拉菜单，它将会显示导入此页面的样式表清单。现在，我们可以轻松的在这个标签页内选择要检查的样式表。
一旦我们从列表中选择了样式表，该样式表将在CSS标签页中打开供查看。
6.从Firebug的UI修改CSS
当我们在Firebug中右击CSS属性，如下图所示，一个与CSS相关的快捷菜单将会出现，在这个菜单上有几个选项。这是一个动态的上下文菜单，显示的选项有：编辑、删除、禁用等与我们所点击的CSS属性相关的选项。
现在让我们来了解此菜单的各种选项：
新建规则：当我们点击“新建规则…”选项时，在Firebug窗口中将出现一个小的编辑器。在这个编辑器中你可以定义一个新的CSS选择器，也就是说，你可以在这里定义一个CSS类或ID。按TAB键来执行这个改变。
新建属性值：当我们点击“新建属性值…“选项时，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版本中，还增加了一个选项“使用正则表达式”）
9.小结
在本章中，我们讨论了怎样轻松和迅速的使用Firebug来即时微调CSS样式。我们可以即时在页面上看到所做的改变。
我们学会了如何检查DOM树中引起错误的元素以及如何调整其CSS规则。如果一个元素具有color或者background(p_w_picpath)的CSS属性，我们可以通过Firebug的弹出提示工具来预览其颜色或图片。
如果我们想移除一个元素的某些CSS属性，我们可以通过点击“禁止”图标来启用或禁用这些属性。
