速记属性

简写属性是 CSS 属性，可以同时设置多个其他 CSS 属性的值。使用简写属性，可以编写更简洁（通常更易读）的样式表，从而节省时间和精力。

CSS 规范定义了简写属性，用于对作用于同一主题的常见属性进行分组定义。例如，CSS background 属性是一个简写属性，它可以定义 background-color、background-image、background-repeat 和 background-position 的值。类似地，可以使用简写 font 定义最常见的字体相关属性，可以使用 margin 简写定义盒子周围的不同边距。

棘手的边缘情况

使用简写属性时，需要注意一些边缘情况。

省略属性

未指定的值将设置为其初始值。这意味着它将覆盖先前设置的值。例如

css
p {
  background-color: red;
  background: url(images/bg.gif) no-repeat left top;
}

这不会将背景颜色设置为red，而是设置为background-color 的默认值，即transparent。

只有单个属性值可以继承。由于缺失的值会被其初始值替换，因此无法通过省略它们来允许继承单个属性。inherit 关键字可以应用于属性，但只能作为整体应用，而不是作为某个值或另一个值的关键字。这意味着，要使某个特定值继承，唯一的方法是使用带有 inherit 关键字的长属性。

对属性进行排序

简写属性试图不对其替换的属性的值强加特定的顺序。当这些属性使用不同类型的 value 时，这很好用，因为顺序并不重要，但在多个属性可以具有相同 value 时，这就不太好用了。

这里有两个重要的例子

盒子的边缘

处理与盒子边缘相关的属性的简写，如 border-style、margin 或 padding，始终使用一致的 1 到 4 值语法来表示这些边缘

  • 1 值语法： border-width: 1em — 单个值表示所有边缘：使用一个值语法的盒子边缘
  • 2 值语法： border-width: 1em 2em — 第一个值表示垂直边缘，即顶部和底部边缘，第二个值表示水平边缘，即左侧和右侧边缘：使用两个值语法的盒子边缘
  • 三值语法： border-width: 1em 2em 3em — 第一个值代表顶部边框，第二个值代表水平边框（即左右边框），第三个值代表底部边框：使用三值语法的盒子边框
  • 四值语法： border-width: 1em 2em 3em 4em — 四个值分别代表顶部、右侧、底部和左侧边框，始终按此顺序，即从顶部开始顺时针：使用四值语法的盒子边框 顶部-右侧-底部-左侧的首字母与单词“trouble”中辅音的顺序相匹配：TRBL。你也可以把它记住为时针旋转的顺序：1em 从 12 点钟位置开始，然后 2em 在 3 点钟位置，然后 3em 在 6 点钟位置，最后 4em 在 9 点钟位置。

盒子的角

类似地，处理与盒子角相关的属性的简写，例如 border-radius，始终使用一致的 1 到 4 值语法来表示这些角。

  • 一值语法： border-radius: 1em — 单个值表示所有角：使用一值语法的盒子角
  • 二值语法： border-radius: 1em 2em — 第一个值代表左上角和右下角，第二个值代表右上角和左下角：使用二值语法的盒子角
  • 三值语法： border-radius: 1em 2em 3em — 第一个值代表左上角，第二个值代表右上角和左下角，第三个值代表右下角：使用三值语法的盒子角
  • 四值语法： border-radius: 1em 2em 3em 4em — 四个值分别代表左上角、右上角、右下角和左下角，始终按此顺序，即从左上角开始顺时针：使用四值语法的盒子角

背景属性

考虑以下属性的背景

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

这四个声明可以缩写为一个

css
background: #000 url(images/bg.gif) no-repeat left top;

（简写形式实际上等同于上面的长写属性加上 background-attachment: scroll，并且在 CSS3 中还包含一些额外的属性。）

有关更多详细信息，包括 CSS3 属性，请参阅 background。

字体属性

考虑以下声明

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

这 5 个语句可以缩写为以下语句

css
font:
  italic bold 0.8em/1.2 Arial,
  sans-serif;

此简写声明实际上等同于上面的长写声明加上 font-variant: normal、font-size-adjust: none 和 font-stretch: normal。

边框属性

对于边框，宽度、颜色和样式可以简化为一个声明。例如，考虑以下 CSS

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

它可以简化为

css
border: 1px solid #000;

边距和填充属性

边距和填充值的简写版本的工作原理类似；margin 属性允许使用一个、两个、三个或四个值来指定简写值。考虑以下 CSS 声明

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

它们与使用四个值简写形式的以下声明相同。请注意，这些值的顺序是顺时针的，从顶部开始：顶部、右侧、底部、左侧（TRBL，“trouble”中的辅音）。

css
margin: 10px 5px 10px 5px;

一个、两个、三个和四个值声明的边距简写规则如下

  • 当指定一个值时，它将应用相同的边距到所有四个边。
  • 当指定两个值时，第一个边距应用于顶部和底部，第二个边距应用于左侧和右侧。
  • 当指定三个值时，第一个边距应用于顶部，第二个边距应用于左侧和右侧，第三个边距应用于底部。
  • 当指定四个值时，边距将按顺序应用于顶部、右侧、底部和左侧（顺时针）。

定位属性

对于位置，顶部、右侧、底部和左侧的简写版本可以简化为一个声明。例如，考虑以下 CSS

css
top: 0;
right: 20px;
bottom: 0;
left: 20px;

它可以简化为

css
inset: 0 20px 0 20px;

与边距和填充类似，内边距值的顺序是顺时针的 - 顶部、右侧、底部、左侧（TRBL）。

通用速记属性

CSS 提供了一个通用的简写属性，all，它将它的值应用于文档中的所有属性。它的目的是更改属性的继承模型。

有关继承在 CSS 中的工作方式的更多信息，请参阅 级联和继承 或 介绍 CSS 级联。

速记属性

另请参阅