常用 CSS 缩写语法总结

使用 CSS 缩写可以减少 CSS 文件的大小，并使其更为易读。CSS 缩写的主要规则如下：

1. 颜色缩写

2. 盒尺寸缩写

通常有下面四种书写方法:

• Property: Value1；表示所有边都是一个值 Value1；
• Property: Value1 Value2；表示 Top 和 Bottom 的值是 Value1，Right 和 Left 的值是 Value2
• Property: Value1 Value2 Value3；表示 Top 的值是 Value1，Right 和 Left 的值是 Value2，Bottom 的值是 Value3
• Property: Value1 Value2 Value3 Value4；四个值依次表示 Top，Right，Bottom，Left

方便的记忆方法是按顺时针，上右下左。例如：
margin: 1em 0 2em 0.5em;

3. 边框（Border）缩写

边框的属性如下：

• border-width: 1px;
• border-style: solid;
• border-color: #000;

可以缩写为一句：border: 1px solid #000;

4. 背景（Backgrounds）缩写

背景的属性如下：

• background-color: #F00;
• background-image: url(Background.gif);
• background-repeat: no-repeat;
• background-attachment: fixed;
• background-position: 0 0;

可以缩写为一句：background: #F00 url(Background.gif) no-repeat fixed 0 0;

可以省略其中一个或多个属性值，如果省略，该属性值将用浏览器默认值：

• Color: transparent
• Image: none
• Repeat: repeat
• Attachment: scroll
• Position: 0% 0%

5. 字体（Fonts）缩写

字体的属性如下：

• font-style: italic;
• font-variant: small-caps;
• font-weight: bold;
• font-size: 1em;
• line-height: 140%;
• font-family: “Lucida Grande”, sans-serif;

可以缩写为一句：font: italic small-caps bold 1em/140% “Lucida Grande”,sans-serif;

注意，如果你缩写字体定义，至少要定义 Font-size 和 Font-family 两个值。

6. 列表（Lists）缩写

取消默认的圆点和序号： list-style: none;

List-style 的属性：

• • list-style-type: square;
  • list-style-position: inside;
  • list-style-image: url(Image.gif);

可以缩写为：list-style: square inside url(image.gif);