CSS beherrschen: Die Kaskade verstehen

Cascading Style Sheets (CSS) ist eine grundlegende Technologie des Webs, die es Entwicklern ermöglicht, die visuelle Darstellung von HTML-Dokumenten zu steuern. Während die CSS-Syntax auf den ersten Blick einfach erscheinen mag, kann die Art und Weise, wie Stile angewendet und vererbt werden, überraschend komplex sein. Das Verständnis dieser Feinheiten ist entscheidend für das Schreiben von effizientem, wartbarem und vorhersehbarem CSS.
In diesem umfassenden Leitfaden untersuchen wir die Kaskaden- und Vererbungskonzepte von CSS.

Die CSS-Kaskade

Die Kaskade ist der Algorithmus, der bestimmt, welche CSS-Regeln auf Elemente angewendet werden, wenn mehrere widersprüchliche Regeln vorhanden sind. Es ist wichtig zu verstehen, wie die Kaskade funktioniert, um CSS zu schreiben, das sich wie erwartet verhält. Die Kaskade berücksichtigt mehrere Faktoren in der folgenden Reihenfolge:

• 1 Stylesheet-Ursprung
• 2 Inline-Stile
• 3 Selektorspezifität
• 4 Quellreihenfolge

Der Vollständigkeit halber können wir hinzufügen:

• 2.5 Stile, die in Ebenen definiert sind, lesen Sie mehr
• 3.5 Stile, die auf einen Teil des DOM beschränkt sind, lesen Sie mehr

Lassen Sie uns die Faktoren, die die Kaskade beeinflussen, in der Reihenfolge ihrer Priorität aufschlüsseln:

1. Stylesheet-Ursprung

CSS kann aus drei verschiedenen Quellen stammen:

• 1 User-Agent-Stile: Dies sind die Standardstile des Browsers. Jeder Browser verfügt über einen eigenen Satz an Standardstilen, weshalb unformatiertes HTML von Browser zu Browser leicht unterschiedlich aussehen kann.
• 2 Benutzerstile: Dies sind vom Benutzer festgelegte benutzerdefinierte Stile. Obwohl dies selten vorkommt, verfügen einige Benutzer möglicherweise über benutzerdefinierte Stylesheets, um Standardstile aus Gründen der Barrierefreiheit oder persönlicher Vorlieben zu überschreiben.
• 3 Autorenstile: Dies sind die Stile, die Sie als Webentwickler schreiben.

Im Allgemeinen haben Autorenstile Vorrang vor Benutzerstilen, die wiederum Benutzeragentenstile außer Kraft setzen. Dies ermöglicht es Entwicklern, das Erscheinungsbild von Elementen anzupassen und gleichzeitig bei Bedarf die Benutzerpräferenzen zu berücksichtigen.

2. Inline-Stile

Stile, die mithilfe des Stilattributs direkt auf ein Element angewendet werden, haben eine sehr hohe Priorität:

<p style="color: red;">This text will be red.</p>

Inline-Stile überschreiben alle Stile, die in externen Stylesheets oder