Hauptmenü

Untermenü

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-width1px;
  border-stylesolid;
  border-color#f00;
}

kann man auch so schreiben:


.bla
{
  border1px 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
{
  bordersolid 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.


{ 
  fontbold 0.8em/120Courier; 
}

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