0Pricing
CSS Academy · Lektion

Vererbung und die Eigenschaft all

Verstehen Sie die CSS-Vererbungsregeln und verwenden Sie die Eigenschaft all, um geerbte Styles zurückzusetzen.

Vererbung und die Eigenschaft all ist eine kostenlose CSS Academy-Lektion auf CoddyKit. Dies ist Lektion 4 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des CSS Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was ist Vererbung?

Einige CSS-Eigenschaften geben ihren berechneten Wert automatisch an untergeordnete Elemente weiter. Das ist Vererbung. Dadurch müssen Sie nicht für jedes Element in einer Komponente dieselbe Regel schreiben.

Geerbte Eigenschaften

Typischerweise geerbt werden Typografie- und Texteigenschaften:

  • font-family, font-size, font-weight, font-style
  • color
  • line-height
  • letter-spacing
  • text-align
  • visibility
  • Benutzerdefinierte CSS-Eigenschaften

Nicht geerbte Eigenschaften

Typischerweise NICHT geerbt werden Box-Modell- und Layout-Eigenschaften:

  • margin, padding, border
  • width, height
  • background
  • display, position
  • box-shadow, transform

Das Schlüsselwort inherit

Erzwingen Sie die Vererbung ausdrücklich mit dem Schlüsselwort inherit – das ist nützlich für Formularelemente, die Schrift standardmäßig nicht erben:

<div style="font-family: Georgia, serif; font-size: 20px; color: darkred;">
  <input type="text" placeholder="Inherits font/color" />
  <button>Button inherits too</button>
  <textarea>Inherits</textarea>
  <select><option>Option A</option></select>
</div>

Das Schlüsselwort initial

Das Schlüsselwort initial setzt eine Eigenschaft auf ihren initialen Standardwert des Browsers zurück, wie er in der CSS-Spezifikation definiert ist – unabhängig von Vererbung und User-Agent-Stilen.

<div style="font-size: 30px; color: tomato;">
  <p>Normal text inherits large tomato-colored style from its parent.</p>
  <p class="reset-text">This text resets to browser defaults (initial) — medium size, black color.</p>
</div>

Das Schlüsselwort unset

unset ist kontextabhängig:

  • Bei geerbten Eigenschaften verhält es sich wie inherit
  • Bei nicht geerbten Eigenschaften verhält es sich wie initial

Damit wird eine Eigenschaft effektiv in ihren natürlichen Zustand „zurückgesetzt“.

<div style="color: tomato;">
  <p style="margin: 40px;">Normal paragraph — keeps its large margin, inherits tomato color.</p>
  <p class="clear-styles" style="margin: 40px;">Unset paragraph — color unset (still inherits tomato), margin unset (resets to 0).</p>
</div>

Das Schlüsselwort revert

revert setzt auf den Wert im User-Agent-Stylesheet des Browsers zurück – es wird wiederhergestellt, was der Browser standardmäßig ohne Autorenstile anzeigen würde. Das ist nützlich für eingebettete Widgets von Drittanbietern.

<div style="color: tomato; font-family: Georgia, serif;">
  Ancestor style is tomato serif text.
  <div class="widget">This widget uses "all: revert" to fall back to the browser's user-agent defaults, undoing author styles.</div>
</div>

Die CSS-Eigenschaft all

Die all-Eigenschaft ist eine Kurzschreibweise, die ein Schlüsselwort gleichzeitig auf jede CSS-Eigenschaft anwendet, mit Ausnahme von direction und unicode-bidi.

<div style="color: tomato; font-family: Georgia, serif; padding: 12px; background: #eee;">
  <div class="isolated-widget">all: initial — resets everything to spec defaults</div>
  <div class="scoped-component">all: revert — resets to browser UA defaults</div>
</div>

all: initial in der Praxis

Verwenden Sie all: initial, wenn Sie eine vollständig isolierte Komponente erstellen müssen, die nicht von globalen oder übergeordneten Styles beeinflusst wird:

<div style="color: tomato; font-family: Georgia, serif; font-size: 28px;">
  Page context — large serif tomato text
  <div class="email-template-preview">Email preview — isolated with all: initial, then restyled with Arial 14px.</div>
</div>

Muster für all: unset

Entfernen Sie die Browser-Styles von Schaltflächen für benutzerdefinierte Schaltflächen, ohne alle relevanten Eigenschaften kennen zu müssen:

<button class="custom-btn">Custom button styled from scratch using all: unset</button>
<button>Default browser button for comparison</button>

Vererbung und benutzerdefinierte Eigenschaften

Benutzerdefinierte CSS-Eigenschaften werden standardmäßig vererbt. Das macht sie so leistungsfähig – eine auf :root gesetzte Variable ist überall verfügbar. Verwenden Sie @property { inherits: false }, um eine benutzerdefinierte Eigenschaft von der Vererbung auszunehmen.

Kurzer Test

Welches Schlüsselwort setzt eine Eigenschaft auf den Standardwert des Browser-User-Agents zurück, statt auf den Initialwert der CSS-Spezifikation?

Zusammenfassung

Vererbte Eigenschaften geben ihre Werte an Nachfahren weiter, nicht vererbte Eigenschaften dagegen nicht. Die Schlüsselwörter inherit, initial, unset und revert ermöglichen eine gezielte Steuerung. Die all-Eigenschaft setzt alle Eigenschaften gleichzeitig zurück – ideal für isolierte Komponenten und benutzerdefinierte Formularelemente.

Häufig gestellte Fragen

Ist die Lektion „Vererbung und die Eigenschaft all“ kostenlos?

Ja — der vollständige Text von „Vererbung und die Eigenschaft all“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des CSS Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der CSS Academy-Kurs umfasst insgesamt 4 Lektionen.

Was lerne ich in „Vererbung und die Eigenschaft all“?

Verstehen Sie die CSS-Vererbungsregeln und verwenden Sie die Eigenschaft all, um geerbte Styles zurückzusetzen. Du übst CSS Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.

Brauche ich Erfahrung, um CSS Academy zu starten?

Keine Vorkenntnisse erforderlich. CSS Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 4 von 4.

Wie lange dauert die Lektion „Vererbung und die Eigenschaft all“?

Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.

Kann ich in dieser CSS Academy-Lektion Code schreiben und ausführen?

Ja. Jede CSS Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.

Alle Lektionen in diesem Kurs

  1. Spezifität berechnen: Inline-Style, ID, Klasse, Element
  2. Die Kaskade: Herkunft und Reihenfolge
  3. !important: Wann und warum nicht
  4. Vererbung und die Eigenschaft all
← Zurück zu CSS Academy