CSS 的简写属性
简写属性是可以让你同时设置好几个 CSS 属性值的 CSS 属性。使用简写属性,Web 开发人员可以编写更简洁、更具可读性的样式表,节省时间和精力。
CSS 规范定义简写属性的目的在于将那些关于同一主题的常见属性的定义集中在一起。比如 CSS 的 background
属性就是一个简写属性,它可以定义 background-color
、background-image
、background-repeat
和 background-position
的值。类似地,最常见的字体相关的属性可以使用 font
的简写,盒子(box)各方向的外边距(margin)可以使用 margin
这个简写。
棘手的边界情况
虽然它们使用起来非常方便,但在使用时,仍需牢记一些边界情况:
省略属性
没有指定的值会被设置为它的初始值。这听起来似乎本来就很合理的样子,但这确实意味着,它将会覆盖之前设置的值。因此:
p {
background-color: red;
background: url(images/bg.gif) no-repeat left top;
}
以上样式不会将 background 的 color 值设置为 red
,而是 background-color
的默认值 transparent
。
关键词 inherit 只可以应用于单独属性(individual properties),如果应用于一个简写属性(shorthand property),则必须整体应用,而能对简写属性值的每一个部分单独应用。由于单独属性的漏掉的值会被它们的初始值(initial value)替代,因此不可能允许单个属性通过省略继承的。这意味着让一个属性的值使用继承值的唯一方法就是使用值是 inherit
的全称属性(longhand property)。
属性的顺序
简写属性不试图强制它们替代属性的值的特定顺序。这适用于当这些属性使用不同类型的值时,因为这个时候顺序并不重要。但当几个属性可以设置相同值的时候,就没那么简单了。
两种非常重要的情况如下:
- 与盒子(box)边界(edge)相关的属性,比如
border-style
、margin
或者padding
- 与盒子的角(corner)相关的属性,比如
border-radius
盒子边界
在处理和盒子的边界相关的属性时,比如 border-style
、margin
或者 padding
,始终使用一致的 1 个到 4 个值的语法表示:
-
单值语法:
border-width: 1em
,这一个值表示所有的边框宽度: -
双值语法:
border-width: 1em 2em
,第一个值表示垂直方向的值,即 top 和 bottom;第二个值表示水平方向的值,即 left 和 right: -
三值语法:
border-width: 1em 2em 3em
,第一个值表示 top;第二个值表示水平方向的,即 left 和 right;第三个值表示 bottom: -
四值语法:
border-width: 1em 2em 3em 4em
,这四个值分别表示 top、right、bottom、left,即总是从 top 开始的顺时针顺序: Top-Right-Bottom-Left 的首字母与英文单词 trouble 的辅音字母顺序一致:TRBL。你可以按照时钟指针旋转的顺序来记忆:1em
在 12 点钟方向,而2em
、3em
及4em
分别在 2、3、4 点钟方向。
盒子角
在处理和盒子的角相关的属性时,比如 border-radius
,也始终使用一致的 1 个到 4 个值的语法表示:
-
单值语法:
border-radius: 1em
,这一个值表示所有的边框宽度: -
双值语法:
border-radius: 1em 2em
,第一个值表示 top-left 和 bottom-right 方向的角;第二个值表示 top-right 和 bottom-left 方向的角: -
三值语法:
border-radius: 1em 2em 3em
,第一个值表示 top-left 方向的角,第二个值表示 top-right 和 bottom-left 方向的角,第三个值表示 bottom-right 方向的角: -
四值语法:
border-radius: 1em 2em 3em 4em
,这四个值分别表示 top left、top right、bottom right、bottom left,即总是从 top left 开始的顺时针顺序:
Background 属性
background 有以下属性:
background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;
可以简写成一行声明:
background: #000 url(images/bg.gif) no-repeat top right;
简写的形式实际上等价于以上普通属性再加上 background-attachment: scroll
以及 CSS3 中的一些附加属性。
请查阅 background
以了解更详细的信息,包含 CSS3 属性。
Font 属性
下面的声明:
font-style: italic;
font-weight: bold;
font-size: 0.8em;
line-height: 1.2;
font-family: Arial, sans-serif;
可以简写成下面的:
font:
italic bold 0.8em/1.2 Arial,
sans-serif;
这个简写声明实际上等价于以上普通属性再加上 font-variant: normal
、font-size-adjust: none
和 font-stretch: normal
。
Border 属性
对于 border 来说,宽度、颜色和类型是可以被简写到一个声明里的。比如:
border-width: 1px;
border-style: solid;
border-color: #000;
可以简写成:
border: 1px solid #000;
Margin 和 Padding 属性
margin 和 padding 值的简写版本类似。下面的 CSS 声明:
margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;
和下面的声明是一样的(注意,值是从 top 顺时针开始的:top、right、bottom、接着是 left,与“trouble”的辅音字母顺序相同)。
margin: 10px 5px 10px 5px;
Margin 对于多个值有以下的简写规则:
- 当只有一个值声明时,该值会用于所有四个值。
- 当只有两个值声明时,第一个值用于上边距和下边距,第二个值用于左边距和右边距。
- 当有三个值声明时,第一个值用于上边距,第二个值用于左边距和右边距,第三个值用于下边距。
- 当有四个值声明时,其会按顺序用于上、右、下、左边距(按顺时针方向)。
通用简写属性
参见
-
CSS 重要概念:
-
简写属性:
all
、animation
、background
、border
、border-block-end
、border-block-start
、border-bottom
、border-color
、border-image
、border-inline-end
、border-inline-start
、border-left
、border-radius
、border-right
、border-style
、border-top
、border-width
、column-rule
、columns
、flex
、flex-flow
、font
、gap
、grid
、grid-area
、grid-column
、grid-row
、grid-template
、list-style
、margin
、mask
、offset
、outline
、overflow
、padding
、place-content
、place-items
、place-self
、scroll-margin
、scroll-padding
、text-decoration
、text-emphasis
、transition