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;… kann man elegant wie folgt notieren:
background-image: url(back.gif);
background-attachment: fixed;
background-repeat: no-repeat;
background-position: top left;
background: #fff url(back.gif) fixed no-repeat top left;







neontrauma, 23 Jahre alt, Studentin und freiberufliche Webdesignerin, liebt Coding & Fotografie und wohnt in Leverkusen.
[...] effizient ist es die Kurzschreibweise zu benutzen. Da spart man sich sehr viel Tipparbeit und es spart Platz. Dies funktioniert mit [...]