Cascading Style Sheets oder CSS sind so eingerichtet, dass Sie viele Eigenschaften haben können, die dasselbe Element betreffen. Einige dieser Eigenschaften können miteinander in Konflikt stehen. Sie können beispielsweise eine rote Schriftfarbe für das Absatz-Tag und später eine blaue Schriftfarbe festlegen. Woher weiß der Browser, welche Farbe für die Absätze verwendet werden soll? Dies wird von der Kaskade entschieden.
Arten von Style Sheets
Es gibt drei verschiedene Arten von Stylesheets:
- Autor Style Sheets
- Dies sind Stylesheets, die vom Autor der Webseite erstellt wurden. Daran denken die meisten Menschen, wenn sie an CSS-Stylesheets denken.
- Benutzer-Style-Sheets
- Benutzer-Stylesheets werden vom Benutzer der Webseite festgelegt. Dadurch kann der Benutzer die Anzeige der Seiten besser steuern.
- Benutzeragent-Stylesheets
- Dies sind Stile, die der Webbrowser auf die Seite anwendet, um die Anzeige dieser Seite zu erleichtern. In XHTML zeigen die meisten visuellen Benutzeragenten beispielsweise das Tag an als kursiver Text. Dies ist im Stylesheet des Benutzeragenten definiert.
Eigenschaften, die in den obigen Stylesheets definiert sind, werden mit einem Gewicht versehen. Standardmäßig hat das Autor-Stylesheet die größte Gewichtung, gefolgt vom User-Stylesheet und schließlich vom User-Agent-Stylesheet. Die einzige Ausnahme ist die! Wichtige Regel in einem Benutzer-Stylesheet. Dies hat mehr Gewicht als das Stylesheet des Autors.
Kaskadierungsreihenfolge
Um Konflikte zu lösen, verwenden Webbrowser die folgende Sortierreihenfolge, um zu bestimmen, welcher Stil Vorrang hat und verwendet wird:
- Suchen Sie zunächst nach allen Deklarationen, die für das betreffende Element gelten, und nach dem zugewiesenen Medientyp.
- Dann schauen Sie sich an, aus welchem Stylesheet es kommt. Wie oben beschrieben, stehen zuerst die Stylesheets der Autoren, dann der Benutzer und dann der Benutzeragent. Mit! Wichtigen Benutzerstilen, die eine höhere Priorität haben als Autoren! - wichtigen Stilen.
- Je spezifischer ein Selektor ist, desto mehr Priorität wird er haben. Zum Beispiel hat ein Stil auf "div.co p" eine höhere Priorität als nur der Tag "p".
- Zum Schluss sortieren Sie die Regeln nach der Reihenfolge, in der sie definiert wurden. Regeln, die später in der Dokumentstruktur definiert werden, haben eine höhere Priorität als die zuvor definierten. Regeln aus einem importierten Stylesheet werden vor Regeln direkt im Stylesheet berücksichtigt.
