Css/kurs - kronn.de

CSS: Kurzschreibweisen für Rahmen und Abstände

Stenographie Teil II

Im sechsten Teil dieses kleinen CSS-Kurses habe ich Rahmenlinien und Abstände näher betrachtet. Genauso wie es für die Schrift- bzw- Hintergrundeigenschaften eine Kurzschreibweise gibt, gibt es auch dafür eine abgekürzte Form.

kleiner Abstand

Für Abstände, also Polsterung/Innenabstand (padding) und Rand/Außenabstand (margin) gilt die gleiche Syntax. Die Werte werden einfach durch Leerzeichen getrennt hintereinander geschrieben, nur die Reihenfolge ist wichtig. Bevor man lange überlegen muss, ist die Lösung aber schon längst da: Die Werte werden im Uhrzeigersinn, beginnend oben, angegeben. Das Beispiel h1 { margin-top:0px; margin-right:15px; margin-bottom:10px; margin-left:15px; } sähe also kurzgeschrieben so aus: h1 { margin:0px 15px 10px 15px; }

Wenn die Werte für die seitlichen und oberen/unteren Abstände gleich sind, kann man noch einen Schritt weiter gehen, in dem man statt h2 { padding:10px 20px 10px 20px; } einfach h2 { padding:10px 20px; } definiert. Zuerst werden die vertikalen, danach die horizontalen Werte genannt.

Will man für alle Seiten den gleichen Abstand haben, so muss man diesen nur einmal schreiben. Bei drei Angaben gilt der erste für oben, der zweite für die Seiten (also links und rechts) und der letzte für unten.

kleiner Rahmen

Bei Rahmenlinien ist die Kurzschreibweise etwas komplexer, da zum einen mehrere Eigenschaften zusammengefasst werden, zum anderen verschiedene Richtungen angesprochen werden können. Zur besseren Übersicht: Rahmen haben die Eigenschaften border-width, border-color und border-style. Die Richtung wird dabei in der Mitte eingefügt, also z. B. border-top-color für die Farbe der oberen Rahmenlinie.

Als einfaches Beispiel definieren wir einfach mal - in Kurzform - eine Rahmenlinie (unten) für eie Überschrift: h2 { border-bottom:2px solid #009900; } Diese Zuweisung versieht unsere Überschrift mit einem Rahmen, der unten, durchgezogen, 2 Pixel breit und in einem schönen dunkelgrün gehalten ist.

Solange wir nur für eine Seite Werte angeben, ist die Reihenfolge der durch Leerzeichen getrennten Werte egal. Wenn wir aber die gleichen Werte mehreren Seiten zuweisen, ist der bereits oben genannten Uhrzeigersinn, beginnend oben, wichtig. Um also die Rahmenlinienbreite für alle Seiten in der Kurzform zu schreiben, geben wir in unserem Stylesheet das folgende an: h2 { border-width:1px 2px 2px 1px; }

Ihr ahnt die Beschränkung für Rahmen-Kurzschreibweisen sicherlich schon: Es ist nicht möglich (in der derzeitigen Version von CSS), unterschiedliche Eigenschaften und Richtungen zu kombinieren. Es ist also ein reines Glückspiel, zu schreiben: h5 { border:1px 2px solid dotted #0000cc;} Nach meiner Erfahrung klappt das nicht. Man kann also entweder die Seiten einer Rahmeneigeschaft zusammenfassen oder die Eigenschaften einer Seite.

Ausblick

In der nächsten Ausgabe behandele ich noch ein paar weitere typographische Feinheiten, die uns wiedermal zeigen, wie viele Möglichkeiten es gibt, mit CSS Texte zu gestalten.

Relevante und genannte URLs

CSS-Kurs Teil 6: Abstände, näher betrachtet (Rahmen und Abstände)