1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
|
---
title: CSS 的简写属性
slug: Web/CSS/Shorthand_properties
tags:
- CSS
- Guide
- Web
translation_of: Web/CSS/Shorthand_properties
---
<div>{{cssref}}</div>
<p><strong>简写属性</strong>是可以让你同时设置好几个 CSS 属性值的 CSS 属性。使用简写属性，Web 开发人员可以编写更简洁、更具可读性的样式表，节省时间和精力。</p>
<p>CSS 规范定义简写属性的目的在于将那些关于同一主题的常见属性的定义集中在一起。比如 CSS 的 {{cssxref("background")}} 属性就是一个简写属性，它可以定义 {{cssxref("background-color")}}、{{cssxref("background-image")}}、{{cssxref("background-repeat")}} 和 {{cssxref("background-position")}} 的值。类似地，最常见的字体相关的属性可以使用 {{cssxref("font")}} 的简写，盒子（box）各方向的外边距（margin） 可以使用 {{cssxref("margin")}} 这个简写。</p>
<h2 id="Tricky_edge_cases" name="Tricky_edge_cases">棘手的边界情况</h2>
<p>虽然它们使用起来非常方便，但在使用时，仍需牢记一些边界情况：</p>
<ol>
<li>没有指定的值会被设置为它的初始值。这听起来似乎本来就很合理的样子，但这确实意味着，它将会覆盖之前设置的值。因此：
<pre class="brush:css notranslate">background-color: red;
background: url(images/bg.gif) no-repeat top right;
</pre>
以上样式不会将 background 的 color 值设置为 <code>red，而是</code> {{cssxref("background-color")}} 的默认值 <code>transparent，因为第二条规则优先。</code></li>
<li>关键词 inherit 只可以应用于单独属性（individual properties），如果应用于一个简写属性（shorthand property），则必须整体应用，而能对简写属性值的每一个部分单独应用。由于单独属性的漏掉的值会被它们的初始值（initial value）替代，因此不可能允许单个属性通过省略继承的 。这意味着让一个属性的值使用继承值的唯一方法就是使用值是 inherit 的普通属性（longhand property）。</li>
<li>简写属性不试图强制它们替代属性的值的特定顺序。这适用于当这些属性使用不同类型的值时，因为这个时候顺序并不重要。但当几个属性可以设置相同值的时候，就没那么简单了。处理这些情况分以下几种类型：
<ol>
<li>处理和盒子（box）边界（edge）相关的属性时，比如 {{cssxref("border-style")}}、{{cssxref("margin")}} 或者 {{cssxref("padding")}}， 始终使用一致的1个到4个值的语法表示这些边界：
<table>
<tbody>
<tr>
<td style="width: 79px;"><img alt="border1.png" src="/files/3646/border1.png"></td>
<td><em>1个值的语法：</em><code>border-width: 1em</code> — 这一个值表示所有的边框宽度</td>
</tr>
<tr>
<td><img alt="border2.png" src="/files/3647/border2.png"></td>
<td><em>2个值的语法：</em><code>border-width: 1em 2em</code> — 第一个值表示垂直方向的，即 top 和 bottom；第二个值表示水平方向的，即 left 和 right</td>
</tr>
<tr>
<td><img alt="border3.png" src="/files/3648/border3.png"></td>
<td><em>3个值的语法：</em><code>border-width: 1em 2em 3em</code> — 第一个值表示 top；第二个值表示水平方向的，即 left 和 right； 第三个值表示 bottom</td>
</tr>
<tr>
<td><img alt="border4.png" src="/files/3649/border4.png"></td>
<td>
<p><em>4个值的语法：</em><code>border-width: 1em 2em 3em 4em</code> — 这四个值分别表示 top、right、bottom、left，总是按此顺序，即从 top 开始的顺时针顺序（Top-Right-Bottom-Left 首字母与英文单词 trouble 的顺序一致：TRBL）</p>
</td>
</tr>
</tbody>
</table>
</li>
<li>同样，在处理和盒子的角相关的属性时，比如 {{cssxref("border-radius")}}，也始终使用一致的 1个到4个值的语法表示：
<table>
<tbody>
<tr>
<td style="width: 69px;"><img alt="corner1.png" src="/files/3650/corner1.png"></td>
<td><em>1个值的语法：</em><code>border-radius: 1em</code> — 这一个值表示所有的表框角度的半径</td>
</tr>
<tr>
<td><img alt="corner2.png" src="/files/3651/corner2.png"></td>
<td><em>2个值的语法：</em><code>border-radius: 1em 2em</code> — 第一个值表示 top-left 和 bottom-right 方向的角；第二个值表示 top-right 和 bottom-left 方向的角</td>
</tr>
<tr>
<td><img alt="corner3.png" src="/files/3652/corner3.png"></td>
<td><em>3个值的语法：</em><code>border-radius: 1em 2em 3em</code> — 第一个值表示 top-left 方向的角 ，第二个值表示top-right 和 bottom-left 方向的角，第三个值表示 bottom-right 方向的角</td>
</tr>
<tr>
<td><img alt="corner4.png" src="/files/3653/corner4.png"></td>
<td>
<p><em>4个值的语法：</em><code>border-radius: 1em 2em 3em 4em</code> — 这四个值分别表示top-left、 top-right、 bottom-right 、bottom-left 方向的角。总是按此顺序，即从top-left开始的顺时针顺序</p>
</td>
</tr>
</tbody>
</table>
</li>
</ol>
</li>
</ol>
<h2 id="Background_Properties" name="Background_Properties">Background 属性</h2>
<p>background 有以下属性：</p>
<pre class="brush:css notranslate">background-color: #000;
background-image: url(images/bg.gif);
background-repeat: no-repeat;
background-position: top right;</pre>
<p>可以简写成一行声明：</p>
<pre class="brush:css notranslate">background: #000 url(images/bg.gif) no-repeat top right;</pre>
<p>简写的形式实际上等价于以上普通属性再加上 <code>background-attachment: scroll</code> 以及 CSS3 中的一些附加属性。</p>
<h2 id="Font_Properties" name="Font_Properties">Font 属性</h2>
<p>下面的声明：</p>
<pre class="brush:css notranslate">font-style: italic;
font-weight: bold;
font-size: .8em;
line-height: 1.2;
font-family: Arial, sans-serif;</pre>
<p>可以简写成下面的：</p>
<pre class="brush:css notranslate">font: italic bold .8em/1.2 Arial, sans-serif;</pre>
<p>这个简写声明实际上等价于以上普通属性再加上 <code>font-variant: normal</code> 和 <code>font-size-adjust: none</code> (CSS2.0 / CSS3)，<code>font-stretch: normal</code> (CSS3)。</p>
<h2 id="Border_Properties" name="Border_Properties">Border 属性</h2>
<p>对于 border 来说，宽度、颜色和类型是可以被简写到一个声明里的。比如：</p>
<pre class="brush:css notranslate">border-width: 1px;
border-style: solid;
border-color: #000;</pre>
<p>可以简写成：</p>
<pre class="brush:css notranslate">border: 1px solid #000;</pre>
<h2 id="Margin_and_Padding_Properties" name="Margin_and_Padding_Properties">Margin 和 Padding 属性</h2>
<p>margin 和 padding 值的简写版本类似。下面的 CSS 声明：</p>
<pre class="brush:css notranslate">margin-top: 10px;
margin-right: 5px;
margin-bottom: 10px;
margin-left: 5px;</pre>
<p>和下面的声明是一样的（注意，值是从 top 顺时针开始的：top、right、bottom、接着是 left）</p>
<pre class="brush:css notranslate">margin: 10px 5px 10px 5px;</pre>
<p>Margin 对于多个值有以下的简写规则：</p>
<ul>
<li>当只有<strong>一个</strong>值声明时，该值会用于所有<strong>四个</strong>值。</li>
<li>当只有<strong>两个</strong>值声明时，第一个值用于<strong>上边距</strong>和<strong>下边距</strong>，第二个值用于<strong>左边距</strong>和<strong>右边距</strong>。</li>
<li>当有三个值声明时，第一个值用于<strong>上边距</strong>，第二个值用于<strong>左边距</strong>和<strong>右边距</strong>，第三个值用于<strong>下边距。</strong></li>
<li>当有四个值声明时，其会按顺序用于上、右、下、左边距（按顺时针）。</li>
</ul>
<h2 id="The_universal_shorthand_property" name="The_universal_shorthand_property">通用简写属性</h2>
<p>CSS 提供了一个通用的简写属性 {{cssxref("all")}}，它可以应用于文档里所有的属性。它的目的是改变属性的继承模型：</p>
<p>{{page("/zh-CN/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance", "Controlling_inheritance")}}</p>
<p>查看 <a href="https://wiki.developer.mozilla.org/en-US/docs/Learn/CSS/Introduction_to_CSS/Cascade_and_inheritance">Cascade and inheritance</a> or <a href="https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/Cascade">Introducing the CSS Cascade</a> 了解更多关于继承的信息。</p>
<h2 id="See_also" name="See_also">另请参阅</h2>
<ul>
<li><a href="/zh-CN/docs/CSS/CSS_Reference" title="CSS Reference">CSS Reference</a></li>
<li>Shorthand properties: {{cssxref("background")}}, {{cssxref("font")}}, {{cssxref("margin")}}, {{cssxref("border")}}, {{cssxref("border-top")}}, {{cssxref("border-right")}}, {{cssxref("border-bottom")}}, {{cssxref("border-left")}}, {{cssxref("border-width")}}, {{cssxref("border-color")}}, {{cssxref("border-style")}}, {{cssxref("transition")}}, {{cssxref("transform")}}, {{cssxref("padding")}}, {{cssxref("list-style")}}, {{cssxref("border-radius")}}.</li>
</ul>
|
