anzugeben, kann man auf diese Weise sehr schön kombinieren. Mit
erreichen Sie also, dass der Elementinhalt des so ausgezeichneten
blockquote
-Elements die Formateigenschaften von
.lichtblau
und
.fett
erhält.
13.2.12 Formate für Elemente mit id-Attribut
So wie Sie Formate für Klassen definieren können, die in HTML ein globales Attribut
class
haben, können Sie auch Formate für Elemente definieren, die ein
id
-Attribut haben. Da
id
-Namen dokumentweit eindeutig sein müssen, ist ein bestimmtes Element auf diese Weise ohne Umwege direkt für Selektoren adressierbar.
Beispiel
#roterBereich {
position:absolute;
top:130px;
left:30px;
width:320px;
padding:10px;
margin:0px;
border:4px solid #EE0000;
}
div#blauerBereich {
position:absolute;
top:130px;
left:400px;
width:320px;
padding:10px;
margin:0px;
border:4px solid #0000EE;
}
Erläuterung
In dem Beispiel werden zwei Formate für Elemente mit
id
-Attributen definiert, nämlich für HTML-Elemente mit
id="roterBereich"
und
id="blauerBereich"
. Charakteristisch ist in diesem Fall beim Selektor das Gatterzeichen
#
, unmittelbar gefolgt vom
id
-Namen. Ebenso wie bei Elementen für Klassen können Sie dabei einen bestimmten Elementnamen erzwingen, wie im Beispiel
div#blauerBereich
, oder den Elementtyp offen lassen, wie im Beispiel
#roterBereich
. Der Unterschied ist, dass das Format mit dem Selektor
div#blauerBereich
nur auf
angewendet wird, nicht aber auf
. Das Format des Selektors
#roterBereich
ist dagegen sowohl auf
als auch auf
anwendbar.
13.2.13 Formate für »Pseudo-Elemente und Pseudo-Klassen«
Unter Pseudo-Elementen werden hier HTML-Elemente verstanden, die im HTML-Quelltext keinen eigenen Niederschlag finden, aber durchaus einen wichtigen, wahrnehmbaren Zustand eines Elementinhalts bedeuten. Bestes Beispiel sind Links zu bereits besuchten Inhalten und Links zu noch nicht besuchten Inhalten. Beide werden in HTML mit
…
markiert. Doch Browser stellen Links, sofern nichts anderes für sie angegeben ist, in unterschiedlichen Farben dar – abhängig davon, ob sich das Linkziel schon in der Browser-History befindet oder nicht. In CSS können Sie solche »nicht tatsächlich vorhandenen« Elemente mit Hilfe von Selektoren ansprechen. Auch für unmarkierte Textstellen wie »erstes Zeichen eines Absatzes« oder »erste Zeile eines Absatzes« gibt es Selektoren.
Beispiel
a { font-weight:bold; }
a:link {
color: #EE0000;
text-decoration: none;
}
a:visited {
color: #EEAAAA;
text-decoration: none;
}
a:hover {
color: #EE0000;
text-decoration: underline;
}
a:active {
color: #0000EE;
text-decoration: underline;
}
Erläuterung
Notieren Sie zuerst das betroffene HTML-Element, im Beispiel das
a
-Element für Hyperlinks. Dahinter folgt ein Doppelpunkt und dahinter eine erlaubte Angabe, im Beispiel etwa
link
(für noch nicht besuchte Verweisziele),
visited
(für bereits besuchte Verweisziele),
hover
(für Verweise, während der Anwender mit der Maus darüber fährt) und
active
(für angeklickte Verweise). Beachten Sie, dass dies keine frei wählbaren Namen sind, sondern feste Schlüsselwörter, und dass auch die Reihenfolge von Bedeutung ist, da später notierte Angaben die zuvor notierten überschreiben.
Das obige Beispiel zeigt auch, wie Sie CSS-Formate sinnvoll aufteilen können. Im Beispiel soll die Eigenschaft »fett dargestellt« (
font-
weight: bold
) für alle Links gelten. Deshalb wird sie in einem Format für das Element
a
notiert. Diejenigen Eigenschaften, die sich in den einzelnen Zuständen unterscheiden sollen – im Beispiel die Linkfarbe (
color
) und die Linkunterstreichung (
text-decoration: none
= nicht unterstrichen,
text-decoration: unterline
= unterstrichen) – werden dagegen in den Selektoren für Pseudo-Elemente notiert.
13.2.14 Formate
Aus Textverarbeitungsprogrammen wie MS Word oder Open Office kennen Sie vermutlich Formatvorlagen. Das sind benannte Absatz- oder Zeichenformate mit einer Reihe von gespeicherten Style-Eigenschaften. Wenn Sie ein Absatz- oder Zeichenformat anwenden, bekommt der aktuell markierte oder den Cursor umgebende Inhalt alle Style-Eigenschaften der entsprechenden Formatvorlage.
In HTML/CSS finden an dieser Stelle zwei Vorgänge statt. Zunächst weisen Sie Inhalten mit Hilfe von HTML logische Container zu,
Weitere Kostenlose Bücher
Kostenlos Online Lesen 
