Css/kurs - kronn.de

CSS: Stenographie für CSS

Man muß beachten, daß eine lange und eine kurze Rede auf dasselbe herauskommen.

Epikur von Samos, griechischer Philosoph (341 - 271 v. Chr.)

Vorbereitung

Bevor wir uns mit den Kurzschreibweisen befassen, möchte ich eine weitere, sehr wichtige Sache ansprechen: Pseudoklassen. Von Klassen haben wir schon gelesen, im HTML wird das class-Attribut dem jeweiligen Tag hinzugefügt (z. B. <p class="wichtig">) und im CSS können wir diese Klasse dann speziell ansprechen (p.wichtig { color:red; }).

Speziell für Hyperlinks gibt es aber noch eine kleine Erweiterung, die sogenannten Pseudoklassen. Damit lässt sich das Aussehen bei bestimmten Bedingungen definieren. So kann man beispielsweise festlegen, wie der Linktext aussieht, wenn man mit der Maus drüberfährt, oder wie ein bereits besuchter Link aussehen soll.

Die Reihenfolge der Pseudoklassen im Stylesheet ist außerordentlich wichtig. Aber bevor wir zu dieser Reihenfolge kommen, nenne und erläutere ich diese eben kurz. Für die Praxis haben sind vor allem die folgenden vier Pseudoklassen relevant: a:link a:visited a:hover a:active

Hier wurden sie schon in der richtigen Reihenfolge genannt. Die Erklärung, warum das so ist, ist eigentlich ganz einfach. Der Browser geht die einzelnen CSS-Definitionen der Reihe nach durch und muss entscheiden, welche jeweils angewendet wird. Da nun die obigen Pseudoklassen alle auf das Element <a> angewendet werden sollen und ansonsten gleichwertig sind, ist die Reihenfolge entscheidend. Um Eric Meyer zu zitieren:

Die folgenden styles haben alle die gleiche Wichtigkeit.
a:link {color: blue;} a:active {color: red;} a:hover {color: magenta;} a:visited {color: purple;}
Alle können auf einen Hyperlink zutreffen, und in einigen Fällen treffen auch mehrere zu. Beispielsweise kann ein unbesuchter Link (a:link) gehovert, also die Maus darübergezogen, werden (a:hover) und dann auch noch aktiviert werden (a:active), trotzdem ist es noch ein unbesuchter Link. Weil drei der obigen Regeln auf den Link zutreffen und alle gleichwertig sind, wird der letzte für die Darstellung ausgewählt. Deshalb wird der a:active-style niemals angezeigt werden, weil er stets von a:hover überschrieben wird. Nehmen wir an, dass ein Link bereits besucht wurde (a:visited). Er wird für immer und ewig "purple" sein, weil die "visited"-Regel jeden anderen Status überschreibt, inclusive :active und :hover.
[Deshalb ist die eingangs genannten Reihenfolge die Empfohlene]

Die ersten beiden können eigentlich in beliebiger Reihenfolge genannte werden, da ein Link niemals besucht und unbesucht zugleich sein kann. (:link bedeutet "unvisited", also unbesucht; und nein, Ich weiß nicht, warum sie es nicht so genannt haben.)

Abschließend möchte ich noch sagen, dass diese Pseudoklassen im Prinzip auf jedes HTML-Tag angewendet werden können. In der harten Browserrealität wird es nur für Links, also <a href=""> flächendeckend unterstützt.

Kurzschreibweisen

Für viele CSS-Eigenschaften gibt es Kurzschreibweisen, die bei eine Menge Tipparbeit ersparen, genauso gut vom Browser verstanden werden und ganz nebenbei die Dateigröße bei konsquenter Anwendung erheblich reduzieren.

In dieser Ausgabe will ich vor allem auf die Kurzschreibweisen für Text- und Hintergrundeigenschaften eingehen.

Kurzer Text

Es gibt eine ganze Menge font-Eigenschaften:

font-family
font-style
font-variant
font-size
font-weight
line-height

Außer der Eigenschaft line-height sind uns alle bekannt oder sollten es bis hierhin sein. Wer jetzt nicht in den alten Beiträgen suchen will, dem empfehle ich die folgenden Artikel:

Teil 3: font-family und -size
Teil 6: font-variant, -style und -weight

Aber zurück in die Gegenwart: line-height bezeichnet die Zeilenhöhe, das ist so naheliegend, dass ihr es natürlich schon vermutet habt. Es ist also außerordentlich sinnvoll, einen Wert dafür anzugeben, der größer als die aktuelle Schriftgröße ist. Am einfachsten finde ich, die Zeilenhöhe deshalb gleich relativ zur Schriftgröße anzugeben. Die passende Einheit sind ems. Wenn ich also meine Textabsätze mit doppelter Zeilenhöhe anzeigen lassen will, muss ich das folgende im Stylesheet angeben: p { line-height:2em; }

Ich persönlich finde eine Zeilenhöhe von 1.2em bis 1.4em angenehm, da der Text etwas aufgelockert wird. Letztlich ist das aber mein persönlicher Geschmack, probiert also am besten selbst aus, was für euch passend erscheint.

Die Kurzschreibweise für die verschiedenen font-Eigenschaften ist angenehm einfach: die Einzeleigenschaften werden einfach in beliebiger Reihenfolge, nur durch ein Leerzeichen getrennt, hintereinander geschrieben. Als Beispiel hier eine Absatzdefinitionp { font:Verdana italic 13px bold small-caps; }

Die Zeilenhöhe wird dabei direkt hinter die Schriftgröße geschrieben, getrennt durch einen Schrägstrich, also zum Beispiel so: h3 { font:Verdana 16px/2em bold;}

Man sollte aber auf jeden Fall testen, ob die Zielbrowser das auch richtig verstehen, da es manchmal zu Fehlinterpretationen kommen kann. Im Zweifelsfall schreibt man die kritische Eigenschaft eben nicht in die "Sammeldefinition", sondern wieder einzeln.

Kurzer Hintergrund

Ähnlich der Schrifteigenschaften kann man auch die Hintergrundeigenschaften gesammelt angeben. Hier werden die folgenden Eigenschaften zusammengefasst:

background-color
background-image
background-repeat
background-position
background-attachment

Wieder einmal sind uns alle Eigenschaften bereits bekannt, wieder einmal mit einer Ausnahme. Die Ausnahme ist background-attachment. Die anderen Eigenschaften habe ich bereits erwähnt, und zwar in den folgenden Teilen des CSS-Kurses:

Teil 4: background-color
Teil 5: background-image, -position und -repeat

background-attachment dient dazu,das Scroll-Verhalten der Hintergrundgrafik festzulegen. Es gibt zwei Werte dafür: scroll, welches die Voreinstellung ist und dazuführt, dass die Hintergrundgrafik mit der Seite mitscrollt. fixed sagt dem Browser, dass das Hintergrundbild stehenbleiben soll. Damit kann man z. B. einen Wasserzeichen-Effekt erzielen. Man könnte auch ein Firmenlogo oben links im Bildschirm (als Hintergrundgrafik positionieren und den linken Rand so wählen, dass der Text nicht unter dem Logo verschwindet. Ist das Logo nun fixiert, bleibt es immer im Browserfenster sichtbar.

Die eigentliche Kurzschreibweise ist genauso unspektakulär wie das Pendant für Schriftendefinitionen. Die einzelnen Werte werden in beliebiger Reihenfolge, jeweils durch ein Leerzeichen getrennt, hinter das einleitende background geschrieben. In der Praxis sieht das dann zum Beispiel so aus: body { background:white url(../img/hintergrund.png) fixed repeat top left; }

Ausblick

In der nächsten Ausgabe gehe ich auf die verkürzten Varianten von Rahmen- und Abstandseingeschaften ein.

Relevante und genannte URLs

Eric Meyer: Vorrang von Pseudoklassen
CSS-Kurs Teil 3: font-family und -size
CSS-Kurs Teil 4: background-color
CSS-Kurs Teil 5: background-image, -position und -repeat
CSS-Kurs Teil 6: font-variant, -style und -weight