试读《精彩绝伦的CSS2》

      这本书的试读章节只有第一章，我个人感觉并没有说到很核心的东西。那么就第一章来说，主要介绍了写CSS的工具。前面那本书我就说过，我是做PHP的。所以对前台的东西多少都得有点了解。在以往的项目中我也接触过CSS，当然更是使用了书中所介绍的工具firebug。

 

      那就结合我自己的工作经验来说说firebug，也许对CSS核心的东西没有什么涉及，但是熟练的工具使用，也是开发人员的必备武器。

 

      F12打开firebug，在HTML选项卡左侧战士的是文档结构，单机剪头可以展开或者收缩文档的子结构。当把鼠标悬停在某个元素名上时，钙元素会在页面中突出显示。最神奇的是，它还可以显示彩色区域并利用不同色彩展示元素的内边距和外边距。在选项卡的右侧，可以通过单击STYLE选项卡查看应用在当前元素上的CSS。这里不仅包含你自己写的央视，还包含浏览器自身的内建样式。文件html.css quirk.css这两个文件的内容，就是内建样式。

 

      我们需要注意的是，style选项卡中列出的规则是按特殊性降序排列的，也就是说，第一个是应用在当前元素上最特殊的规则，第二个是特殊性稍低一点的规则，以此类推。

通过随时单击鼠标右键并在弹出的菜单中选择审查元素选项可以直接查看任何元素，也可以单击firebug图标旁边带箭头的方框图标切换到审查模式。此时，随着鼠标在页面上的移动，当前元素会显示出轮廓，单击元素可进行查看。

 

      在fireb中单击任何声明左侧的空白都可以禁用该声明，这种禁用声明的方式对于测试各个属性之间的相互作用非常有用。

 

      通过查看元素的盒模型部分，可以精确的查看元素的尺寸大小，如元素的宽、高、内边距和外边距等，这些都是用像素表示的。更酷的是当鼠标悬停在该面板中的框上时，页面上就会出现沿着元素外框的上边缘和左边缘放置的像素尺。

 

      firebug在工作中是我必不可少的工具，至于书中提到的Web Developer Toolbar我没用过，可以按起来试试，不过应该是差不多的功能。