Overview
Die Vorlesung behandelt das Konzept der Kaskadierung (Cascading) in CSS und erklärt das Regelsystem zur Bestimmung, welcher Stil angewendet wird, wenn mehrere Stil-Anweisungen konkurrieren.
Einführung in die Kaskadierung
- Kaskadierende Stylesheets heißen so, weil konkurrierende CSS-Regeln durch ein festgelegtes Regelsystem ("Kaskadierung") priorisiert werden.
- Ziel ist es, zu bestimmen, welche Stilregel bei widersprüchlichen Angaben tatsächlich greift.
Problemstellung und Beispiel
- CSS-Vererbungsregeln führen zu Konflikten, wenn mehrere Regeln verschiedene Werte für dasselbe Element festlegen.
- Typische Beispiele beinhalten Regeln für body, Klassen (.klasse), IDs (#id) und kombinierte Selektoren.
- Die Reihenfolge ("später überschreibt früher") gilt nur bei gleichen Selektoren.
Das Kaskadierungs-Regelsystem
- Das Kaskadierungs-Regelsystem (Spezifität) ist das interne Gewichtungssystem von CSS.
- Spezifität entscheidet, welche Regel gewinnt, nicht einfach die letzte im CSS-Code.
- Es gibt vier Gewichtungsbereiche: Inline-Style, ID, Klasse/Attribut/Pseudoklasse, Typselektor.
Spezifität im Detail
- Inline-Stile (style-Attribut im Tag) haben das höchste Gewicht, werden aber selten verwendet.
- IDs sind spezifischer als Klassen und Typselektoren.
- Klassen (.klasse), Attributselektoren und Pseudoklassen sind spezifischer als Typselektoren (z.B. body, div).
- Typselektoren sind am unspezifischsten und überschrieben, sobald Klasse oder ID zutrifft.
Bestimmung der Spezifität
- Die Spezifität wird als vierstellige Zahl geschrieben: (Inline, ID, Klasse, Typ).
- Je höher und weiter links eine Zahl steht, desto spezifischer ist die Regel.
- Bei gleichen Selektoren zählt die Anzahl der jeweiligen Selektortypen innerhalb eines Selektors.
- Die höchste Spezifität erhält den Zuschlag für das Styling.
Anwendung im Beispiel
- Anhand einer Tabelle lässt sich die Spezifität der einzelnen Selektoren berechnen.
- In Konfliktfällen gewinnt der Selektor mit der höchsten Spezifität.
- Im Beispielfall erhält das Element mit zwei IDs und einem Typselektor die höchste Spezifität und bestimmt die Schriftfarbe.
Key Terms & Definitions
- Kaskadierung — Das Priorisierungssystem von CSS, das bei konkurrierenden Regeln entscheidet.
- Spezifität — Das Gewichtungssystem, das CSS-Regeln nach Selektortypen bewertet.
- Typselektor — Selektor, der ein HTML-Tag anspricht (z.B. body, p).
- Klassenselektor — Selektor, der auf das class-Attribut eines Elements abzielt (.klasse).
- ID-Selektor — Selektor, der auf das id-Attribut eines Elements abzielt (#id).
- Inline-Style — Stilregel, die direkt im HTML-Tag steht (style="...").
Action Items / Next Steps
- Beispiel im eigenen Code nachbauen und Spezifität verschiedener Regeln bestimmen.
- In Visual Studio Code die Anzeige der Spezifität eines Selektors ausprobieren.
- Nächstes Video ansehen, um praktische Anwendung und Tools zur Spezifitätsanalyse kennenzulernen.