Welche CSS-Regel gewinnt?
CSS (Cascading Style Sheets) legt fest, wie die Elemente einer Seite aussehen: Farben, Schriften, Abstände. Wenn zwei Regeln einander widersprechen, entscheidet die Kaskade, welche gewinnt.
Auf dem Mensaplan soll jeder Absatz grün sein, der Allergenhinweis aber rot. Beide Regeln treffen den Hinweis. Sie müssen vorhersagen können, welche sich durchsetzt.
Am Ende dieser Lektion
Notiz
Ich kann vorhersagen, welche CSS-Regel sich durchsetzt.
Schlüsselwörter
| Begriff | Was er bedeutet | Beispiel |
|---|---|---|
| Selektor | der Teil einer Regel, der sagt, welche Elemente gemeint sind | .hinweis |
| Deklaration | eine Einstellung in einer Regel | color: red |
| Spezifität | wie genau ein Selektor ein Element trifft | |
| Kaskade | die Regeln, nach denen bei Widerspruch eine Regel gewinnt | |
| Vererbung | ein Element übernimmt eine Einstellung vom Elternelement |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Eine CSS-Regel hat einen Selektor und Deklarationen
Eine Regel besteht aus einem Selektor und geschweiften Klammern. Darin steht je Zeile eine Deklaration: eine Eigenschaft, ein Doppelpunkt, ein Wert und ein Semikolon.
In p { color: darkgreen; } wählt p alle Absätze, und color ist die Eigenschaft. Ein Selektor mit Punkt wie .hinweis wählt alle Elemente mit class="hinweis". Ein Selektor mit Raute wie #kopf wählt das Element mit dieser id.
Probieren Sie zwei Regeln aus
<h1>Mensaplan</h1>
<p>Linsensuppe, 2,80 €</p>
<p class="hinweis">Enthält Sellerie.</p>
Der genauere Selektor gewinnt
Trifft eine Regel das Element genauer, gewinnt sie. Dafür zählen wir vereinfacht Punkte: ein Elementname gibt 1 Punkt, eine Klasse 10 und eine id 100.
Mehr Punkte heißen mehr Spezifität. Die Reihenfolge der Regeln spielt dabei keine Rolle. Eine Regel für die id schlägt jede Regel für eine Klasse.
Ein Beispiel: ein Absatz und vier Regeln
| Selektor | Trifft? | Punkte | Farbe |
|---|---|---|---|
| `p` | ja | 1 | schwarz |
| `.hinweis` | ja | 10 | rot |
| `#allergene` | ja | 100 | blau |
| `.menue` | nein | - | grün |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Bei gleichen Punkten gewinnt die spätere Regel
Haben zwei Regeln gleich viele Punkte, gewinnt die, die weiter unten im Stylesheet steht. Man nennt das die Kaskade: Die Regeln laufen von oben nach unten durch, und die letzte gleichwertige bleibt.
Die Reihenfolge hilft also nur bei Gleichstand. Gegen eine genauere Regel hilft sie nie.
Welche Farbe sehen Sie?
<p class="hinweis" id="allergene">Enthält Sellerie.</p>
Manche Einstellungen erben die Kinder
Ein Element übernimmt einige Eigenschaften von seinem Elternelement. Das nennt man Vererbung. Setzen Sie color für body, erben alle Elemente darin die Farbe.
Nicht alles wird vererbt. Abstände und Rahmen gelten nur für das Element, bei dem sie stehen.
Ein Beispiel: vererbt oder nicht
| Eigenschaft | Wird vererbt? | Warum |
|---|---|---|
| `color` | ja | Text soll überall gleich aussehen |
| `font-family` | ja | Eine Schrift gilt für die ganze Seite |
| `margin` | nein | Ein Abstand gehört zu einer Box |
| `border` | nein | Ein Rahmen gehört zu einer Box |
Die Zellen, die Lernende ausfüllen, bleiben in dieser Vorschau leer.
Das Lab zählt die Regeln einer echten Seite
Die Seite des Labs hat ein Stylesheet, site/style.css. Das Skript liest es und zählt Regeln und Deklarationen.
Die Ausgabe hat englische Wörter: declarations in vor jedem Selektor, dann rules:, declarations: und most used:. Achten Sie auf body und body.dark: Der zweite Selektor hat mehr Punkte.
Die Regeln des Stylesheets zählen
docker exec jupyter python3 steps/css.pyHier angezeigt, nicht ausgeführt. Erstellen Sie ein kostenloses Konto, um „Ausführen“ zu drücken und ihn im Terminal Ihres eigenen Labs einzugeben.
Ein häufiger Fehler
Warnung
Viele glauben, die Regel weiter unten gewinnt immer. Die Reihenfolge entscheidet nur bei gleicher Spezifität. Eine genauere Regel gewinnt auch dann, wenn sie weiter oben steht.