CSS-Kurzschreibweise

Auch in CSS besteht die Möglichkeit bestimmte Anweisungen zusammenzufassen und/oder sie verkürzt zu schreiben. Dies macht die Datei um einiges kleiner und übersichtlicher.

Gehen wir davon aus, daß für einen bestimmten Bereich folgende Angabe gemacht wurde:

div.rahmen {
border-style: solid;
border-width: 1px;
border-color: #000000;
}

Hierbei handelt sich um einen Bereich, der einen Rahmen zugewiesen bekommen hat. Es ist ein Standardrahmen (solid), der einen Pixel breit ist und schwarz eingefärbt ist. Und nun kommen wir zu der kurzen Schreibweise:

div.rahmen {
border: solid 1px #000;
}

Diese Anweisung hat die gleiche Wirkung. Denn die drei Angaben zum Rahmen wurden in einer Anweisung zusammengefaßt und zusätzlich wurde die Angabe zur Farbe verkürzt.

Aber Vorsicht, nicht jede Farbe läßt sich verkürzt ausgeben. Denn diese verkürzte Angabe von 3 Zahlen bezieht sich immer auf die Zahlenpaare. Die hexadezimalen Farbenangaben bestehen immer aus drei Zahlenpaaren. Die schwarze Farbe besteht aus 00 00 00 daher ist die Kurzschreibweise 000. Bei weißer Farbe ist die ‘normale’ Hexadezimalangabe: #fffff. Somit wäre die Kurzschreibweise #fff. Bei der Farbe z. B. #00ffff wäre die Kurzschreibweise #0ff und bei z. B. der Farbe #22ccdd wäre es #2cd.

Allerdings lassen sich Farben, die keine gepaarten Werte haben (z. B. #98FF30) nicht in Kurzschreibform schreiben. Soviel zu der Kurzschreibweise der Farbangaben.

Aber es lassen sich noch einige andere Anweisungen zusammenfassen:

p.abstand {
padding-top: 15px;
padding-right: 10px;
padding-bottom: 20px;
padding-left: 5px;
}

Dieser Bereich hat einige Angaben zum Innenabstand. Oben sind es 15 Pixel, rechts 10 Pixel, unten 20 Pixel und links 5 Pixel Abstand. Man könnte diese Anweisungen zusammenfassen:

p.abstand {
padding: 15px 10px 20px 5px;
}

Auch hier ist das Ergebnis das Gleiche. Aber man muß darauf achten, daß die Angaben immer nach folgendem Schema anzugeben sind: oben-rechts-unten-links.

Und weil es so schön war *g*, kommen wir zu noch einem Beispiel, das auf dem letzten aufbaut:

p.abstand {
padding-top: 15px;
padding-right: 0px;
padding-bottom: 15px;
padding-left: 0px;
}

In diesem Falle wäre die Abkürzung noch kürzer *g*:

p.abstand {
padding: 15px 0;
}

‘Hmmm, warum nur zwei Angaben?’ Könnte man fragen. Ganz einfach. Die erste Angabe umfaßt die Maße für oben und unten und die zweite Angabe für rechts und links. Und bei einem Wert der gleich Null ist, muß man keine Maßeinheit angeben.

Hier noch weitere Beispiele. Diese sind aus CSS-Rahmen:

Lang: <p style="border-width: 1px; border-style: solid; border-color: #000000;">Inhalt</p>
Kurz: <p style="border: 1px solid #000;">Inhalt</p>

Lang: <h1 style="border-bottom-width: 2px; border-bottom-style: dashed; border-bottom-color: #ff0000;">Inhalt</h1>
Kurz: <h1 style="border-bottom:2px dashed #f00;">Inhalt</h1>

Die Kurzschreibweise eignet sich hervorragend dafür wenn der Rahmen homogen ist. Wenn man z. B. auf allen vier Seiten verschiedenartige Rahmentypen angeben will, dann lässt sich die Kurzschreibweise nicht nach dem gleichen Muster tätigen, sondern so:

p.beispiel {
border-width: 2px 3px 4px 5px;
border-style: solid dashed dotted double;
border-color: #000 #adadad blue yellow;
}

Hierbei haben wir ein Bereich mit einem heterogenem Rahmen. Oben haben wir einen soliden, schwarzen Rahmen der 2 Pixel breit ist. Der rechte Rahmen ist gestrichelt, grau und ist 3 Pixel breit, der untere Rahmen ist gepunktet, blau und ist 4 Pixel breit. Der linke Rahmen ist gelb, doppelt und 5 Pixel breit.

Anmerkung: wenn mehrer Angaben zusammengefasst werden z. B. border: 2p 3px 4px 5px; dann geschieht das nach folgendem Schema: oben-rechts-unten-links.

Hier noch ein letztes Beispiel:

body {
background-color: #eeeeee;
background-image: url(bild.png);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top left;
color: #000000;
}

Kurzschreibweise:

body {
background: #eee url(bild.png) fixed no-repeat top left;
color: #000;
}

Wir arbeiten seit 20 Jahren mit WordPress und bieten diverse Dienst­leistungen rund um das System an. Kontaktiere uns für weitere Informationen oder für ein Angebot.

Verwandte Beiträge:

• Einfarbige Verläufe mit CSS
• CSS-Links: einheitliche Sende-Buttons, Spritepad, Sprechblasen, Flexbox statt Float
• CSS-Datei mit Dust-Me Selectors entrümpeln
• CSS: neue Methode um Text zu verbergen
• CSS: automatische Nummerierung von Überschriften