CSS - Kaskadierung - Gewichtung
1. Einfache Gewichtung
Einfach ausgedrückt bedeutet Gewichtung das Gegenteil von Vererbung. Das können wir auch im richtigen Leben beobachten. Sehr oft entwickeln Kinder Eigenschaften oder Neigungen, die sie definitiv nicht von ihren Eltern haben. Ich selbst weiß gar nicht mehr, wie oft ich die verzweifelte Frage meines Vaters an meine Mutter mit anhören musste:
"Mein Gott, von wem hat der Junge das bloß? Also von mir nicht!" [Quelle: Ausgewählte Zitate meines Vaters]
Dieses "evolutionäre" Prinzip lässt sich auch auf Cascading Style Sheets übertragen. Dabei kann man Kind-Elementen Eigenschaften zuweisen, die bereits Vererbte überschreiben. Ein kleines Beispiel soll das mal demonstrieren. Nehmen wir mal an, wir haben unsere Absätze folgendermaßen formatiert
p
{
color: #000;
font-size: 12px;
font-weight: bold;
}
...
<p>Hier käme jetzt schwarzer, fetter Text</p>
So, jetzt muss an bestimmten Stellen dieser Absatz eine rote Schrift haben. Erinnert ihr euch an die Beispiele bei der
Vererbung? Da haben wir mit einer zusätzlichen Klasse einem Element weitere Eigenschaften hinzugefügt.
Jetzt aber wollen wir eine Eigenschaft ändern. Also machen wir folgendes. Wir definieren eine Klasse und nennen sie mal
.rot (auch wenn man das nicht tun sollte) und weisen sie zusätzlich dem Absatz zu.
.rot
{
color: #f00;
}
...
<p class="rot">Hier käme jetzt roter(!), fetter Text</p>
Hier wird die ursprüngliche Eigenschaft (color: #000) durch eine neue (color: #f00;) ersetzt bzw.
überschrieben.
2. Erweiterte Gewichtung
Man kann dieses Beispiel auch auf Mehrfach-Klassen (oder IDs) anwenden.
.fett
{
color: #000;
font-size: 12px;
font-weight: bold;
}
.rot
{
color: #f00;
}
...
<p class="fett rot">Hier käme jetzt roter(!), fetter Text</p>
Im Gegensatz zur Vererbung ist dabei die Reihenfolge der Zuweisung von entscheidender Bedeutung! Ein:
<p class="rot fett">Hier käme jetzt kein(!) roter, fetter Text</p>
hätte bei der Schriftfarbe keinerlei Auswirkung. Warum? Nun zuerst weisen wir die Schriftfarbe rot zu, und dann erst die
Schriftfarbe schwarz. So wird in diesem Beispiel die Eigenschaft color: #f00; durch color: #000;
überschrieben.
3. Gewichtungsregeln
Im Gegensatz zur Vererbung, wo wir Stück für Stück zusätzliche Eigenschaften hinzufügen, muss man bei der Gewichtung auf einige Dinge achten. So und jetzt wird es kompliziert. Es gibt Regeln für die Art und Weise der Zuweisung, die zum Teil widersprüchlich wirken. Ich habe diese Prinzipien mal in verschiedenen Regeln zusammengefasst, ob sie nun offiziell sind oder nicht. Dabei gilt, dass Anweisungen mit höherer Gewichtung Eigenschaften mit niedriger Gewichtung überschreiben.
§1 Einbindungsregeln
Absatz 1
StyleSheet-Anweisungen, die in einer separaten Datei eingebunden sind, haben dieselbe Gewichtung wie Anweisungen,
die im Kopf einer Datei definiert wurden. Hier entscheidet die Reihenfolge.
Absatz 2
Beide Varianten haben eine geringere Gewichtung als Anweisungen innerhalb einer style-Anweisung.
/* niedrige Gewichtung */
<link rel="stylesheet" href="styles.css" type="text/css">
/* niedrige Gewichtung */
<style type="text/css">...</style>
/* höchste Gewichtung */
<p style="...">...</p>
§2 Selektor-Regeln
Absatz 1
StyleSheet-Anweisungen, die über ein HTML-Tag definiert wurden, haben eine geringere Gewichtung als Anweisungen, die in
einer Klasse definiert wurden.
Absatz 2
StyleSheet-Anweisungen, die in einer Klasse definiert wurden, haben eine geringere Gewichtung als Anweisungen, die über
eine ID definiert wurden.
Absatz 3
StyleSheet-Anweisungen, die über eine ID definiert wurden, haben eine geringere Gewichtung als Anweisungen, die über das
style-Attribut definiert wurden.
/* geringste Gewichtung */
p {...}
/* höher gewichtet als p */
.blubb {...}
/* höher gewichtet als .blubb */
#blubber {...}
/* höchste Gewichtung */
<p style="...";>
§3 Reihenfolge-Regeln
Absatz 1
Haben zwei Elemente dieselbe Gewichtung, so gewinnt, die, die zuletzt aufgeführt wurde.
.bla {...};
.schwall {...};
<!-- schwall ist höher gewichtet als bla -->
<div class="schwall bla">...</div>
Manchmal kann es zu "Kollisionen" bei diesen Regeln kommen, natürlich nur im Internet Explorer 6. Das umgeht man durch sauberen Code, also.
<!-- Erst -->
<link rel="stylesheet" href="styles.css" type="text/css">
<!-- dann -->
<style type="text/css">...</style>
<!-- und danach in dieser Reihenfolge -->
<p class="blubb" id="blubber" style="...">
4. Ein Hinweis
Ach ja, wenn ihr euch mit obigen Regeln vertraut gemacht habt und über ein wenig Erfahrung verfügt, solltet ihr euch mal über echte Kaskadierung und die so genannte Spezifität informieren. Aber nicht vorher.