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 initialen oder vererbten Werte setzen oder auf die Werte, die in einer anderen Kaskadenschicht oder im Stylesheet-Ursprung angegeben sind.

Probieren Sie es aus

Zusammensetzende Eigenschaften

Diese Eigenschaft ist ein Shorthand für alle CSS-Eigenschaften außer unicode-bidi, direction und benutzerdefinierte Eigenschaften.

Syntax

css

/* Global values */
all: initial;
all: inherit;
all: unset;
all: revert;
all: revert-layer;

Die all Eigenschaft wird als einer der CSS-Global-Keyword-Werte spezifiziert. Beachten Sie, dass keiner dieser Werte die Eigenschaften unicode-bidi und direction beeinflusst.

Werte

initial

Gibt an, dass alle Eigenschaften des Elements auf ihre initialen Werte geändert werden sollen.

inherit

Gibt an, dass alle Eigenschaften des Elements auf ihre vererbten Werte geändert werden sollen.

unset

Gibt an, dass alle Eigenschaften des Elements auf ihre vererbten Werte geändert werden, wenn sie standardmäßig vererbt werden, oder auf ihre initialen Werte, wenn nicht.

revert

Bestimmt ein Verhalten, das vom Stylesheet-Ursprung abhängt, zu dem die Deklaration gehört:

Wenn die Regel zum Autor-Ursprung gehört, setzt der revert Wert die Kaskade auf die Benutzerebene zurück, sodass die spezifizierten Werte berechnet werden, als ob keine Regeln auf Autorenebene für das Element spezifiziert wären. Für Zwecke von revert beinhaltet der Autor-Ursprung die Override- und Animations-Ursprünge.
Wenn die Regel zum Benutzer-Ursprung gehört, setzt der revert Wert die Kaskade auf die Benutzeragentenebene zurück, sodass die spezifizierten Werte berechnet werden, als ob keine Regeln auf Autoren- oder Benutzerebene für das Element spezifiziert wären.
Wenn die Regel zum Benutzeragenten-Ursprung gehört, wirkt revert wie unset.

revert-layer

Gibt an, dass alle Eigenschaften des Elements die Kaskade auf eine vorherige Kaskadenschicht zurücksetzen sollen, falls eine vorhanden ist. Wenn keine andere Kaskadenschicht existiert, werden die Eigenschaften des Elements zur passenden Regel in der aktuellen Schicht oder zu einem vorherigen Stil-Ursprung zurückgesetzt, falls eine existiert.

Formale Definition

Initialer Wert	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

all = 
  initial       |
  inherit       |
  unset         |
  revert        |
  revert-layer

Beispiele

In diesem Beispiel enthält die CSS-Datei Stile für das <blockquote> Element zusätzlich zu einigen Stilen für das übergeordnete <body> Element. Verschiedene Ausgaben im Ergebnisabschnitt zeigen, wie die Stilisierung des <blockquote> Elements beeinflusst wird, wenn unterschiedliche Werte für die all Eigenschaft innerhalb der blockquote Regel angewendet werden.

HTML

html

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

CSS

css

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
  margin: 0;
  padding: 0;
}

blockquote {
  background-color: skyblue;
  color: red;
}

Ergebnis

A. Keine `all` Eigenschaft

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
}

Dies ist das Szenario, in dem keinerlei all Eigenschaft innerhalb der blockquote Regel festgelegt ist. Das <blockquote> Element verwendet die Standard-Stilisierung des Browsers, die ihm einen Rand verleiht, zusammen mit einem spezifischen Hintergrund und einer Textfarbe, die im Stylesheet angegeben sind. Es verhält sich außerdem als Blockelement: Der Text, der ihm folgt, befindet sich darunter.

B. `all: initial`

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: initial;
}

Mit der all Eigenschaft auf initial in der blockquote Regel verwendet das <blockquote> Element die Standard-Stilisierung des Browsers nicht mehr: Es ist nun ein Inline-Element (Anfangswert), seine background-color ist transparent (Anfangswert), seine font-size ist medium und seine color ist black (Anfangswert).

C. `all: inherit`

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: inherit;
}

In diesem Fall verwendet das <blockquote> Element nicht die Standard-Stilisierung des Browsers. Stattdessen erbt es Stilwerte von seinem übergeordneten <body> Element: es ist nun ein Blockelement (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`

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: unset;
}

Wenn der unset Wert auf die all Eigenschaft in der blockquote Regel angewendet wird, verwendet das <blockquote> Element nicht die Standard-Stilisierung des Browsers. Da background-color eine nicht-vererbte Eigenschaft ist und font-size und color vererbte Eigenschaften sind, ist das <blockquote> Element jetzt ein Inline-Element (Anfangswert), seine background-color ist transparent (Anfangswert), aber seine font-size bleibt small (geerbter Wert) und seine color ist blue (geerbter Wert).

E. `all: revert`

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: revert;
}

Wenn die all Eigenschaft in der blockquote Regel auf revert gesetzt wird, wird die blockquote Regel als nicht existent betrachtet und die Stilisierungseigenschaftswerte werden von denen des übergeordneten Elements <body> geerbt. So wird das <blockquote> Element als Blockelement gestaltet, mit background-color #F0F0F0, font-size small und color blue - alle Werte geerbt aus der body Regel.

F. `all: revert-layer`

<blockquote id="quote">
  Lorem ipsum dolor sit amet, consectetur adipiscing elit.
</blockquote>
Phasellus eget velit sagittis.

body {
  font-size: small;
  background-color: #f0f0f0;
  color: blue;
}
blockquote {
  background-color: skyblue;
  color: red;
  all: revert-layer;
}

Es sind keine Kaskadenschichten in der CSS-Datei definiert, daher erbt das <blockquote> Element seinen Stil aus der passenden body Regel. Das <blockquote> Element hier wird als Blockelement gestaltet, mit background-color #F0F0F0, font-size small und color blue - alle Werte geerbt aus der body Regel. Dieses Szenario ist ein Beispiel für den Fall, wenn all auf revert-layer gesetzt wird und sich genauso verhält wie wenn all auf revert gesetzt ist.

Spezifikationen

Specification
CSS Cascading and Inheritance Level 4 # all-shorthand

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

CSS Global-Keyword-Werte: initial, inherit, unset, revert, revert-layer

A. Keine all Eigenschaft

B. all: initial

C. all: inherit

D. all: unset

E. all: revert

F. all: revert-layer