CSS - Grundlagen - Kurzformen
1. Das Prinzip
Für die Schreibfaulen bietet CSS auch kurze Schreibweisen an. Dabei werden verschiedene Eigenschaften über bestimmte Regeln gebündelt. Dazu mal ein einfaches Beispiel. Die CSS-Definition
.bla
{
border-width: 1px;
border-style: solid;
border-color: #f00;
}
kann man auch so schreiben:
.bla
{
border: 1px solid #ff0;
}
Damit fasst man also die drei Rahmeneigenschaften width
, style
und color
zu einer Einheit
zusammen. Allerdings muss man da auf ein paar Dinge achten.
Ganz wichtig!
Bei den Kurzformen muss man sehr vorsichtig sein, denn bei denen gibt es ein besonderes Verhalten. Darauf gehe ich später bei der Kaskadierung ein. Behaltet das aber schon mal im Hinterkopf.
2. Die Regeln
Hier gibt es deren zwei, die ein wenig seltsam wirken. Darum bringe ich euch mal zu Gehör.
Die Regeln
§1 Die Reihenfolge
Laut Spezifikation gibt es eine Art von "Rangliste", an die man sich halten muss. Die ist für verschiedene (nicht alle) Eigenschaften vorgegeben, bei der eine Kurzform möglich ist. SelfHTML nennt das "die Zusammenfassung fakultativer Einzelangaben". Tja, man kann tatsächlich einfache Dinge kompliziert ausdrücken. Beim Abschnitt Elemente werde ich dann ausdrücklich darauf hinweisen.
§2 Die Werte
Wenn die möglichen Angaben zu den Werten eindeutig(!) sind und es zu keinen Überschneidungen kommen kann, ist die Reihenfolge völlig lattens. So hätte man obiges Beispiel auch so schreiben können
.bla
{
border: solid 1px #ff0;
}
3. Zwei Besonderheiten
Die Anzahl der Angaben
Die Kurzform font
zum Beispiel ist eine Zusammenfassung von 6 unterschiedlichen Eigenschaften. Allerdings muss man nicht
alle angeben, sondern nur die, zu denen man laut Spezifikation verpflichtet ist. Um welche es handelt, werde ich euch jeweils beim
Abschnitt Elemente zeigen.
Gleiche Maßeinheiten
Wenn bei der Zusammenfassung unterschiedlicher Werte numerische Einheiten benutzt werden können, so muss man auf etwas achten. Sie werden dann durch einen Schrägstrich voneinander getrennt.
p
{
font: bold 0.8em/120% Courier;
}
In diesem Fall handelt es sich beim 0.8em/120%
um die Eigenschaften font-size
und line-height
.
Warum jetzt nun Letzteres zu font
gehört, da müsst ihr die Götter vom W3C fragen. Wichtig ist aber, dass bei beiden
numerischen Angaben gemacht werden können. Und damit die Browser die auseinander halten können, müssen sie durch besagten Schrägstrich
getrennt werden.
zurück zum vorherigen Abschnitt weiter zum nächsten Abschnitt