Shorthand properties

速记属性是CSS属性，可让您同时设置其他几个CSS属性的值。使用速记属性，Web开发人员可以编写更简洁，更易读的样式表，从而节省时间和精力。

CSS规范定义了简化属性，以便对作用于同一主题的公共属性的定义进行分组。例如，该CSS background属性是一个简写属性，是能够确定的值background-color，background-image，background-repeat，和background-position。同样，可以使用简写来定义最常见的与字体相关的属性font，并且可以使用margin简写来定义框中的不同边距。

棘手的edge案例

即使它们使用起来非常方便，在使用它们时也要记住一些edge的情况：

未指定的值被设置为其初始值。这听起来轶事，但它确实意味着它覆盖了以前的设定值。因此：background-color：red; 背景：url(?developer/section/1072252/images/bg.gif)不重复左上方; 不会设置背景的颜色red，但是到background-color的默认，transparent作为第二个规则的优先级。
只有各个属性值可以继承。由于缺失值被它们的初始值所取代，所以不可能通过忽略它们来继承各个属性。关键字inherit可以应用于某个属性，但仅作为一个整体，而不是作为某个值或另一个值的关键字。这意味着要继承某个特定值的唯一方法是将longhand属性与关键字一起使用inherit.
速记属性尽量不要强制它们替换的属性值的特定顺序。当这些属性使用不同类型的值时，这很有效，因为顺序没有重要性，但是当几个属性具有相同的值时，这并不容易。处理这些案件分为几类：
1. Shorthands处理与框边相关的属性border-style，margin或者padding始终使用表示这些边的一致的1至4值语法：

1-value语法：border-width: 1em- 唯一值表示所有边

2-value语法：border-width: 1em 2em- 第一个值表示垂直方向，即顶部和底部，边缘，第二个水平方向，即左侧和右侧。

3-value语法：border-width: 1em 2em 3em- 第一个值表示上边缘，第二个，水平，左边和右边，第三个值表示底边

4-value语法：border-width: 1em 2em 3em 4em- 四个值分别代表顶部，右侧，底部和左侧边缘，总是按顺序排列，即从顶部开始按时间顺序排列（顶部右下角和左下角的首字母匹配单词故障辅音的顺序：TRBL）

1. Similarly, shorthands handling properties related to corners of a box, like [`border-radius`](border-radius), always use a consistent 1-to-4-value syntax representing those corners:

1-value语法：border-radius: 1em- 唯一值代表所有角点

2-value语法：border-radius: 1em 2em- 第一个值表示左上角和右下角，第二个表示右上角和左下角。

3-value语法：border-radius: 1em 2em 3em- 第一个值表示左上角，第二个值表示右上角和左下角，第三个值表示右下角

4-value语法：border-radius: 1em 2em 3em 4em- 四个值分别代表左上角，右上角，右下角和左下角，总是按顺序，即从左上角开始的顺时针方向。

背景属性

具有以下属性的背景：

background-color: #000;
background-image: url(?developer/section/1072252/images/bg.gif);
background-repeat: no-repeat;
background-position: left top;

可以简化为一个声明：

background: #000 url(?developer/section/1072252/images/bg.gif) no-repeat left top;

（简写形式实际上相当于上面的正手属性background-attachment: scroll，在CSS3中还有一些附加属性。）

字体属性

以下声明：

font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;

可以缩写为以下内容：

font: italic bold .8em/1.2 Arial, sans-serif;

这个速记声明实际上相当于上面加号font-variant: normal和font-size-adjust: none（CSS2.0 / CSS3），font-stretch: normal（CSS3）的慢速声明。

边框属性

有了边框，宽度，颜色和样式可以简化为一个声明。例如，

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

可以写成

border: 1px solid #000;

边距和填充属性

边距和填充值的速记版本以相同的方式工作。以下CSS声明：

margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;

与以下声明相同（请注意，值从顶部开始按顺时针顺序排列：顶部，右侧，底部，然后左侧（TRBL，“麻烦”中的辅音））

margin: 10px 5px 10px 5px;

本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com

最后更新于：2017-12-18