Hauptmenü

Untermenü

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-size12px;
  font-weightbold;
}
...
<p>Hier käme jetzt schwarzerfetter 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;
}
...
<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 anwenden.


.fett
{
  color#000;
  font-size12px;
  font-weightbold;
}
.rot
{
  color#f00;
}
...
<class="fett rot">Hier käme jetzt roter(!), fetter Text</p>

Im Gegensatz zur Vererbung ist dabei die Reihenfolge der Anweisung von entscheidender Bedeutung! Ein


.rot
{
  color#f00;
}
.fett
{
  color#000;
  font-size12px;
  font-weightbold;
}
...
<class="fett rot">Hier käme jetzt kein(!) roter Text</p>

hätte bei der Schriftfarbe keinerlei Auswirkung. Warum? Nun zuerst weisen wir die Schriftfarbe Rot zu, und dann erst Schwarz. So wird in diesem Beispiel die Eigenschaft color: #f00; durch color: #000; überschrieben.

Wichtig

Die Zuweisung der Klassen spielt keine Rolle. Ein <p class="fett rot"> ergibt dasselbe wie <p class="rot fett">. Entscheidend ist die Reihenfolge der Definition.

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 */
{...}

/* 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.


.schwall {...};
.bla {...};
<!-- bla ist höher gewichtet als schwall -->
<div class="bla schwall">...</div>

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.

zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt