17.1.8 CSS调试
CSS调试是指对编写后的CSS代码进行调整，确保达到自己满意的效果。在使用CSS时，经常出现显示效果和设计预想的效果不一样，造成效果的差异，或者出现代码错误。造成上述结果的原因很多，有可能是设计者一时大意而书写错误，或者是由于属性之间的冲突而造成的。当出现上述页面表现错误时，就需要进行CSS调试，找出错误的真正原因。本节将向读者介绍CSS的基本调试知识。
1.设计软件调试
使用Dreamweaver调试是最简单的软件调试方法。作为主流的网页制作工具，Dreamweaver能很好地实现设计代码和预览界面的转换。设计者可以迅速的在Dreamweaver设计界面中进行代码调整，然后在浏览器中查看显示效果。通过上述方法可以很好地实现代码和效果的统一，从而快速的找到问题所在。
另外，也有一部分错误是因为浏览器之间的差异造成的。这就需要进行多个浏览器的检测，确定真正问题所在。
2.继承性和默认值带来的问题
在页面测试时，经常出现如下情况：页面中的某元素没有任何指定样式，在显示效果中却体现了某种其他指定样式。造成上述问题的原因可能是，这个元素继承了其父元素的属性。例如，如下代码由于继承性问题而产生异常显示效果。
执行后会发现执行效果继承了<body>元素样式，如图17-11所示。
图17-11 执行效果
在上述代码中，通过样式<STYLE1>设置了文本大小为18px。在显示后的效果图中，文本文字的显示效果却是颜色为红色、文字大小为18px。造成上述问题的原因是，在代码中设置了<body>元素的颜色属性为红色，<body>元素将其样式继承给了它的子元素<span>。
解决上述问题的方式是，重新定义相关属性来覆盖继承样式和默认样式。另外，合理地设计出清晰的嵌套结构样式，是解决上述问题的根本。
（3）背景颜色寻找错位
为准确定位到页面的出错区域，可以向某页面元素添加背景颜色，来判断正在修改的代码是否是目前正在影响页面中的内容。另外，可以充分利用CSS的一些常用边框属性，例如“style-width：1”、“border-color：red”和“border-style：solid”来定位出错区域。具体方法是给块加入一个外边框，一开始的边框比较大，然后逐渐缩小范围，就很容易定位到出错区域了。
（4）第三方软件调试
读者通常使用Dreamwear、IE、Frontpage同时进行调试工作，上述方法虽然比较简单，但是三者之间的频繁转化让人觉得麻烦。第三方软件调试是利用专用软件来调试页面程序的方法，常用的调试工具是CSSVista。
CSSVista是一款Windows（只能在XP上使用）平台的第三方、免费的CSS编辑工具。其主要功能就是将Frontpage、IE6以及CSS编辑器集合到一个框架里面。可以所见即所得地对页面进行CSS调试。CSSVista需要运行在Microsoft's.NET Framework 2.0下。
（5）W3C校验
在W3C的官方站点上可以测试个人设计页面样式的标准化。读者可以登陆到http：//jigsaw.w3.org/css-validator/validator.html，对文件进行测试。其测试界面和结果界面分别如图17-12和图17-13所示。
图17-12 W3C测试界面
图17-13 W3C测试结果界面
在网页设计过程中，W3C可以通过如下3种方式进行测试。
■通过指定URL。
■通过文件上传。
■表单直接输入测试。