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 die Werte, die in einer anderen Kaskadenebene oder einem anderen Stylesheet-Ursprung festgelegt sind.

Probieren Sie es aus

/*no all property*/

all: initial;

all: inherit;

all: unset;

all: revert;

<section id="default-example">
  <div class="example-container-bg">
    <div class="example-container">
      <p id="example-element">
        This paragraph has a font size of 1.5rem and a color of gold. It also
        has 1rem of vertical margin set by the user-agent. The parent of the
        paragraph is a &lt;div&gt; with a dashed blue border.
      </p>
    </div>
  </div>
</section>

#example-element {
  color: gold;
  padding: 10px;
  font-size: 1.5rem;
  text-align: left;
  width: 100%;
}

.example-container {
  border: 2px dashed #2d5ae1;
}

.example-container-bg {
  background-color: #77767b;
  padding: 20px;
}

Zusammengesetzte Eigenschaften

Diese Eigenschaft ist eine 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 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 geändert werden sollen.

inherit

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

unset

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

revert

Gibt ein Verhalten an, das von dem 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 so berechnet werden, als wären keine Autorenregeln für das Element festgelegt worden. Für revert umfasst der Autor-Ursprung die Overrides und Animationsursprünge.
Wenn die Regel zum Benutzer-Ursprung gehört, setzt der revert-Wert die Kaskade auf die Benutzer-Agent-Ebene zurück, sodass die spezifizierten Werte so berechnet werden, als wären keine Autoren- oder Benutzerregeln für das Element festgelegt worden.
Wenn die Regel zum Benutzer-Agent-Ursprung gehört, verhält sich der revert-Wert wie unset.

revert-layer

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

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

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

Beispiele

In diesem Beispiel enthält die CSS-Datei das Styling für das <blockquote>-Element zusätzlich zu einigen Stilen für das übergeordnete <body>-Element. Verschiedene Ausgaben im Abschnitt Ergebnisse demonstrieren, wie das Styling des <blockquote>-Elements beeinflusst wird, wenn verschiedene Werte auf 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;
}

Ergebnisse

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 keine all-Eigenschaft in der blockquote-Regel gesetzt ist. Das <blockquote>-Element verwendet die Standardbrowser-Stilgebung, die ihm einen Rand gibt, zusammen mit einem spezifischen Hintergrund und Textfarbe, wie im Stylesheet angegeben. Es verhält sich auch wie ein Block-Element: Der nachfolgende Text befindet sich unterhalb.

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 nicht mehr die Standardbrowser-Stilgebung: 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`

<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 Standardbrowser-Stilgebung. Stattdessen erbt es Stilwerte von seinem ü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`

<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 Standardbrowser-Stilgebung. Da background-color eine nicht vererbte Eigenschaft ist und font-size und color vererbte 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 immer noch 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 auf revert in der blockquote-Regel gesetzt ist, wird die blockquote-Regel als nicht existent betrachtet und die Stilwerte werden von denen des übergeordneten <body>-Elements übernommen. So wird das <blockquote>-Element als Block-Element gestylt, mit background-color #F0F0F0, font-size small, und color blue - alle Werte, die von der body-Regel geerbt wurden.

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 Kaskadenebenen in der CSS-Datei definiert, daher erbt das <blockquote>-Element seinen Stil von der passenden body-Regel. Das <blockquote>-Element wird hier als Block-Element gestylt, mit background-color #F0F0F0, font-size small, und color blue - alle Werte, die von der body-Regel geerbt wurden. Dieses Szenario ist ein Beispiel für den Fall, in dem all auf revert-layer gesetzt das gleiche Verhalten zeigt wie all auf revert gesetzt.

Spezifikationen

Specification
CSS Cascading and Inheritance Level 4 # all-shorthand

Browser-Kompatibilität

BCD tables only load in the browser

Siehe auch

Globale CSS-Schlüsselwortwerte: 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