CSS 之所以被看好的原因之一就在于它能减小页面大小，而由此缩短网页下载时间，不仅仅是首页的载入，还包括样式表被缓存以后，后续页面的载入也被加快了的那部分时间。这没错，但首页载入时间的缩短几乎看不出来，这是因为 CSS 代码往往过于冗长了。

　　好吧，现在一切都不同了。学点高效地进行 CSS 编码的技巧吧，让你把样式表马上裁减到最小为止。自然，你可能看不到什么惊人的改变，但对于大站来说，微小的字节减少也很重要。

　　有很多地方可以减少代码的长度，包括 简记属性 (shorthand properties)， 多重声明 (multiple declarations)，默认值 (default values)， 继承 (inheritance)，和空白 (white space)。

　　简记属性

　　Zeroing page margins 提到了一组这样的简记属性，但对于此还有更多的。

　　通常简记属性包括：　　

以下是引用片段： Example Source Code font (控制 "font-size", "font-weight", "line-height", 等等) background (控制元素的背景，放置位置，重复次数，等等)  　　list-style (设置列表元素前边那个“原点”的属性)  　　margin (定义 box 各侧的边缘空白 (margin) 宽度)  　　border (定义 box 边界 (border) 的属性 —— 有很多和边界有关的简记属性) padding (定义 box 各侧的补白 (padding) 宽度)

　　例如， font 属性 是用于同时设置 font-style, font-variant, font-weight, font-size, line-height, 和 font-family 的简记属性。当然，它们并非全都必须写在简记属性中。一旦在简记属性中忽略了其中某个，那些缺失的属性都将被设置为它们的 初始值，就像 W3C 规范中 font property 一节提到的那样。若需要控制很多和字体相关的属性，使用这个简记属性就可以省下样式表中的大量字节了。

　　background 和 list-style 属性也是如此。现在还剩下关于 CSS 盒 (box) 模型 四边的那些属性和一点没法归类的杂碎了。

　　盒侧边的简记属性

以下是引用片段： 任何块级 (block level) 元素 (像 div，表格，列表，段落等) 的四边都有 边白 (margin)，边界 (border)，和 补白 (padding)，都可以分别设置不同的宽度。对于边界 (border) 来说，还能给每边分配不同的 border-style 和  border-color 。若要一条条地显式地指明所有这些属性，代码就会变得很冗长。使用简记规则的意义正在于此：彻底地减少这样负担。

　　“钟面”

　　当需要指定这三类“盒侧”属性之一，而且各侧的情况又是一样的时候，使用简记属性最基本的功能就行了：　　

以下是引用片段： Example Source Code margin: 5px;border-width: 5px;padding: 5px;

　　注意：要让边界显示出来，还必须设置 border-style 属性，否则单有 border-width 边界是显示不出来的。既可以直接通过 border-style 来设置它，也可以通过 border 属性。

　　然而很有可能某一侧需要一个不同的值，这时 CSS 的“钟面”特性就上台了。把此处的盒子想象为一个钟面，当指针指向 12 点时，表示盒子的正上方，这就是简记属性中第一个值的含义;下一个是 3 点，这是盒子的右侧;接下来是 6 点，表示盒子的下方;最后呢是 9 点，盒子的左侧。

　　让我们看看这个例子吧。在页面中我们需要一个 10px 上边白，5px 右边白， 3px 下边白，无左边白的盒子。则 margin 简记属性应该这么写：　　

以下是引用片段： Example Source Code margin: 10px 5px 3px 0;

　　在属性的声明中，几个值必须也只能用空格来分隔。而且只要那个值不是零，就必须给它指定单位。

　　为什么零宽度的边白就不需要指定单位了呢?因为零个任何单位 (px, em, %, 等等) 的值也就等于任意其他单位的值。

　　改进的钟面

　　当某些值重复时，这些“盒侧”属性还能压榨得更短。前面提到过，若各侧都一样，可以只指定一个，让它应用到全部。而一旦顶部和底部的样式是一致的，左侧和右侧却是另一种，margin 的代码可以这么写：　　

以下是引用片段： Example Source Code margin: 10px 5px;

　　这行代码把顶部和底部的边白设置为 10px，两侧设为 5px。最后一个技巧是这样的：若顶部和底部的不同，两侧的却是一样的，比如上边白 10px，左右边白 5px，下边白 20px，我们可以这么写：　　

以下是引用片段： Example Source Code margin: 10px 5px 20px;

　　这些缩写完全是根据给出值的数目和顺序决定的。总结起来，一个值 = 所有各侧;两个值 = 上下一种，两侧另一种;三个值 = 上侧一种，左右同一种，下侧一种;当然还有四个值 = 按照顺时针。好了，现在不那么难记住了吧?

[1] [2]  下一页