用Firefox点击和编辑CSS?

时间:2010-05-18 13:51:07

标签: css firefox firebug web-developer-toolbar

我希望能够点击网页的一部分并查看CSS标记。

它使用什么CSS规则,类,ID等,并且能够实时编辑它们。

我已经安装了Firebug和Web开发人员插件,但我不知道该怎么做。

5 个答案:

答案 0 :(得分:6)

您需要在页面上单击鼠标右键,然后选择“检查元素”。

或者,您可以选择工具栏上的“检查元素”选项,当您将鼠标悬停在页面上的项目上时,鼠标下方的任何内容都会立即显示在Firebug窗口中。从这里,您可以查看/编辑/操作底层的html和css。

http://getfirebug.com/html

http://getfirebug.com/wiki/index.php/Main_Page

以上链接可能会引用Firebug的网站,维基也有很好的信息。

答案 1 :(得分:3)

Right Click->Inspect Element .....只需右键单击要查看的元素,然后选择Inspect Element ...

答案 2 :(得分:2)

使用firebug,右键单击并选择inspect元素。

使用Web Developer工具栏,单击CSS,然后从下拉菜单中单击编辑CSS。

答案 3 :(得分:1)

安装了firebug后,右键单击要选择的元素,然后单击inspect元素。

使用Web Developer Toolbar,按ctrl + shift + f打开概述框并显示元素的东西。

为了在执行inspect元素后在firebug中编辑文档,只需单击各个元素或添加新元素即可更改值。请注意,如果没有额外的插件,这些数据将无法保存。

这里有一个使用firebug的指南:http://getfirebug.com/html

答案 4 :(得分:0)

您可以使用Firebug检查正在使用的内容。在网上找到文档应该不会太难,一旦你明白了,就可以轻松选择元素,查看它们的应用样式以及它们来自何处(包括继承和覆盖)。

还有非常好的Web Developer Toolbar,它有很多可能性:

https://addons.mozilla.org/en-US/firefox/addon/web-developer/

可能需要一些时间来尝试全部并找到您真正需要的任务,但了解元素结构和已应用于它的CSS会很有帮助。

Firebug还允许进行一些编辑,但还有另一个工具EditCSS

https://addons.mozilla.org/en-US/firefox/addon/editcss/

它会打开一个侧边栏,其中包含已经存在的所有CSS,您可以在侧边栏中对其进行编辑(根据需要更改,删除或添加内容)。

所有人都可以合并,使用firebug和Web开发人员来了解已有的内容和EditCSS进行实时编辑。