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 Kurznotation CSS-Eigenschaft setzt alle Eigenschaften eines Elements zurück, außer unicode-bidi, direction und CSS-Custom-Properties. Es kann Eigenschaften auf ihre initialen oder geerbten Werte setzen oder auf die in einer anderen Kaskadenschicht oder Stylesheet-Ursprung angegebenen Werte.

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;
}

Konstituierende Eigenschaften

Diese Eigenschaft ist eine Kurznotation für alle CSS-Eigenschaften, außer für unicode-bidi, direction und custom properties.

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 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 Initialwerte 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 sollen, wenn sie standardmäßig geerbt werden, oder auf ihre Initialwerte, wenn nicht.

revert

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

Wenn die Regel zum Author Origin gehört, setzt der revert-Wert die Kaskade auf die Benutzerebene zurück, sodass die spezifizierten Werte berechnet werden, als ob keine Autor-Regeln für das Element angegeben wurden. Für Zwecke von revert umfasst der Autor-Ursprung die Override- und Animations-Ursprünge.
Wenn die Regel zum User Origin gehört, setzt der revert-Wert die Kaskade auf die User-Agent-Ebene zurück, sodass die spezifizierten Werte berechnet werden, als ob keine Regeln auf Autoren- oder Benutzerebene für das Element angegeben wurden.
Wenn die Regel zum User-Agent Origin gehört, wirkt der revert-Wert wie unset.

revert-layer

Gibt an, dass alle Eigenschaften des Elements die Kaskade auf eine vorherige Kaskadenschicht zurücksetzen sollen, falls eine existiert. Falls keine weitere Kaskadenschicht existiert, setzen die Eigenschaften des Elements auf die übereinstimmende Regel in der aktuellen Schicht oder auf einen vorherigen Style-Origin zurück, falls eine existiert.

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 Stile für das <blockquote>-Element sowie einige Stile für das übergeordnete <body>-Element. Verschiedene Ausgaben im Abschnitt Ergebnisse zeigen, wie die Formatierung 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 innerhalb der Blockquote-Regel gesetzt ist. Das <blockquote>-Element verwendet das Standard-Styling des Browsers, das ihm einen Rand sowie einen bestimmten Hintergrund- und Textfarbe gemäß dem Stylesheet verleiht. Es verhält sich auch wie ein Block-Element: Der folgende Text 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, die in der Blockquote-Regel auf initial gesetzt ist, verwendet das <blockquote>-Element nicht mehr das Standard-Styling des Browsers: Es ist jetzt ein Inline-Element (Initialwert), seine background-color ist transparent (Initialwert), seine font-size ist medium, und seine color ist black (Initialwert).

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 mehr das Standard-Styling des Browsers. Stattdessen erbt es Stilwerte vom übergeordneten <body>-Element: Es ist jetzt ein Block-Element (vererbter Wert), seine background-color ist #F0F0F0 (vererbter Wert), seine font-size ist small (vererbter Wert), und seine color ist blue (vererbter 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 mehr das Standard-Styling 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 (Initialwert), seine background-color ist transparent (Initialwert), aber seine font-size ist immer noch small (vererbter Wert), und seine color ist blue (vererbter 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 ist, wird die Blockquote-Regel als nicht existent betrachtet und die Stil-Eigenschaftswerte werden von denen geerbt, die auf das übergeordnete Element <body> angewendet wurden. So wird das <blockquote>-Element als ein Block-Element mit background-color #F0F0F0, font-size small und color blue gestaltet - 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 Kaskadenschichten in der CSS-Datei definiert, daher erbt das <blockquote>-Element seinen Stil von der passenden body-Regel. Das <blockquote>-Element ist hier als Block-Element gestaltet, 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, wenn all auf revert-layer gesetzt ist, das gleiche Verhalten zeigt wie all, das auf revert gesetzt ist.

Spezifikationen

Specification
CSS Cascading and Inheritance Level 4 # all-shorthand

Browser-Kompatibilität

Siehe auch

CSS-Global-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