CSS程序简化，详解HTML5布局

虽然CSS文件或者嵌入的CSS都是纯文本文件，对其进行整理和缩写对于减少代码有很大的帮助，当CSS定义的代码量比较多时，更加突显了整理及缩写的重要性。

本节将介绍CSS程序简化的注意事项，对于具体缩写方法将结合后面的实例详细讲解。

1.缩写属性

使用Dreamweaver定义CSS虽然很方便，但是程序生成的代码比较啰嗦，根据div的CSS规则定义的方框属性中定义的填充（padding）属性，系统会自动将上、下、左、右4个属性分开定义，而实际情况可以缩写在同一行内。

类似的情况还有背景（background）、字体（font）、边框（border）、列表（list-style）、填充（padding）、边界（margin）等属性。

（1）上右下左

填充、边框和边界都有4个边，可以合并成一行，按照“上右下左”（顺时针）的顺序来定义，中间以空格来分隔，例如“margin：5px 10px 15px 20px；”。

如果“上≠下”，但是“左=右”，可以简写成3个值（上、左右、下），例如“margin：5px 10px 15px；”，等同于“margin：5px 10px 15px 10px；”。

如果“上=下”且“左=右”，可以简写成两个值（上下、左右），例如“margin：10px20px；”，等同于“margin：10px 20px 10px 20px；”。

如果上、下、左、右都相等，就可以合并成一个值，例如“margin：5px；”，等同于“margin：5px 5px 5px 5px；”。

（2）缩写颜色

类似于“#00FF00”，这样两位重复的颜色值可以缩写为“#0F0”。

（3）压缩属性

有些关于属性的定义可以压缩到一行中，各属性之间以空格分隔，例如“font”的大小、颜色、粗细等。

2.利用通配符(www.xing528.com)

在CSS的最开始部分定义通用CSS规则，通用规则对所有的选择符号都起作用，这样就可以统一声明绝大部分的标签都会涉及的属性，例如边框、边界和填充等。

用通配符“*”进行声明，如下所示：

*{

margin：0；

padding：0；

}

此时，所有的元素的边界和填充都为0。在其后可以再进行其他的规则声明，后面声明的规则会替换掉前面的通配属性定义。这是为了避免一些未声明的元素，因为浏览器默认样式而造成的错位情况。

3.继承

子元素自动继承父元素的属性值，例如字体、颜色等，所以对于可以继承的CSS规则不需要重复定义。

4.组合

某些有相同属性的选择符可以统一定义。有相同属性的选择符中间以逗号“，”分隔，例如“body，#main，table{border：0；}”，等同于分别定义这3个选择符的边框为0。

5.0px与0

无论用什么单位，0就是0，因此0px=0in=0px=0。

在后面的章节中将以实例的形式详细介绍CSS缩写的方法。到这里，我们已经简单地介绍完了DIV+CSS的网页布局，相信读者已经掌握了DIV+CSS大体的布局方法，以及列表的布局元素和元素的概念等，在后面的章节中我们将学习如何应用CSS实现网页的布局设计。