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
160
161
162
163
164
165
166
167
168
169
170
171
172
173
|
---
title: all
slug: Web/CSS/all
tags:
- CSS
translation_of: Web/CSS/all
---
<p>{{CSSRef}}</p>
<p><a href="/zh-CN/docs/Web/CSS">CSS</a> <code><strong>all</strong></code> <a href="/zh-CN/docs/Web/CSS/Shorthand_properties">简写属性</a> 将除却 {{cssxref("unicode-bidi")}} 与 {{cssxref("direction")}} 之外的所有属性重设至其初始值，或继承值。</p>
<div>{{EmbedInteractiveExample("pages/css/all.html")}}</div>
<h2 id="语法">语法</h2>
<pre class="brush:css no-line-numbers">/* Global values */
all: initial
all: inherit
all: unset
/* CSS Cascading and Inheritance Level 4 */
all: revert;
</pre>
<p><code>all</code> 属性被作为 CSS 全局关键词的其中之一. 不过需要注意的是，{{cssxref("unicode-bidi")}} 与 {{cssxref("direction")}} 这两个属性是不受 <code>all</code> 影响的</p>
<h3 id="取值">取值</h3>
<dl>
<dt>{{cssxref("initial")}}</dt>
<dd>该关键字代表改变该元素或其父元素的所有属性至初始值。</dd>
<dt>{{cssxref("inherit")}}</dt>
<dd>该关键字代表改变该元素或其父元素的所有属性的值至他们的父元素属性的值。<a href="/en-US/docs/Web/CSS/inheritance">inherited values</a></dd>
<dt>{{cssxref("unset")}}</dt>
<dd>该关键字代表如果该元素的属性的值是可继承的，则改变该元素或该元素的父元素的所有属性的值为他们父元素的属性值，反之则改变为初始值。</dd>
<dt>{{cssxref("revert")}}</dt>
<dd>指定依赖于声明所属的样式表原点的行为：
<dl>
<dt><a href="/en-US/docs/Web/CSS/Cascade#User-agent_stylesheets">User-agent origin</a></dt>
<dd>相当于 <code>unset</code></dd>
<dt><a href="/en-US/docs/Web/CSS/Cascade#User_stylesheets">User origin</a></dt>
<dd>将层叠回滚到用户代理级别，以便计算指定的值，就好像没有为该元素指定作者级别或用户级别规则。</dd>
<dt><a href="/en-US/docs/Web/CSS/Cascade#Author_stylesheets">Author origin</a></dt>
<dd>将层叠回滚到用户级别，以便计算指定的值，就好像没有为元素指定作者级规则。出于<code>revert</code>的目的，“作者”原点包括“覆盖”和“动画”原点。</dd>
</dl>
</dd>
</dl>
<h3 id="正式语法">正式语法</h3>
{{csssyntax}}
<h2 id="示例">示例</h2>
<h3 id="HTML">HTML</h3>
<pre class="brush: html"><blockquote id="quote">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
</pre>
<h3 id="CSS">CSS</h3>
<pre class="brush: css">body {
font-size: small;
background-color: #F0F0F0;
color: blue;
}
blockquote {
background-color: skyblue;
color: red;
}
</pre>
<p id="Results">结果</p>
<div id="ex0" style="display: inline-block; width: 225px; vertical-align: top;">
<h4 id="没有_all_属性">没有 <code>all</code> 属性</h4>
<pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.
</pre>
<pre class="brush: css hidden">body { font-size: small; background-color: <span class="st">#F0F0F0</span>; color:blue; }
blockquote { background-color: skyblue; color: red; }
</pre>
{{EmbedLiveSample("ex0", "200", "125")}}
<p>{{HTMLElement("blockquote")}} 使用浏览器默认样式，以及另外的定义的背景色与文字颜色。它是一个 block 元素：它之后的文字位于它的下方。</p>
</div>
<div id="ex1" style="display: inline-block; width: 225px; vertical-align: top;">
<h4 id="allunset"><code>all:unset</code></h4>
<pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.</pre>
<pre class="brush: css hidden">body { font-size: small; background-color: <span class="st">#F0F0F0</span>; color:blue; }
blockquote { background-color: skyblue; color: red; }
blockquote { all: unset; }
</pre>
{{EmbedLiveSample("ex1", "200", "125")}}
<p>{{HTMLElement("blockquote")}} 没有使用浏览器默认样式：它现在是一个 inline 元素(初始值)，其 {{cssxref("background-color")}} 为 <code>transparent</code> (初始值)，但其 {{cssxref("font-size")}} 仍为 <code>small</code> (继承值) ，其 {{cssxref("color")}} 为 <code>blue</code> (继承值)。</p>
</div>
<div id="ex2" style="display: inline-block; width: 225px; vertical-align: top;">
<h4 id="allinitial"><code>all:initial</code></h4>
<pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.
</pre>
<pre class="brush: css hidden">body { font-size: small; background-color: <span class="st">#F0F0F0</span>; color:blue; }
blockquote { background-color: skyblue; color: red; }
blockquote { all: initial; }
</pre>
{{EmbedLiveSample("ex2", "200", "125")}}
<p>{{HTMLElement("blockquote")}} 没有使用浏览器默认样式：它现在是一个 inline 元素(初始值)，其 {{cssxref("background-color")}} 为 <code>transparent</code> (初始值)，其 {{cssxref("font-size")}} 为 <code>normal</code> (初始值)，其 {{cssxref("color")}} 为 <code>black</code>(初始值)。</p>
</div>
<div id="ex3" style="display: inline-block; width: 225px; vertical-align: top;">
<h4 id="allinherit"><code>all:inherit</code></h4>
<pre class="brush: html hidden"><blockquote id="quote">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</blockquote> Phasellus eget velit sagittis.
</pre>
<pre class="brush: css hidden">body { font-size: small; background-color: #F0F0F0; color:blue; }
blockquote { background-color: skyblue; color: red; }
blockquote { all: inherit; }
</pre>
{{EmbedLiveSample("ex3", "200", "125")}}
<p>{{HTMLElement("blockquote")}} 没有使用浏览器默认样式：它现在是一个 block 元素（继承自其父元素 {{HTMLElement("body")}}），其 {{cssxref("background-color")}} 为 <code>transparent</code> (继承值)，其 {{cssxref("font-size")}} 为 <code>small</code> (继承值) ，其 {{cssxref("color")}} 为 <code>blue</code> (继承值)。</p>
</div>
<h2 id="规范">规范</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">规范</th>
<th scope="col">状态</th>
<th scope="col">备注</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{ SpecName('CSS4 Cascade', '#all-shorthand', 'all') }}</td>
<td>{{ Spec2('CSS4 Cascade') }}</td>
<td>添加属性值 <code>revert</code>。</td>
</tr>
<tr>
<td>{{ SpecName('CSS3 Cascade', '#all-shorthand', 'all') }}</td>
<td>{{ Spec2('CSS3 Cascade') }}</td>
<td>初始定义。</td>
</tr>
</tbody>
</table>
<p>{{cssinfo}}</p>
<h2 id="浏览器兼容性">浏览器兼容性</h2>
<p>{{Compat("css.properties.all")}}</p>
<h2 id="参见">参见</h2>
<p>CSS 通用属性值： {{cssxref("initial")}}, {{cssxref("inherit")}} and {{cssxref("unset")}}.</p>
|
