Grundlagen CSS
div und span
Sehr universell einsetzbar sind die sogenannten div- und span-Tags, da sie für sich alleine keine besondere Formatierung hervorrufen. Der einzige Unterschied zwischen den beiden "Tags" ist eigentlich nur der, dass ein span-Element ein sogenanntes Inline-Element ist, also keinen Zeilenumbruch bewirkt, ein div-Element hingegen als blockbildendes Element bezeichnet wird und einen Zeilenumbruch hervorruft.
Was ist denn hier mit "keine besondere Formatierung" gemeint? Nun, z.B. im Gegensatz zu einem h-tag, welches z.B. signalisiert: "Hier kommt eine überschrift" oder einem blockquote, wodurch ein Zitat eingeleitet wird und der folgende Absatz eingerückt dargestellt wird, bewirken ein div- und span-Tag - für sich alleine zunächst einmal gar nichts. Erst dann, wenn diesen Elementen Formateigenschaften mitgegeben werden, haben sie Einfluss auf das spätere Aussehen eines HTML-Dokumentes.
Pseudoformate
Kapitel 6
Was versteht man denn darunter? "Pseudoformate" gehören zu den Besonderheiten unter den Selektoren, da ihnen nur dann eine bestimmte Formatierung zugewiesen wird, wenn sie einen bestimmten Zustand haben. Klingt kompliziert, ist es aber nicht. Nehmen mir das Beispiel "Links":
Wir definieren einen Link, der ja bekanntlich verschiedene Zustände haben kann: "ungeklickt" (link), "mit der Maus berührt" (hover), "angeklickt" (active) oder "besucht" (visited). Jeder hat sicherlich auf verschiedenen Seiten schon gesehen, dass sich z.B. die Schriftfarbe - je nach Zustand eines Links - verändert. Manches Mal ändern sich auch weitere Eigenschaften, wie "unterstrichen" oder "kursiv"... da gibt es die verschiedensten Varianten.
Beispiel
(verschiedene Linkzustände)
In unserem Beispiel wollen wir einen Link - je nach Zustand, in vier unterschiedlichen Farben darstellen. Ausserdem soll er im hover-Zustand unterstrichen dargestellt werden.
Dazu verwenden wir in der CSS nachtehende Defition:
a:link { color:##FF6600; }
a:hover { color:#FFFF00; text-decoration:underline; }
a:active { color:#008800; }
a:visited { color:#0000FF; }
Hier wird der Link im Ursprungszustand in "orange" dargestellt. Beim Mouse-over wird er gelb und bekommt einen Unterstrich. Im Active-Zustand wird er grün und um ihn als "besucht" zu kennzeichnen, wechselt er letztendlich auf die Farbe "blau".
Zur Syntax: Ein Pseudoformat wird durch einen Doppelpunkt (:) vom Element getrennt.
Und DAS kommt dabei heraus:
Einfach mal ausprobieren...
Weitere Pseudoformate sind: first-letter (Formatiert den ersten Buchstaben eines Elements) und first-line (Formatiert die erste ZEILE eines Elements).
Das wars bis hierher erst einmal. Ab dem nächsten Kapitel steht dann die "Schriftformatierung" auf dem Programm.