CSS Merkhilfen: Shorthand Notations, Link, Hover, Active

Als CSS Anfänger, aber auch als alter Hase, der vielleicht nicht ständig selber CSS Stile schreibt, stolpert man immer wieder über die korrekte Schreibweise. Darunter fällt auch die richtige Reihenfolge – insbesondere bei CSS Shorthand Notations oder Pseudo Klassen. CSS Shorthand Notations sind verkürzte Schreibweisen von CSS Stilen, um mehrere CSS Attribute gleichzeitig zu definieren. So wird zum Beispiel aus…

background-color: white;
background-image:url(bild.jpg);
background-repeat: no-repeat;
background-position: center top;

… diese Kurzschreibweise:

 background:white url(bild.jpg) no-repeat center-top;

Die Reihenfolge der Eigenschaften ist in vielen Fällen irrelevant – in einigen jedoch zu beachten. Es folgt eine Übersicht der wichtigsten CSS Eigenschaften und der korrekten Definition, sowie Hilfen zum merken.

Box Model

Das CSS Box Model (margin, border, padding) definiert die Abstände und damit auch die endgültige Größe einer Box. Alle 3 Eigenschaften können für alle 4 Seiten der Box einzeln oder mit der entsprechenden Shorthand Notation  geschrieben werden.

Margin (Außenabstand) volle Schreibweise:

margin-top: 10px;
margin-right: 20px;
margin-bottom: 30px;
margin-left: 40px;

Kurzschreibweise:

 margin: 10px 20px 30px 40px;

Padding (Innenabstand) volle Schreibweise:

padding-top: 10px;
padding-right: 20px;
padding-bottom: 30px;
padding-left: 40px;

Kurzschreibweise:

 padding: 10px 20px 30px 40px;

Die richtige Reihenfolge in der Kurzschreibweise

 Die Reihenfolge der Definition der einzelnen Seiten ist in der vollen Schreibweise ist unwichtig. In der Kurzschreibweise werden die Werte nur aneinander gereiht, daher ist die Reihenfolge genau zu beachten. Es gilt:

Eigenschaft: top – right – bottom – left

Die Reihenfolge enspricht also dem Uhrzeigersinn: 0 Uhr, 3 Uhr, 6 Uhr, 9 Uhr

Wem das noch nicht reicht, kann sich auch folgenden Satz merken:

Trübe – Räume – Brauchen – Licht

Border (Rahmen)
Die Breite des Rahmen (border-width) und auch alle anderen border Eigenschaften (border-style, border-color) können genauso wie margin und padding jeweils für eine Seite oder verkürzt für alle Seiten geschrieben werden.

Volle Schreibweise:

border-width-top: 1px;
border-width-right: 2px;
border-width-bottom: 3px;
border-width-left: 4px;

Kurzschreibweise:

border-width: 1px 2px 3px 4px;

Hier gilt dem entsprechend auch die Reihenfolge für die Kurzschreibweise:
top – right – bottom – left

Andere Eigenschaften mit top, right, bottom, left

Die Reihenfolgen der Seiten bei einer CSS Shorthand Notation gilt neben Abstandsdefinitonen im Box-Modell auch für andere Eigenschaften, die für jede Seite einzelnd definiert werden können. Beispielhaft sind die anderen border Eigenschaften (border-style, border-color). Volle Schreibweise:

border-color-top: red;
border-color-right: blue;
border-color-bottom: yellow;
border-color-left: green;

Kurzschreibweise:

border-color: red blue yellow green;

1,2 oder 3 Werte

Werden nicht alle vier Seiten in einer Shorthand Notation definiert gelten folgende Regeln:

• Ein Wert: margin: 10px [alle Seiten]
• Zwei Werte: margin: 10px [top + bottom], 20px [right + left]
• Drei Werte: margin: 10px [top] 20px [right + left] 30px [bottom]

background

 Die background-position Eigenschaft akzeptiert zwei Werte für die Position eines Hintergrundbildes.

background-position: left top;

Dabei gibt der erste Wert die Position auf der X-Achse und der zweite Wert die Position auf der Y-Achse. Merken kann man sich die Reihenfolge auch so:

Der Wert der X-Achse steht vor der Wert der Y-Achse,
genauso wie X vor Y im Alphabet steht.

background Shorthand Notation

In der background Eigenschaft werden alle Hintergrund Eigenschaften zusammengefasst: background-color, background-image , background-repeat , background-attachment , background-position. Beispiel:

background:
    black [color]
    url(bild.jpg) [image]
    no-repeat [repeat]
    scroll [attachment]
    10px 20px [position]
;

Die Reihenfolge der Eigenschaft ist nicht wichtig, aber für die Definition der Hintergrund Position gilt genauso: Position auf der X-Achse, dann Position auf der Y-Achse.

Beispiel: background: url(bild.jpg) 10px [x] 20px [y] ;

Font Eigenschaft

Mit der font Eigenschaft können alle Schrift Definitionen (font-size, font-style, font-family, etc.) zusammgefasst werden. Wichtig: Die Reihenfolge der Definitionen ist von Bedeutung:

font:
    italic [font-style]
    small-caps [font-variant]
    bold [font-weight]
    12px / 120% [font-size / line-height]
    Verdana, sans-serif [font-family]
;

Auch wenn die Reihenfolge wichtig ist, können Definitionen weg gelassen werden. Diese werden dann auf die Standardwerte gesetzt.

Link, Visited, Hover, Active – Pseudo Klassen

Mit den Link Pseudo Klassen werden die Stile für die möglichen Zustände eines Links (oder anderer Elemente) definiert. Die Reihenfolge, in der die Pseudo Klassen bentutzt werden, spielt eine Rolle und ist ein ganz typischer Fehler.

Die richtige Reihenfolge für :link, visited, :hover und :active ist:

1. a:link { color: red }
2. a:visited { color: blue }
3. a:hover { color: yellow }
4. a:active { color: lime }

Um sich die Reihenfolge besser merken zu können kann man folgende Merkhilfen zu Rate ziehen:

• link, visited, hover, active: Listige Vögel Heben Ab!
• link, visited, hover, active: LoVe, HaTe

Die Reihenfolge ist in diesem Fall wichtig, weil ein HTML Element gleichzeitig mehrere Zustände haben kann. Ein Link kann sowohl bereits besucht (visited) als auch gerade aktiv (active) sein. Die Spezifität der Pseudo Klassen ist jedoch gleich gewichtet, daher müssen die Stile durch die Reihenfolge im CSS Code gewichtet werden.

— by David