Aufbau zentraler FormateDie hier beschriebenen Möglichkeiten gelten, wenn Sie:
Formate zentral für eine HTML-Datei definieren oder
Formate zentral in separater CSS-Datei definieren
Zentrale Formate folgen einem bestimmten Grundmuster:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Zentrale Formate</title>
<style type="text/css">
h1 { color:red; font-size:48px; }
</style>
</head>
<body>
<h1>48 Pixel und Rot!</h1>
</body>
</html>
Das Beispiel enthält in einem style-Bereich eine Formatdefinition für h1-Elemente der Datei, also für Überschriften 1. Ordnung. Solche Formatdefinitionen haben immer den gleichen Aufbau und bestehen aus folgenden Teilen:
Als "Selektoren" wird das bezeichnet, was vor den geschweiften Klammern steht. Ein Selektor wählt aus, wofür die folgenden Definitionen gelten sollen. Im obigen Beispiel gelten die Formate für alle Überschriften 1. Ordnung (h1-Elemente). Es sind jedoch auch komplexere Selektoren möglich sowie mehrere, durch Komma getrennte Selektoren.
Die eigentlichen Definitionen zum Format stehen stets in geschweiften Klammern { und }. Sie bestehen darin, dass eine oder mehrere CSS-Eigenschaften notiert werden und einen Wert erhalten. Im obigen Beispiel werden etwa die CSS-Eigenschaften color (Schriftfarbe) und font-size (Schriftgröße) verwendet. Der Eigenschaft color wird der Wert red zugewiesen, und der Eigenschaft font-size der Wert 48px. Zwischen Eigenschaft und Wertzuweisung muss stets ein Doppelpunkt stehen. Abgeschlossen wird eine Definition mit einem Strichpunkt (;). Nur bei der letzten Definition vor der schließenden geschweiften Klammer darf der Strichpunkt auch entfallen.
Zu den einzelnen Eigenschaften und ihren möglichen Werten siehe 
CSS-Eigenschaften.
Formate für HTML-Elemente definierenIn einem style-Bereich oder in einer externen CSS-Datei können Sie für HTML-Elementtypen, zum Beispiel zu Absatztypen und Textgestaltung oder für Tabellen-Elementtypen, CSS-Formate definieren. Wenn Sie entsprechende HTML-Elemente dann in der HTML-Datei verwenden, werden alle Formate angewendet, die Sie für den Elementtyp definiert haben. So können Sie beispielsweise für Überschriften 1. Ordnung definieren, dass diese in der Schriftart Helvetica, 26 Pixel, rot, fett und kursiv mit einem Absatznachabstand von 20 Pixel angezeigt werden. Wenn Sie dann im Text der HTML-Datei eine Überschrift 1. Ordnung wie gewohnt definieren, werden diese Formateigenschaften dabei berücksichtigt.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Element-Selektor</title>
<style type="text/css">
body { background-color:#FFFFCC;
margin-left:100px; }
* { color:blue; }
h1 { font-size:300%;
color:#FF0000;
font-style:italic;
border-bottom:solid thin black; }
p,li { font-size:110%;
line-height:140%;
font-family:Helvetica,Arial,sans-serif;
letter-spacing:0.1em;
word-spacing:0.3em; }
</style>
</head>
<body>
<h1>Überschrift 1. Ordnung</h1>
<p>ein normaler Textabsatz</p>
<ul>
<li>Ein Listenpunkt</li>
<li>Ein anderer Listenpunkt</li>
</ul>
</body>
</html>
Um ein zentrales Format für alle HTML-Elemente eines bestimmten Typs zu definieren, notieren Sie als Selektor den Namen des HTML-Elementtyps, und zwar ohne spitze Klammern. Im obigen Beispiel werden body (Dokument), h1 (Überschriften 1. Ordnung), p (Textabsätze) und li (Listeneinträge) auf diese Weise notiert. Über den Universalselektor * haben Sie die Möglichkeit, Eigenschaften für alle Elemente zu definieren, wobei jedem Element natürlich nur die jeweils zulässigen Eigenschaften zugewiesen werden.
Wenn Sie ein Format für mehrere HTML-Elementtypen definieren wollen, geben Sie alle gewünschten Elementtypen an und trennen Sie diese durch Kommata, so wie im obigen Beispiel p,li.
Es bedeutet also das gleiche, wenn Sie notieren:
h1 { font-family:Helvetica,sans-serif; }
h2 { font-family:Helvetica,sans-serif; }
oder wenn Sie notieren:
h1, h2 { font-family:Helvetica,sans-serif; }
Dahinter folgen die gewünschten Definitionen. Im obigen Beispiel wird dem body-Element eine hellgelbe Hintergrundfarbe (background-color:#FFFFCC;) und ein linker Randabstand von 100 Pixeln (margin-left:100px;) zugewiesen. Über den Universalselektor wird für alle Elemente zunächst blaue Schriftfarbe (color:blue;) definiert. Überschriften 1. Ordnung (h1) erhalten eine Schriftgröße von 300 Prozent (font-size:300%;), die abweichende Schriftfarbe rot (color:#FF0000;) und den Schriftstil kursiv (font-style:italic;). Textabsätze (p) und Listenpunkte (li) sollen in 110 Prozent Schriftgröße (font-size:110%;) mit einer Zeilenhöhe von 140 Prozent (line-height:140%;) in Schriftart Helvetica, oder wenn nicht verfügbar, dann in Arial, und wenn ebenfalls nicht verfügbar, in irgendeiner Sans-Serif-Schrift dargestellt werden (font-family:Helvetica,Arial,sans-serif;). Außerdem werden auch noch Angaben zum Zeichenabstand (letter-spacing), Wortabstand (word-spacing) und zur Textfarbe gemacht.
Zu den einzelnen Eigenschaften und ihren möglichen Werten siehe CSS-Eigenschaften.
Formate für verschachtelte HTML-Elemente definierenWenn Sie nichts anderes angeben, übernimmt ein HTML-Element, das innerhalb eines anderen HTML-Elements vorkommt, dessen Eigenschaften und fügt seine eigenen Eigenschaften nur hinzu. Wenn Sie beispielsweise für Überschriften 1. Ordnung die Schriftart Times und die Farbe rot definieren, erscheint Text, der innerhalb einer solchen Überschrift mit <i>...</i> formatiert wird, ebenfalls rot und in Times, aber zusätzlich kursiv.
Sie können mit Hilfe von Stylesheets jedoch bestimmen, dass ein HTML-Element bestimmte Eigenschaften nur dann hat, wenn es innerhalb eines bestimmten anderen HTML-Elements vorkommt. So können Sie etwa bestimmen, dass <i>...</i> innerhalb von Überschriften nicht kursiv, stattdessen aber in blauer Farbe dargestellt wird, während das gleiche Element innerhalb anderer HTML-Tags nach wie vor nichts anderes als eine kursive Darstellung bewirkt.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Nachfahren-Selektor</title>
<style type="text/css">
h1 { color:red; }
h1 i { color:blue; font-style:normal; }
</style>
</head>
<body>
<h1>Wir lernen <i>Stylesheets</i></h1>
<p>Wir lernen <i>Stylesheets</i></p>
</body>
</html>
Im Beispiel wird festgelegt, dass Textabschnitte, die mit <i> ... </i> ausgezeichnet sind, nicht wie sonst üblich kursiv, sondern normal (font-style:normal;), stattdessen aber mit blauer Farbe (color:blue;) dargestellt werden. Aber nur dann, wenn das i-Element innerhalb einer Überschrift 1. Ordnung (h1) vorkommt. Dazu notieren Sie zuerst den Namen des übergeordneten Elementtyps, im Beispiel h1, und dahinter, durch Leerraum getrennt, den Namen des inneren Elementtyps, im Beispiel i.
In der ersten Zeile innerhalb des <body>-Bereichs im obigen Beispiel kommt diese spezielle Definition zum Tragen. In der zweiten Zeile dagegen, wo <i>...</i> innerhalb eines Textabsatzes vorkommt, hat es die übliche Wirkung.
Bei mehreren, durch Komma getrennten Selektoren wird häufig übersehen, dass eine für den ersten Selektor angegebene Verschachtelung die folgenden Selektoren nicht betrifft; über h1 i, b würden alle b-Elemente selektiert.
Weitere Möglichkeiten für verschachtelte HTML-Elemente bei CSS2Ab CSS2 gibt es weitere Möglichkeiten für Selektoren-Angaben zu verschachtelten Elementen:
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Nachfahren-Selektor, Kind-Selektor, Nachbar-Selektor</title>
<style type="text/css">
div i { color:red; }
div * b { color:violet; }
div > p { color:blue; }
div + p { margin-top:5em; }
</style>
</head>
<body>
<div>
Text in einem div-Bereich mit <b>nur fettem Text</b> und <i>kursivem und <b>dazu fettem</b> Text</i>.
<p>Textabsatz in einem div-Bereich mit <b>nur fettem Text</b> und <i>kursivem und <b>dazu fettem</b> Text</i>.</p>
<table border="1">
<tr>
<td><p>Textabsatz in einer Tabellenzelle.</p></td>
</tr>
</table>
</div>
<p>Textabsatz außerhalb eines div-Bereichs mit <b>nur fettem Text</b> und <i>kursivem und <b>dazu fettem</b> Text</i>.</p>
<p>Noch ein Textabsatz.</p>
</body>
</html>
Die Selektoren im Beispiel haben folgende Bedeutung:
div i { color:red; }
Damit wird wie nach CSS-1.0-Syntax bekannt festgelegt, dass i-Elemente, sofern sie innerhalb eines div-Bereichs vorkommen, rote Textfarbe (color:red;) erhalten. Dabei wird das i-Element auch dann rot formatiert, wenn es z.B. in dieser Form vorkommt:
<div><ul><li><i></i></li></ul></div>. Deshalb gibt es ab CSS2 die Möglichkeit, genauer festzulegen, für welche Verschachtelung die Formatdefinition gelten soll.
div * b { color:violet; }
Der Universalselektor * wird hier als Platzhalter für ein beliebiges Element und damit für eine weitere Verschachtelungsebene verwendet. Im obigen Beispiel wird festgelegt, dass b-Elemente, die innerhalb eines div-Bereichs vorkommen, nur dann violette Textfarbe (color:violet;) erhalten, wenn das b-Element in dieser oder einer vergleichbaren Form vorkommt:
<div><p><b></b></p></div>, also mindestens zwei Ebenen unterhalb des div-Elements. Im obigen Beispiel sind verschiedene Textstellen an verschiedenen Stellen mit <b>...</b> ausgezeichnet. Das erste b-Element in dem Text, der zuerst und direkt innerhalb des div-Bereichs notiert ist, erhält noch keine violette Farbe, wohl aber das nächste b-Element im gleichen Satz, da dieses Element bereits zwei Ebenen unterhalb des div-Elements liegt (das i-Element liegt dazwischen).
div > p { color:blue; }
Mit dem Zeichen > wird in diesem Selektor festgelegt, dass p-Elemente, sofern sie innerhalb eines div-Bereichs vorkommen, nur dann blaue Textfarbe (color:blue;) erhalten, wenn das p-Element in dieser Form vorkommt:
<div><p></p></div>, also eine Ebene unterhalb des div-Elements. Im obigen Beispiel ist innerhalb des div-Bereichs unter anderem auch eine Tabelle notiert, in der noch mal ein p-Element vorkommt. Dort greift die Formatierung der blauen Farbe nicht, weil das p-Element mehr als eine Verschachtelungsebene unterhalb des div-Elements liegt (die Tabellenelemente sind dazwischen).
div + p { margin-top:100px; }
Mit dem Zeichen + wird in diesem Selektor festgelegt, dass p-Elemente, die unmittelbar auf ein div-Element hin folgen, einen Abstand von 100 Pixeln nach oben hin erhalten (margin-top:100px;). Im obigen Beispiel ist das bei dem vorletzten p-Element der Fall. Dieses folgt unmittelbar hinter dem div-Bereich.
Zu den einzelnen Eigenschaften und ihren möglichen Werten siehe CSS-Eigenschaften.
Der Internet Explorer 6.0 interpretiert die Selektoren > und + noch nicht.
Attributbedingte Formate definierenMit Hilfe attributbedingter Formate können Sie in Selektoren angeben, dass Formatdefinitionen nur für Elemente mit bestimmten Attributen oder sogar nur für Elemente mit bestimmten Wertzuweisungen an Attribute gelten sollen.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Attribut-Selektoren</title>
<style type="text/css">
p { font-weight:bold; font-family:Tahoma,sans-serif; font-size:1.2em; }
p[align] { color:red; }
p[align=center] { color:blue; text-align:left; }
td[abbr~=Berlin] { background-color:#FFFF00 }
*[lang|=en] { background-color:#FF0000; color:#FFFFFF; }
</style>
</head>
<body>
<p>Das ist ein Textabsatz, ein stinknormaler.</p>
<p align="right">Das ist ein Textabsatz, rechts ausgerichtet.</p>
<p align="center">Das ist ein Textabsatz, zentriert? Wirklich zentriert?</p>
<table border="1"><tr>
<th>Berlin</th>
<th>Hamburg</th>
</tr><tr>
<td abbr="Es folgen Infos zu Berlin">Eine Menge Inhalt zu Berlin</td>
<td abbr="Es folgen Infos zu Hamburg">Eine Menge Inhalt zu Hamburg</td>
</tr></table>
<p>Ein Textabsatz <span lang="fr">avec</span> Text <span lang="en">about</span>
einen <span lang="en-US">English man in New York</span></p>
</body>
</html>
In dem Beispiel ist zunächst eine Formatdefinition für alle p-Elemente notiert. Dann folgen jedoch zwei weitere Formatdefinitionen - ebenfalls für p-Elemente, aber nur für solche, die ein Attribut align haben. Mit der Syntax p[align] werden alle p-Elemente erfasst, die ein align-Attribut haben. Mit p[align=center] werden alle p-Elemente erfasst, die ein align="center" im einleitenden Tag haben. Mit td[abbr~=Berlin] werden alle Tabellenzellen des Typs td erfasst, die ein Attribut abbr besitzen und bei denen in der Wertzuweisung an dieses Attribut das Wort Berlin vorkommt. Diese Syntax findet eines von mehreren, durch Leerzeichen getrennten Wörtern in Wertzuweisungen an Attribute. Mit *[lang|=en] schließlich werden alle Elemente erfasst, die ein Universalattribut lang mit einem Wert, der mit en beginnt aufweisen und danach eventuell einen Bindestrich enthalten (wie en oder en-US).
Formate für Klassen definierenSie können Formate für Klassen definieren. Anwenden können Sie solche Klassen in HTML mit dem Universalattribut class. So können Sie beispielsweise für Überschriften 1. Ordnung zwei Varianten erzeugen. Dazu vergeben Sie Namen für die Klassen.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Klassen-Selektor</title>
<style type="text/css">
h1 { font-family:Arial,sans-serif; font-size:2em; font-weight:normal; }
h1.hinterlegt { background-color:#FFFF00 }
*.hinterlegt { background-color:#00FFFF }
.extra { background-color:#FF99FF }
.extra.hinterlegt { background-color:#FF0000 }
</style>
</head>
<body>
<h1>H1 ganz normal nur etwas formatiert</h1>
<h1 class="hinterlegt">H1 knallgelb hinterlegt</h1>
<h2>H2 ganz normal, <span class="hinterlegt"> türkis <b class="extra">lila</b> hinterlegt</span></h2>
<h3 class="extra hinterlegt">H3, rot hinterlegt</h3>
</body>
</html>
Es gibt zwei Möglichkeiten, Klassen für HTML-Elemente zu notieren: entweder für einen bestimmten HTML-Elementtyp, oder für keinen bestimmten. In jedem Fall bestimmen Sie eine Formatdefinition für eine Klasse, indem Sie im Selektor einen Punkt notieren und unmittelbar dahinter einen Namen für die Klasse angeben. Im obigen Beispiel wird mit h1.hinterlegt eine Klasse namens hinterlegt angesprochen, die aber nur für HTML-Elemente vom Typ h1 gilt: also z.B. auf HTML-Elemente wie <h1 class="hinterlegt"> anwendbar ist. Mit *.hinterlegt wird im Beispiel demonstriert, dass Sie durchaus den gleichen Klassennamen nochmal allgemein oder für andere Elemente verwenden können. Der Stern gilt als Universalselektor und bedeutet so viel wie "für alle Elemente". Er kann auch ganz entfallen. Im Beispiel .extra können Sie das sehen. Ein h1-Element erhält im Beispiel also die Formatierungen, die mit dem Selektor h1.hinterlegt bestimmt werden. Ein p-Element mit <p class="hinterlegt"> erhält dagegen die Formatierungen, die mit *.hinterlegt bestimmt werden. Es ist auch möglich, ausschließlich Elemente zu selektieren, die mehrere Klassennamen aufweisen. Notieren Sie in diesem Fall beide Klassenselektoren direkt hintereinander.
Die Namen hinter dem Punkt können Sie frei vergeben, Sie dürfen jedoch
Der Internet Explorer bis Version 6 versagt leider bei der Definition von .extra.hinterlegt und wendet diese Definition auf alle Elemente an, die der Klasse hinterlegt zugewiesen wurden, nicht nur dem Abschnitt, der mit class="extra hinterlegt" explizit beiden Klassen zugewiesen wurde.
Klassen in Verbindung mit den Elementen div und spanDie beiden HTML-Elemente div und span haben besondere Bedeutung für Stylesheets. Der Grund dafür ist, dass sie selber relativ eigenschaftslos sind. Der einzige Unterschied besteht darin, dass das div-Element eine neue Zeile im Textfluss erzwingt, während span innerhalb eines Textes verwendet werden kann und keinen neuen Absatz erzeugt. Die Darstellung, nicht jedoch die mögliche Verschachtelung, lässt sich mit der Eigenschaft display beeinflussen. Das div-Element eignet sich vor allem dafür, mehrere Elemente zu gruppieren und in ihrer Gesamtheit zu formatieren. Mit dem span-Element hingegen lassen sich kleinere Teilbereiche definieren, deren Darstellung mit CSS gestaltet werden kann.
Das folgende Beispiel zeigt, wie Sie mit <div>, <span> und Klassen Bereiche formatieren können, für die keine speziell dafür vorgesehenen HTML-Elemente existieren.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Klassen-Selektor</title>
<style type="text/css">
.beitrag { border:1px outset gray; margin:.5em; padding:.5em; background-color:#efd;}
.uebersetzung { border-bottom:1px dotted #900; }
.autor { font-style:italic; }
.datum { font-size:80%; color:#444; }
</style>
</head>
<body>
<div class="beitrag">
<p>Wo finde ich weitere Information über HTML?
<p class="autor">Moritz Ratlos, <span class="datum">21.05.2006</span></p>
</div>
<div class="beitrag">
<p>Beispielsweise in der
<a href="http://www.w3.org/TR/REC-html40/">HTML 4.01-
<span lang="en" title="Empfehlung" class="uebersetzung">Recommendation</span></a>.
</p>
<p class="autor">Max Hilfreich, <span class="datum">22.05.2006</span></p>
</div>
<div class="beitrag">
<p>Vielen Dank für den <span lang="en" title="Verweis" class="uebersetzung">Link!</span></p>
<p class="autor">Moritz Ratlos, <span class="datum">22.05.2006</span></p>
</div>
</body>
</html>
Im style-Bereich des Beispiels werden Klassen für beliebige Elemente definiert, die diese Klassen mit class="beitrag", class="datum" usw. verwenden können und damit die entsprechenden Formate annehmen.
Im sichtbaren Bereich der Datei, also zwischen <body> und </body>, wurden Elemente der Typen div, p und span um class-Attribute erweitert. Die einzelnen Beiträge wurden mittels <div class="beitrag">…</div> gruppiert und im Stylesheet mit Rahmen, Abständen und einer Hintergrundfarbe versehen. Die Namen der Verfasser sowie das jeweilige Datum befinden sich in einem mit <p class="autor">…</p> ausgezeichneten Bereich, welcher zur Gänze kursiv angezeigt wird. Das Datum selbst wird aufgrund von class="datum" zusätzlich kleiner und heller dargestellt. Im Verweis des zweiten und im Text des dritten Abschnitts wurden fremdsprachige Bestandteile um die Attribute lang="en", title="…" und class="uebersetzung" ergänzt. Der über die Klasse .uebersetzung zugewiesene untere Rahmen verdeutlicht, dass zusätzliche Information, in diesem Fall die Übersetzung eines Begriffes im title-Attribut, verfügbar ist – grafische Browser stellen dessen Inhalt im Allgemeinen per Tooltip bereit.
Individualformate definierenSo wie Sie Formate für Klassen definieren können, die in HTML mit dem Universalattribut class angesprochen werden, können Sie auch Formate definieren, die über das Universalattribut id angesprochen werden. Da die Wertzuweisung an ein solches Attribut ein dokumentweit eindeutiger Name sein sollte, handelt es sich also einfach um eine zentrale Formatdefinition für das eine Element mit diesem id-Namen. In CSS werden die id-Namen allerdings nicht nur wie beispielsweise in JavaScript als dokumentweit eindeutige Bezeichner betrachtet, sondern auch als elementtypweit eindeutige Bezeichner.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>ID-Selektor</title>
<style type="text/css">
#roterBereich {
position:absolute;
top:130px;
left:30px;
width:320px;
padding:10px;
margin:0px;
border:4px solid #EE0000;
}
#blauerBereich {
position:absolute;
top:130px;
left:400px;
width:320px;
padding:10px;
margin:0px;
border:4px solid #0000EE;
}
h1#Titel {
font-family:Arial,sans-serif;
font-size:2em;
font-weight:normal;
color:green;
}
</style>
</head>
<body>
<h1 id="Titel">Diese Überschrift und zwei positionierte Bereiche</h1>
<div id="roterBereich"><h1>Der rote Bereich</h1></div>
<div id="blauerBereich"><h1>Der blaue Bereich</h1></div>
</body>
</html>
In dem Beispiel werden drei Individualformate definiert: zunächst einmal zwei Individualformate mit den Namen #roterBereich und #blauerBereich. Solche Formate beginnen also mit dem Gatterzeichen #, gefolgt von dem Namen. Ein HTML-Element, das diesen Namen als Wertzuweisung an das id-Attribut benutzt, bekommt dann die entsprechenden Formate zugewiesen. Das obige Beispiel zeigt einen typischen Anwendungsfall für Individualformate, nämlich das Definieren von Formaten für absolut positionierte Bereiche (position:absolute;).
Weiterhin wird ein Individualformat mit dem Selektor h1#Titel definiert. Das ist eine Syntax, die erst seit CSS2 zur Verfügung steht. Dabei wird vor dem Gatterzeichen, das ein Individualformat kennzeichnet, ein HTML-Elementtyp notiert, im Beispiel also h1 für Überschriften erster Ordnung. Hinter dem Gatterzeichen dann wieder der Name des Individualformats. Im Beispiel wird die Formatdefinition nur dann angewendet, wenn es in der HTML-Datei ein h1-Element mit dem Attribut id="Titel" gibt. Wenn es dagegen etwa ein Element div mit id="Titel" gäbe, würde die Formatdefinition dort ignoriert.
Individualformate mit vorangestelltem Elementtyp werden von Internet Explorer 5.x und Netscape 6.0 erkannt, nicht aber von älteren Versionen.
Pseudoelemente und Pseudoklassen definierenMittels Pseudoklassen und Pseudoelementen können Sie Deklarationen für HTML-Bestandteile definieren, die sich nicht durch ein eindeutiges HTML-Element ausdrücken lassen, z.B. ein "noch nicht besuchter Verweis" oder der "erste Buchstabe eines Absatzes". Zum Definieren solcher Pseudoelemente und Pseudoklassen gibt es eine spezielle Syntax.
Anzeigebeispiel: So sieht's aus
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Pseudoklassen für Verweise</title>
<style type="text/css">
body { font-family:Arial,sans-serif; }
a:link { color:#EE0000; text-decoration:none; font-weight:bold; }
a:visited { color:#EEAAAA; text-decoration:none; font-weight:bold; }
a:focus { color:#00AA00; background-color:#FFFF77; font-weight:bold; }
a:hover { color:#EE0000; text-decoration:none; background-color:#FFFF99; font-weight:bold; }
a:active { color:#0000EE; background-color:#FFFF99; font-weight:bold; }
</style>
</head>
<body>
<p>
Vermutlich kennen Sie die <a href="../../index.htm">Kapiteleinstiegsseite zu CSS</a><br>
Und wohl auch die <a href="../../../index.htm">Einstiegsseite zu SELFHTML</a><br>
Aber kennen Sie auch die <a href="../../../intro/hypertext/geschichte.htm">Geschichte von Hypertext</a>?<br>
Oder die <a href="../../../xml/regeln/baumstruktur.htm">Baumstruktur einer XML-Datei</a>?
</p>
</body>
</html>
Bei Pseudoelementen und Pseudoklassen notieren Sie zuerst das betroffene HTML-Element, im Beispiel das a-Element für Verweise. 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), focus (für z.B. mit der Tastatur ausgewählte Verweise), 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 und sich z.B. a:hover für einen mit der Tastatur ausgewählten Verweis nicht auswirken könnte, wenn a:focus später notiert wird.
Es gibt eine Reihe fester, erlaubter Pseudoelemente und Pseudoklassen. Diese werden werden im Zusammenhang mit den CSS-Eigenschaften im Abschnitt über Pseudoelemente und Pseudoklassen beschrieben.
|
| |
 |
HTML-Elemente direktformatieren
|
 |
Stylesheets in HTML einbinden
|
 SELFHTML/Navigationshilfen Stylesheets CSS-Formate definieren |
|
© 2007 Impressum