all
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.
Die all
Shorthand-CSS-Eigenschaft setzt alle Eigenschaften eines Elements zurück, außer unicode-bidi
, direction
und CSS Custom Properties. Sie kann Eigenschaften auf ihre ursprünglichen oder geerbten Werte setzen oder auf Werte, die in einer anderen Cascade-Ebene oder einem anderen Stylesheet-Ursprung angegeben sind.
Probieren Sie es aus
Bestandteile der Eigenschaft
Diese Eigenschaft ist ein Shorthand für alle CSS-Eigenschaften, außer für unicode-bidi
, direction
und Custom Properties.
Syntax
/* Global values */
all: initial;
all: inherit;
all: unset;
all: revert;
all: revert-layer;
Die all
-Eigenschaft wird mit einem der globalen CSS-Schlüsselwortwerte angegeben. Beachten Sie, dass keiner dieser Werte die Eigenschaften unicode-bidi
und direction
beeinflusst.
Werte
initial
-
Gibt an, dass alle Eigenschaften des Elements auf ihre ursprünglichen Werte zurückgesetzt werden sollen.
inherit
-
Gibt an, dass alle Eigenschaften des Elements auf ihre geerbten Werte gesetzt werden sollen.
unset
-
Gibt an, dass alle Eigenschaften des Elements auf ihre geerbten Werte gesetzt werden sollen, wenn sie standardmäßig vererbbar sind, oder auf ihre ursprünglichen Werte, wenn nicht.
revert
-
Gibt ein Verhalten basierend auf dem Stylesheet-Ursprung an, zu dem die Deklaration gehört:
- Wenn die Regel dem Autor-Ursprung gehört, setzt der
revert
-Wert die Kaskade auf Benutzerebene zurück, sodass die spezifizierten Werte so berechnet werden, als ob keine Regeln auf der Autorenebene für das Element angegeben waren. Fürrevert
umfasst der Autor-Ursprung auch die Override- und Animationsursprünge. - Wenn die Regel dem Benutzer-Ursprung gehört, setzt der
revert
-Wert die Kaskade auf die Benutzeragent-Ebene zurück, sodass die spezifizierten Werte so berechnet werden, als ob keine Regeln auf der Autoren- oder Benutzerebene für das Element angegeben waren. - Wenn die Regel dem Benutzeragent-Ursprung gehört, verhält sich der
revert
-Wert wieunset
.
- Wenn die Regel dem Autor-Ursprung gehört, setzt der
revert-layer
-
Gibt an, dass alle Eigenschaften des Elements die Kaskade auf eine vorherige Kaskadenschicht zurücksetzen sollen, falls eine existiert. Wenn keine andere Kaskadenschicht existiert, werden die Eigenschaften des Elements auf die übereinstimmende Regel in der aktuellen Schicht oder auf einen vorherigen Stil-Ursprung zurückgesetzt.
Formale Definition
Anfangswert | Es gibt keinen praktischen Initialwert dafür. |
---|---|
Anwendbar auf | alle Elemente |
Vererbt | Nein |
Berechneter Wert | wie der angegebene Wert wird er auf alle Eigenschaften angewandt, für die dies eine Kurzschreibweise ist. |
Animationstyp | wie jede der Kurzschreibweisen Eigenschaften (alle Eigenschaften außer unicode-bidi und direction ) |
Formale Syntax
Beispiele
In diesem Beispiel enthält die CSS-Datei Styling für das <blockquote>
-Element sowie Styling für das übergeordnete <body>
-Element. In den Ergebnissen wird gezeigt, wie sich das Styling des <blockquote>
-Elements ändert, wenn verschiedene Werte für die all
-Eigenschaft in der blockquote
-Regel angewendet werden.
HTML
<blockquote id="quote">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.
CSS
body {
font-size: small;
background-color: #f0f0f0;
color: blue;
margin: 0;
padding: 0;
}
blockquote {
background-color: skyblue;
color: red;
}
Ergebnisse
A. Keine all
-Eigenschaft
In diesem Szenario wird im blockquote
-Selektor keine all
-Eigenschaft gesetzt. Das <blockquote>
-Element verwendet das Standardstyling des Browsers, das ihm einen Rand, eine bestimmte Hintergrundfarbe und Textfarbe verleiht, wie im Stylesheet angegeben. Es verhält sich auch wie ein Block-Element: Der darauf folgende Text befindet sich darunter.
B. all: initial
Mit der all
-Eigenschaft, die im blockquote
-Selektor auf initial
gesetzt ist, verwendet das <blockquote>
-Element nicht mehr das Standardstyling des Browsers: Es ist jetzt ein Inline-Element (ursprünglicher Wert), seine background-color
ist transparent
(ursprünglicher Wert), seine font-size
ist medium
, und seine color
ist black
(ursprünglicher Wert).
C. all: inherit
In diesem Fall verwendet das <blockquote>
-Element nicht das Standardstyling des Browsers. Stattdessen erbt es die Stilwerte vom übergeordneten <body>
-Element: Es ist jetzt ein Block-Element (geerbter Wert), seine background-color
ist #F0F0F0
(geerbter Wert), seine font-size
ist small
(geerbter Wert), und seine color
ist blue
(geerbter Wert).
D. all: unset
Wenn der Wert unset
auf die all
-Eigenschaft in der blockquote
-Regel angewendet wird, verwendet das <blockquote>
-Element nicht das Standardstyling des Browsers. Weil background-color
keine geerbte Eigenschaft ist und font-size
und color
geerbte Eigenschaften sind, ist das <blockquote>
-Element jetzt ein Inline-Element (ursprünglicher Wert), seine background-color
ist transparent
(ursprünglicher Wert), aber seine font-size
ist weiterhin small
(geerbter Wert), und seine color
ist blue
(geerbter Wert).
E. all: revert
Wenn die all
-Eigenschaft in der blockquote
-Regel auf revert
gesetzt wird, wird die blockquote
-Regel als nicht existent angesehen, und die Stilwerte werden aus den für das übergeordnete <body>
-Element angewendeten Werten geerbt. So wird das <blockquote>
-Element als Block-Element gestaltet, mit background-color
#F0F0F0
, font-size
small
und color
blue
- alle Werte geerbt aus der body
-Regel.
F. all: revert-layer
In der CSS-Datei sind keine Kaskadenschichten definiert, daher übernimmt das <blockquote>
-Element die Stilwerte aus der passenden body
-Regel. Das <blockquote>
-Element wird hier als Block-Element gestaltet, mit background-color
#F0F0F0
, font-size
small
und color
blue
- alle Werte geerbt aus der body
-Regel. Dieses Szenario ist ein Beispiel dafür, dass all
, wenn es auf revert-layer
gesetzt ist, sich genauso verhält, wie wenn all
auf revert
gesetzt ist.
Spezifikationen
Specification |
---|
CSS Cascading and Inheritance Level 4 # all-shorthand |
Browser-Kompatibilität
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
all |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
Siehe auch
Globale CSS-Schlüsselwortwerte: initial
, inherit
, unset
, revert
, revert-layer