网站设计之CSS的布局规则和调试方法

网页布局中CSS设计的常用规则
规则一、CSS文件的链接方式
1、附加链接：外部CSS文件
2、导入CSS常用应用多个CSS文件时，将多个CSS导入一个CSS文件中CSS规则定义有三种：
①类比如.RedText .BlueText和.BigText等等；
②标签针对原有 HTML 标签做的重新CSS定义；
③高级伪类、定义了ID元素，以及综合性定义。
规则二、CSS 规则的应用
1、只有“类”样式才需要应用，class= xxxx任何元素都可以应用类。
2、class与id区别
3、标签应用一般对于“bodi”标签一次性使用，对于诸如“li td”等在页面中重复性比较大的标签不推荐定义。
4、高级多运用，定义“#id li”比定义“li”要好得多。
规则三、CSS规则的执行顺序
1、依照CSS代码的执行先后顺序
2、如果有重复的规则，依照后执行的定义
3、最终规则是多个定义规则的综合
规则四、高级规则定义
1、对于不同表格的文字样式定义，不同表格使用不同ID使用类样式定义；
2、一页中的多种超级链接样式定义；
3、多个相同规则不同对象的 CSS 共同定义；
4、对于同一对象定义的多种CSS方式考虑哪种更科学（扩展性和代码精简性）。
网页布局中CSS设计的调试方法
方法一、检查CSS是否书写正确
检查一下有无拼写错误、是否忘记结尾的等。
方法二、检查HTML元素是否有拼写错误、是否忘记结束标记
可以用dreamweaver的验证功能检查一下有无错误。即使是老手也经常会弄错div的嵌套关系。
方法三、利用border属性确定出错元素的布局特性
为元素添加border属性确定元素边界，错误原因即水落石出。
方法四、float元素相关的调试
1、float元素的父元素不能指定clear属性
2、IE的著名的bug，倘若不知道就会走弯路。IE下如果对float的元素的父元素使用clear属性，周围的float元素布局就会混乱。
3、float元素的宽度之和要小于100%
请保证宽度之和小于99%，如果float元素的宽度之和正好是100%，某些古老的浏览器将不能正常显示。
4、是否重设了默认的样式？
最好首先将全体的margin、padding设置为0、列表样式设置为none等，如margin、padding属性等。
5、float元素必须指定width属性
不管float元素的内容如何，一定要为其指定width属性，因为很多浏览器在显示未指定width的float元素时会有bug，另外指定元素时尽量使用em而不是px做单位。
方法五、用删除法确定错误发生的位置
如果错误影响了整体布局，逐个删除div块，直到删除某个div块后显示恢复正常，即可确定错误发生的位置。