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:
<html>
<head>
<title>Titel der Datei</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 "Selektor" wird das bezeichnet, was vor den geschweiften Klammern steht. Der 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.
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.
Zwar sind innerhalb einer Definition durchaus Leerzeichen erlaubt, aber frühe Versionen von Netscape 4.x haben sich dabei als sehr empfindlich erwiesen und ignorieren solche Definitionen. Obwohl es nicht so gut lesbar ist, ist es deshalb besser, keine Leerzeichen innerhalb einer Definition zu verwenden. So werden Angaben wie color:red; font-size:48px; in jedem Fall akzeptiert, aber color: red; font-size: 48px; können bei einigen älteren Netscape-Versionen zu Fehlern führen.
  |
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
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
body { background-color:#FFFFCC;
margin-left:100px; }
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;
color:blue; }
</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. 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. Überschriften 1. Ordnung (h1) erhalten eine Schriftgröße von 300 Prozent (font-size:300%;), die 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
<html>
<head>
<title>Titel der Datei</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.
Weitere Möglichkeiten für verschachtelte HTML-Elemente bei CSS 2.0Ab CSS 2.0 gibt es weitere Möglichkeiten für Selektoren-Angaben zu verschachtelten Elementen:
Anzeigebeispiel: So sieht's aus
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
div i { color:red; }
div > p { color:blue; }
div * b { color:violet; }
div + p { margin-top:100px; }
</style>
</head>
<body>
<div align="center">
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 CSS 2.0 die Möglichkeit, genauer festzulegen, für welche Verschachtelung die Formatdefinition gelten soll.
div > p { color:blue; }
Mit dem Zeichen > wird in diesem Selektor festgelegt, dass p-Elemente, sofern sie innerhalb eines div-Bereichs vorkommen, blaue Textfarbe (color:blue;) erhalten. Aber nur dann, 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 * b { color:violet; }
Mit dem Zeichen * wird in diesem Selektor festgelegt, dass b-Elemente, sofern sie innerhalb eines div-Bereichs vorkommen, violette Textfarbe (color:violet;) erhalten. Aber nur dann, 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 { 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. Beachten Sie, dass die Syntax mit dem Pluszeichen nur mit Netscape 6.0 nachvollziehbar war, mit dem Internet Explorer 5.5 dagegen nicht.
Zu den einzelnen Eigenschaften und ihren möglichen Werten siehe CSS-Eigenschaften.
Der Internet Explorer 6.0 interpretiert die Nachfahren-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
<html>
<head>
<title>Titel der Datei</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 (der Stern ist das Platzhalterzeichen für "alle Elemente" und wird als "Universalselektor" bezeichnet) erfasst, die ein Universalattribut lang mit einem Wert, der mit en beginnt aufweisen und danach eventuell einen Bindestrich enthalten (wie en oder en-US).
Der Internet Explorer 6.0 interpretiert Attribut-Selektoren noch nicht.
| |
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
<html>
<head>
<title>Titel der Datei</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"> aber <b class="extra">auch</b> hinterlegt</span></h2>
<h3 class="extra hinterlegt">H3, extra 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
| |
Klassen in Verbindung mit den Elementen div und spanDie beiden HTML-Elemente div und span haben besondere Bedeutung für Stylesheets. Der Grund 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. Wenn Sie mit diesen Elementen arbeiten, können Sie Probleme vermeiden, die sich aus den im Browser voreingestellten Eigenschaften bestimmter Elemente ergeben. So haben beispielsweise Überschriften bei der Darstellung im Browser bestimmte Vor- und Nachabstände, die von Browser zu Browser recht verschieden sein können. Wenn Sie das Aussehen solcher Elemente kontrollieren wollen, benötigen Sie CSS-Formatdefinitionen nicht selten dazu, um einfach nur die automatischen Voreinstellungen der Browser für solche Elemente zu korrigieren. Bei den Elementen div und span können Sie dagegen fast wie auf einer "tabula rasa" aufsetzen.
Das folgende Beispiel zeigt, wie Sie mit CSS, Klassen und allein mit diesen beiden eigenschaftslosen HTML-Elementen arbeiten können.
Anzeigebeispiel: So sieht's aus
<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
.body { background-color:#EEEEFF; }
.chap { font-family:Arial,sans-serif; font-size:175%; color:blue;
border-bottom-style:solid; border-bottom-width:3px; border-color:red;
margin:0px; margin-bottom:16px; }
.sect { font-family:Arial,sans-serif; font-size:130%; color:blue;
border-bottom-style:solid; border-bottom-width:3px; border-color:red;
margin:0px; margin-top:24px; margin-bottom:16px; }
.p { font-family:Arial,sans-serif; font-size:105%; color:black; margin-top:6px; margin-bottom:6px; }
.red { color:red }
.blue { color:blue }
.bold { font-weight:bold }
.big { font-size:140% }
.small { font-size:60%; font-family:'Small Fonts',sans-serif; }
</style>
</head>
<body>
<div class="chap">Eine Kapitelüberschrift</div>
<div class="p">Eine Textabsatz, dessen Klasse genau so heißt wie ein HTML-Element :-)</div>
<div class="p">Und damit man auch alles sieht, gleich noch einer davon</div>
<div class="sect">Eine Sektionsüberschrift</div>
<div class="p">Absatz mit <span class="red">rotem und <span class="bold">fettem</span></span> Text</div>
<div class="p">Absatz mit <span class="big">großem</span> und <span class="small">kleinem</span> Text</div>
</body>
</html>
Im style-Bereich des Beispiels werden Klassen für beliebige Elemente definiert, die diese Klassen mit class="chap", class="sect" usw. verwenden können und damit die entsprechenden Formate annehmen.
Im sichtbaren Bereich der Datei, also zwischen <body> und </body>, sind ausschließlich Elemente der Typen div und span notiert. Durch die Verwendung des class-Attributs "simulieren" diese Elemente gewissermaßen typische Auszeichnungselemente wie Kapitelüberschriften, Textabsätze und Formatierungen innerhalb des Textes.
Nun kann man darüber streiten, ob diese Art zu arbeiten nicht eine Vergewaltigung der Idee von HTML darstellt, der Idee nämlich, ein Set wichtiger und für normalen Text typischer Auszeichnungselemente bereitzustellen, damit durch deren einheitliche Verwendung auch eine "webweit" einheitliche Semantik bei der Textauszeichnung erreicht wird. Andererseits ist Semantik immer auch gegeben, wenn man Elemente regelgerecht, aber nach eigenen Vorstellungen für Bedeutung auszeichnet. Denn vielleicht will man ja unter der Bedeutung der Klassen chap und sect im Beispiel etwas anderes verstehen als einfach unter dem, was die HTML-Elemente h1 und h2 bedeuten. Die eigenschaftslosen Elemente div und span eignen sich ja beispielsweise auch hervorragend dazu, in Verbindung mit Klassennamen wie Romeo und Julia Rollentexte eines Theaterstücks zu markieren. Insofern sind div und span in Verbindung mit Klassennamen gar nicht mehr weit entfernt von den semantischen Konzepten, die mit XML verfolgt werden.
| |
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
<html>
<head>
<title>Titel der Datei</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 CSS 2.0 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
<html>
<head>
<title>Titel der Datei</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:hover { color:#EE0000; text-decoration:none; background-color:#FFFF99; font-weight:bold; }
a:active { color:#0000EE; background-color:#FFFF99; font-weight:bold; }
a:focus { color:#00AA00; background-color:#FFFF77; 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), hover (für Verweise, während der Anwender mit der Maus darüber fährt), active (für angeklickte Verweise) und focus (für z.B. mit der Tastatur ausgewählte Verweise). Beachten Sie, dass dies keine frei wählbaren Namen sind, sondern feste Schlüsselwörter.
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 |
|
© 2005 Impressum