高效CSS属性缩写

今天在整理电脑时发现了曾经学习 CSS 时保存的一篇文章，感觉很有用，保存在电脑上说不定什么时候就找不到了，不如就贴到博客里了。原文是英文的，顺便翻译了一下。水平有限，并没有严格按照原文翻译，只能算意译，如有不到位之处敬请谅解。希望对正在研究网站前端技术的朋友有些许帮助。

原文：Efficient CSS with shorthand properties
作者：Roger Johansson

以下是译文：

很多人经常会问我一些关于 CSS 的问题，他们不像我，曾经花费大量的时间在 CSS 方面的工作上。有时侯，他们会请我查看他们正在进行的工作，以求让我指出为什么那些 CSS 代码没有像预期的那样工作，而我经常看到的是一堆臃肿而杂乱的代码，毫无美感可言。

使用 CSS 布局网站的一个原因是可以减少站点发送给浏览器的 HTML 文件的大小。然而由此造成的 CSS 文件的体积膨胀也会影响浏览者的体验，所以你应该控制 CSS 文件的大小，不要过于庞大。我想在这里介绍一下我的 CSS 效率技巧：属性缩写。很多人知道而且使用一些缩写，但是他们并没有充分利用。

背景知识

属性缩写是指可以在一个属性声明中设置多个属性值，而不必为每个属性单独设置属性值。正如你将看到的，这将使 CSS 文件更加精简。

有很多属性可以缩写——更加详细的信息我建议你查看 W3C 的相关规范：background,border, border-color, border-style, border sides ( border-top, border-right, border-bottom, border-left ), border-width, font, list-style, margin, outline, padding.

颜色

在 CSS 中指定颜色最常用的方法就是使用十六进制符号：一个 # 号后跟随 6 位十六进制数字。你也可以用关键字和 RGB 方式表示，而我比较喜欢用十六进制。很多人不知道的一个技巧是，当一个颜色由三对十六进制数字组成时，每对数字中可以省略掉一个：

#000000 变成 #000, #336699 变成 #369

容器尺寸

作用于容器的尺寸属性值可以共享一个语法，属性后跟随一到四个用空格分隔的值：

• property: value1;
• property: value1 value2;
• property: value1 value2 value3;
• property: value1 value2 value3 value4;

容器的哪些边受到影响取决于你指定了多少个值。下面是它的工作方式：

• 1 个值: 所有边;
• 2 个值: 上和下, 右和左;
• 3 个值: 上, 右和左, 下;
• 4 个值: 上, 右, 下, 左;

将容器想象成一个钟表的表盘可以帮助你记忆容器的哪个边受到哪个属性的作用。第一个属性值指向 12 点（top）方向，剩下的三个属性值顺时针依次指向 3 点（right）方向，6 点（bottom）方向，9 点（left）方向。你可以想象，如果不记住正确的顺序将会陷入怎样的麻烦——我第一次是从 Eric Meyer 的优秀作品《Eric Meyer on CSS》中了解这一点的。

外边距与内边距

使用属性缩写可以节省大量空间。例如，为一个容器指定不同的外边距可以像下面这样：

1. margin-top: 1em;
2. margin-right: 0;
3. margin-bottom: 2em;
4. margin-left: 0.5em;

不过，更加高效的方式如下：

1. margin: 1em 0 2em 0.5em;

同样的方式可以用来设置内边距（padding）属性。

边框

边框的属性缩写稍微复杂一些，因为边框除了宽度外，还有样式和颜色。例如：设置一个元素的四个边框宽度为 1px，样式为 solid，颜色为 black，可以用下面的代码：

1. border-width: 1px;
2. border-style: solid;
3. border-color: #000;

更紧凑的方法是使用 border 缩写：

1. border: 1px solid #000;

我总是使用这样顺序指定属性值：

1. border: width style color;

大多数浏览器不关心这个顺序，而且根据规范它们也不应该对此有所限制。但是我没有找到一个更好的理由不去遵循 W3C 规范中推荐的书写顺序。我想，总会有一些浏览器会严格限制缩写属性的顺序。

使用相同的语法，通过定义 border-top，border-right，border-bottom 和 border-left 可以设置一个容器的四个边或者任何一个边的属性值。

这三个值你不一定要全部指定，任何被省略的值都会被设置一个默认值。width 的默认值是 medium，style 的默认值是 none，color 的默认值由元素的 color 属性指定。

medium 值的大小取决于用户所使用的浏览器。

需要注意的是因为 style 的默认值为 none，如果你需要显示边框的话需要为其指定一个可见的值。

上面 border 第一个示例中的 border-width，border-style 和 border-color 属性有其独有的缩写方法。这些写法很少使用，但是的确存在：

1. border-width: 1px 2px 3px 4px;

缩写前的代码：

1. border-top-width: 1px;
2. border-right-width: 2px;
3. border-bottom-width: 3px;
4. border-left-width: 4px;

border-style，border-color 和 border-width 的缩写语法如前所述，和容器尺寸的缩写语法一样。

如果你想给一个元素的不同边指定不同的属性可以使用单独边的属性缩写。下面的代码将一个元素的 right 和 bottom 的 style 指定为 solid，width 指定为 1px。

1. border-right: 1px solid #000;
2. border-bottom: 1px solid #000;

因此可以这样缩写：

1. border: 1px solid #000;
2. border-width: 0 1px 1px 0;

首先为元素的所有边框指定相同的样式，然后为每个边框指定不同的宽度。

背景

另外一个非常有用的属性缩写是 background，而不是用 background-color，background-image，background-repeat，background-attachment， 和 background-position 来指定一个元素的背景属性，你可以仅仅用 background 来指定所有这些属性的值：

1. background-color: #f00;
2. background-image: url(background.gif);
3. background-repeat: no-repeat;
4. background-attachment: fixed;
5. background-position: 0 0;

可以简化为：

1. background: #f00 url(background.gif) no-repeat fixed 0 0;

如 border 属性缩写中的属性值的顺序一样，backgrounds 属性值的顺序不应该是个问题，但是我已经看到了一个 Safari 浏览器早起版本的相关报告：当属性值列出的顺序和 W3C 规范不一致时会导致一个错误。

1. background: color image repeat attachment position;

需要牢记的是当你指定 position 属性时，两个属性值必须写在一个地方；当你使用百分比指定属性值时，请首先指定水平位置。

和 border 属性一样，background 不要求你必须指定所有的值。如果某个属性值被省略，将会有一个默认的值被应用。这些默认值如下：

• color: transparent
• image: none
• repeat: repeat
• attachment: scroll
• position: 0% 0%

当没有为 background-color 属性和 background-image 属性指定值时，指定其他属性值是没有意义的，因为默认背景是透明的。

我总是用 background 缩写来指定元素的背景颜色，因为 background: #f00; 和 background-color: #f00; 的效果是一样的。

考虑下面的代码，后面指定的 background 属性将删除任何由前面规则指定的背景图片。

1. p {
2. background: #f00 url(image.gif) no-repeat;
3. }
4. div p {
5. background: #0f0;
6. }

所有在 div 元素以外的 p 元素会有背景图片，而且在背景图片没有覆盖到的地方显示红色背景。所有在 div 元素内的 p 元素没有背景图片，背景颜色为绿色。

字体

和 background 属性缩写一样，font 属性的几个单独属性也可以被合并：

1. font-style: italic;
2. font-variant: small-caps;
3. font-weight: bold;
4. font-size: 1em;
5. line-height: 140%;
6. font-family: "Lucida Grande", sans-serif;

合并后代码如下：

1. Font: italic small-caps bold 1em/140% "Lucida Grande", sans-serif;

同样的，涉及到了属性值的书写顺序问题，我认为没有理由不遵循 W3C 规范。小心驶得万年船。

font 属性缩写时可以省略除 font-size 和 font-family 之外的任何属性——这两个值必须指定，而且顺序不能错。font 属性中单独属性的默认值如下：

• font-style: normal
• font-variant: normal
• font-weight: normal
• font-size: medium
• line-height: normal
• font-family: 依赖于用户浏览器

列表

有序列表和无序列表可以用 list-style 来缩写。我习惯用它将 list-style-type 的值设置为 none，这就去掉了任何列表项前面的编号和符号。

1. list-style: none;

而可以不用这样：

1. list-style-type: none;

你也可以用它来设置 list-style-position 和 list-style-image 属性，如果要为一个无序列表的列表项指定显示在列表内部的标记，可以设置一个图片，还可以设置 style 属性为 square 以代替图片不可用的状况，下面两段代码效果是一样的：

1. list-style: square inside url(image.gif);

未缩写的代码：

1. list-style-type: square;
2. list-style-position: inside;
3. list-style-image: url(image.gif);

外轮廓

outline 属性很少使用，主要是因为目前的浏览器支持不够——据我所知，仅 Safari，OmniWeb 和 Opera 支持此属性。总之，你可以利用单独的属性来定义 outline，如下：

1. outline-color: #f00;
2. outline-style: solid;
3. outline-width: 2px;

或者像这样：

1. outline: #f00 solid 2px;

outline 属性有一些很有意思的特点使它很有用：不像 borders，它们不占用任何像素位置，而且总是显示在容器上面。意思是说显示或隐藏 outlines 不会影响元素布局，它们不影响被应用元素或者其他元素的位置或大小。outlines 也可以不是矩形。

精简文件尺寸和易于维护

这些属性缩写都是 CSS2 中可用的特性。如果你在一个规模相当大的站点上部署 CSS，使用一个没有经过属性缩写版本的 CSS 文件和一个经过属性缩写版本的 CSS 文件，你会看到两个 CSS 版本的文件尺寸存在巨大差异。这也是使用属性缩写的一个重要原因。另外一个原因是缩写可以使你的 CSS 文件更加容易维护——至少这是我的经验。

如果你知道还有任何其他的属性缩写方法，请告诉我。

转自：http://www.yolansign.com/archives/282