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 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:
Der Vollständigkeit halber können wir hinzufügen:
Lassen Sie uns die Faktoren, die die Kaskade beeinflussen, in der Reihenfolge ihrer Priorität aufschlüsseln:
CSS kann aus drei verschiedenen Quellen stammen:
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.
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