CSS - Kaskadierung - Besonderheiten
1. Die Kurzformen
... sorgen gerade bei Anfängern immer wieder für Verwirrungen, wenn es um das "Überschreiben" bestimmter Eigenschaften geht. Das Problem dabei ist, dass man unter Umständen bestimmte Werte komplett entfernen kann, auch wenn man das gar nicht will. Damit ihr später Irritationen eurerseits vermeiden könnt, schaut euch das hier genau an.
2. Ein Beispiel
So, wir haben den folgenden und zugegebenermaßen ziemlich pisseligen HTML-Code (ist nur ein Ausschnitt)
<div class="rahmen">
<p>Laber schwall</p>
<p class="format">Bla blubb</p>
</div>
... und formatieren nun die Absätze innerhalb des <div>-Elementes so:
div.rahmen p
{
font-size: 20px;
font-variant: small-caps;
font-weight: bold;
font-style: italic;
font-family: Verdana;
}
Hinweis die Einheit px sollte man für Schriftgrößen eigentlich nicht benutzen, ich mache es hier nur aus Faulheit.
3. Der Fehler
Jetzt wollen aber den Absätzen mit der Klasse format eine andere Größe und Schriftart verpassen. Aus lauter Tippfaulheit
wählen wir diesmal die Kurzform und ändern nur die beiden erwähnten Eigenschaften:
div.rahmen p.format
{
font: 14px Arial;
}
Und? Probiert es mal aus. Dann werdet ihr feststellen, dass ihr alle Eigenschaften der allgemeinen Deklaration geplättet habt.
Also die für font-variant, font-weight und font-style. Denn die gehören zur Kurzform von
font.
4. Das Problem
Wenn man die Kurzschreibweise anwendet, so werden zuerst alle Eigenschaften auf ihren Standardwert zurückgesetzt und erst danach die neu definierten angewendet. Passt also auf, wenn ihr damit arbeitet und gedenket meines Hinweises, wenn ihr später mal vor so einem Problem steht.
Der Geltungsbereich
... bezieht sich auf alle CSS-Werte, die man zusammenfassen kann. Wenn also etwas nicht so aussieht, wie ihr es erwartet, so überlegt zuerst, ob ihr mit der Kurzschreibweise gearbeitet habt. Dann erklärt sich vieles von selber.