在Firebug中调试CSS

本章里我们将一步一步的学习在CSS开发中，使用Firebug都能做什么。

注意：

在整个本章中，我们都将使用http://www.csszengarden.com作为例子来解释CSS开发。这个站点演示了基于CSS的设计能够完成哪些可视化的任务。

 

审核层级表规则

 

对于非Firefox的浏览器，当开发者遇到段落是红色，而不是他所想要的蓝色时，他只能去撞墙了。然而感谢Firebug，现在我们可以轻松的审查有问题的HTML元素，并且很快找到引起问题的CSS规则。

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

注意：

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

• Ctrl+Shift+c 快捷键直接打开检查模式
• 按F12，然后点击图标，这个图标在Firebug窗口左上角，紧挨着臭虫图标。

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

 

 

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

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

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

 

预览颜色与图片

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

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

 

注意：

为了检查文本或者任何其他HTML元素，请按照本章后面“检查层级规则”一节所述步骤操作。
现在，我们移动鼠标指针到CSS属性color的值上（在本例中该值为#7D775C），如下面的屏幕截图：

 

 即时微调CSS

 以前的：以前，设计者必须编辑与文档相联系的CSS文件中的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。当我们点击后，一个小的文本编辑框将会出现，如下截图所示：
现在，在#7D775C这里输入red。效果可以立即在页面上看到；所选中元素的颜色已经改变为红色，这里并没有重载页面。

 注意：当CSS属性处于可编辑的模式时，你可以用这个方法在属性之间跳转来浏览它们的值：按TAB键向前跳转，按Shift+TAB键向后跳转。

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

 

 启用及禁用某个CSS规则

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

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

 

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

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

 

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

 检查我们的样式表

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

 

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

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

 从Firebug的UI修改CSS

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

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

    
    
新建规则：

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

   

   新建属性值：

• 当我们点击“新建属性值...“选项时，Firebug将在此CSS规则内打开一个小的编辑框，在这里我们可以就点击的CSS属性定义一个新的属性值。在此区域内，我们可以输入任意的CSS属性（例如外边距、内边距、背景、颜色等等）

  我们可以通过按TAB键并输入我们想要的值的方式，将属性值赋予一个属性。
   小贴士：你也可以通过在任意CSS规则前面双击的方式，来定义新的属性。

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

   

   

• 编辑“＊＊属性”

  通过编辑此选项，Firebug让我们可以编辑显示在菜单中的某个属性。

  注意：

  我们也可以简单的点击此属性来编辑它。一旦我们点击了此属性，Firebug就让它变成可编辑的状态。如果我们想要取消编辑，只需点击ESC键。
   

• 删除“＊＊属性”

  此选项将从CSS中移除该属性。如果我们希望被移除的属性又放回来，只需刷新页面。

• 禁用“＊＊属性”

  这个菜单选项将禁用该CSS属性。禁用属性并不会把该属性从文档中移除，我们总是能够通过点击“禁用图标”来再次启用它。

 

检查和微调盒模型

 

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

 

 

在CSS标签页中搜索

 

为了在CSS标签页中进行搜索，我们所要做的就是使用Firebug的搜索框并在该框中写入搜索字符串。在CSS标签页，搜索框的行为发生了改变，并且搜索的空间变成当前的CSS文件。

在搜索的时候，为了区分大小写，我们可以从弹出菜单中选择“强制区分大小写”选项，这个菜单在搜索框取得焦点时弹出。

我们还可以从这个菜单中选择“多个文件”选项，选择此选项增加了搜索范围，Firebug将在所有的CSS文件对输入的字符串进行搜索。

“上一个”和“下一个”按钮可以在浏览输出结果时使用。（译者注：在新的1.6版本中，还增加了一个选项“使用正则表达式”）

 

 

小结

 

在本章中，我们讨论了怎样轻松和迅速的使用Firebug来即时微调CSS样式。我们可以即时在页面上看到所做的改变。

我们学会了如何检查DOM树中引起错误的元素以及如何调整其CSS规则。如果一个元素具有color或者background(image)的CSS属性，我们可以通过Firebug的弹出提示工具来预览其颜色或图片。

如果我们想移除一个元素的某些CSS属性，我们可以通过点击“禁止”图标来启用或禁用这些属性。

转载地址：http://mynoteweb.com/en/node/112