CSS-Kurzschreibweise

Diverse Angaben im Stylesheet können in der sogenannten Kurzschreibweise notiert werden. Dies sorgt nicht nur für kürzeren und somit übersichtlicheren Code, sondern entspricht auch den Empfehlungen des W3C.

font

Die am häufigsten gebrauchten Angaben, die man zur Schrift machen kann, sind folgende:

font-family: verdana, tahoma, sans-serif;
font-size: 1em;
font-weight: normal;

font-style: italic;
font-variant: small-caps;
line-height: 1.4em;

Sechs Zeilen Code also, die sich problemlos in einer einzigen zusammenfassen lassen:

font: italic small-caps normal 1em/1.4em verdana,tahoma,sans-serif;

Wichtig ist, dass du die Reihenfolge einhältst (ohne Kommata und mit einem Schrägstrich zwischen Schriftgröße und Zeilenhöhe):
font-style, font-variant, font-weight, font-size, line-height, font-family

Wenn du einzelne Angaben weglässt, wird für diese autoamtisch der default-Wert eingesetzt.

Beachte, dass die Angabe von Schriftgröße und Schriftart zwingend sind – diese beiden Werte musst du also jedesmal notieren.
Von daher macht es meiner Meinung nach keinen Sinn, die Kurzschreibweise für font zu verwenden, wenn man nur einen einzigen Wert wie etwa die Schriftgröße ändern möchte.

margin und padding

Mit margin und padding gibst du den Außen- bzw. Innenabstand eines Elements an. Hierbei kannst du diesen für oben, unten, rechts und links festlegen:

margin-top: 120px;
margin-right: 12px;
margin-bottom: 20px;
margin-left: 30px;

Hier kannst du nun die Notation verkürzen, indem du die vier Werte im Uhrzeigersinn angibst, beginnend mit dem oberen Abstand. Also: top right bottom left

margin:120px 12px 20px 30px;

Wenn alle vier Abstände gleich sind, gibst du nur einen einzigen Wert an.

Wenn der obere und untere bzw. der linke und rechte Abstand gleich sind, notierst du zwei Werte – der erste steht dabei für den Abstand nach oben und unten, der zweite für den nach links und rechts.

Sofern für eben und unten zwar verschiedene Abstände gelten, die links und rechts aber gleich sind, notierst du drei Werte – top left/right bottom.

Wenn allerdings die Abstände zur linken und rechten Seite verschieden und diejenigen nach oben und unten gleich sind, musst du alle vier Werte notieren.

(analog verhält es sich beim Padding)

Farben

Farbwerte werden als Hexadezimalwert notiert. Hierbei hast du sechs Stellen, bei denen jeweils ein Paar den Farben Rot, Grün und Blau entspricht. Wenn die beiden Zeichen in einem dieser Paare identisch sind, reicht es, wenn du nur eines davon angibst.

Schwarz entspricht zum Beispiel #000000. Hier lautet die Kurzschreibweise #000.
Analog verhält es sich mit Rot: #ff0000 wird zu #f00.

Farben, die keine gepaarten Werte aufweisen, lassen sich nicht in der Kurzschreibweise notieren.

border

Auch den Rahmen eines Elements kannst du für alle vier Seiten definieren.
Neben der jeweiligen Seite gibt man noch Rahmenfarbe, -dicke und -stil an.

border-style: solid;
border-width: 2px;
border-color: #000000;

… lässt sich verkürzen zu:

border: 2px solid #000;

Wenn an den verschiedenen Seiten nun unterschiedliche Farben, Breiten und Stile verwendet werden, dann notiert man dies am kürzesten so:

border-width: 2px 3px 4px 5px;
border-style: solid dashed dotted double;
border-color: #000 #adadad #ccc #f00;

Hintergrund

Zu guter Letzt schauen wir uns jetzt noch den Hintergrund eines Elements an.
Hier kann man nicht nur eine Farbe angeben, sondern auch eine Grafik. Diese kann nur einmal gezeigt werden, horizontal und/oder vertikal wiederholt werden.

Was in Langschreibweise so aussieht…:

background-color: #ffffff;
background-image: url(back.gif);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top left;
… kann man elegant wie folgt notieren:

background: #fff url(back.gif) fixed no-repeat top left;

verwandte Beiträge

Ein Gedanke zu “CSS-Kurzschreibweise

  1. Pingback: Fabian Letscher - Blog + Portfolio | WordPess, Blog, (X)HTML, CSS, Webdesign » Blog » CSS Komprimierer im Test

Hinterlasse eine Antwort

Deine E-Mail-Adresse wird nicht veröffentlicht.

Du kannst folgende HTML-Tags benutzen: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Abonnieren, ohne einen Kommentar zu hinterlassen