SELFHTML: CSS Stylesheets / CSS-Formate definieren / Zentrale Formate definieren

	Zentrale Formate definieren
	Aufbau zentraler Formate Formate für HTML-Elemente definieren Formate für verschachtelte HTML-Elemente definieren Attribut-bedingte Formate definieren Formate für Klassen definieren Klassen in Verbindung mit den Elementen div und span Individualformate definieren Pseudoformate definieren

Aufbau zentraler Formate

Die 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:

Beispiel:

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
h1 { color:red; font-size:36pt; }
-->
</style>
</head>
<body>
<h1>36 Punkt und Rot!</h1>
</body>
</html>

Erläuterung:

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:

Selektor:

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.

Definitionen:

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 36pt. 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.

Beachten Sie:

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:36pt; in jedem Fall akzeptiert, aber color: red; font-size: 36pt; können bei einigen älteren Netscape-Versionen zu Fehlern führen.

Formate für HTML-Elemente definieren

In 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, 20 Punkt, rot, fett und kursiv mit einem Absatznachabstand von 16 Punkt angezeigt werden. Wenn Sie dann im Text der HTML-Datei eine Überschrift 1. Ordnung wie gewohnt definieren, werden diese Formateigenschaften bei berücksichtigt.

Beispiel:

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:48pt;
     color:#FF0000;
     font-style:italic;
     border-bottom:solid thin black; }
p,li  { font-size:12pt;
        line-height:14pt;
        font-family:Helvetica,Arial,sans-serif;
        letter-spacing:0.2mm;
        word-spacing:0.8mm;
        color:blue; }
-->
</style>
</head>
<body>
<h1>&Uuml;berschrift 1. Ordnung</h1>
<p>ein normaler Textabsatz</p>
<ul>
<li>Ein Listenpunkt</li>
<li>Ein anderer Listenpunkt</li>
</ul>
</body>
</html>

Erläuterung:

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 48 Punkt (font-size:48pt;), die Schriftfarbe rot (color:#FF0000;) und den Schriftstil kursiv (font-style:italic;). Textabsätze (p) und Listenpunkte (li) sollen in 12 Punkt Schriftgröße (font-size:12pt;) mit einer Zeilenhöhe von 14 Punkt (line-height:14pt;) 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 definieren

Wenn 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 Style-Sheets 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.

Beispiel:

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>Stylehheets</i></h1>
<p>Wir lernen <i>Stylesheets</i></p>
</body>
</html>

Erläuterung:

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.0

Ab 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 ausserhalb 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>

Erläuterung:

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 aber 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üt 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.

Attribut-bedingte Formate definieren

Mit Hilfe attribut-bedingter 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.

Beispiel:

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:14pt; }
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>

Erläuterung:

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") erfasst, die ein Universalattribut lang= mit einem Wert wie en oder auch en-US haben. Diese Syntax findet Teile in Wertzuweisungen an Attribute, die durch Bindestriche getrennt sind.

Beachten Sie:

Netscape 6.0 interpretiert diese Angaben, der Internet Explorer 5.5 noch nicht.

Formate für Klassen definieren

Sie 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.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
h1 { font-family:Arial,sans-serif; font-size:24pt; font-weight:normal; }
h1.hinterlegt { background-color:#FFFF00 }
*.hinterlegt { background-color:#00FFFF }
.extra { background-color:#FF99FF }
-->
</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">und aber <b class="extra">auch</b> hinterlegt</span></h2>
</body>
</html>

Erläuterung:

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 Platzhalterzeichen 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 weden.

Die Namen hinter dem Punkt können Sie frei vergeben. Die Namen sollten nicht zu lang sein und keine Leerzeichen und keine deutschen Umlaute enthalten.

Klassen in Verbindung mit den Elementen div und span

Die beiden HTML-Elemente div und span haben besondere Bedeutung für CSS 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 zur Verwendung innerhalb eines Textes verwendet werden kann und daher überhaupt keine Eigenschaften hat. 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.

Beispiel:

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:20pt; 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:16pt; 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:11pt; color:black; margin-top:6px; margin-bottom:6px; }
.red   { color:red }
.blue  { color:blue }
.bold  { font-weight:bold }
.big   { font-size:14pt }
.small { font-size:6pt; 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>

Erläuterung:

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 definieren

So 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.

Beispiel:

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:24pt;
   font-weight:normal;
   color:green;
}
-->
</style>
</head>
<body>
<h1 id="Titel">Diese &Uuml;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>

Erläuterung:

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.

Beachten Sie:

Individualformate mit vorangestelltem Elementtyp werden von Internet Explorer 5.x und Netscape 6.0 erkannt, nicht aber von älteren Versionen.

Pseudoformate definieren

Pseudoformate können Sie für HTML-Bestandteile definieren, die sich jedoch 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 Pseudoformate gibt es eine spezielle Syntax.

Beispiel:

Anzeigebeispiel: So sieht's aus

<html>
<head>
<title>Titel der Datei</title>
<style type="text/css">
<!--
 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; }
 body { font-family:Arial,sans-serif; font-size:12pt; }
-->
</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/geschichte.htm">Baumstruktur einer XML-Datei</a>?
</p>
</body>
</html>

Erläuterung:

Bei Pseudoformaten 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) und active (für angeklickte Verweise). Beachten Sie, dass dies keine frei wählbaren Namen sind, sondern feste Schlüsselwörter.

Es gibt eine Reihe fester, erlaubter Pseudoformate. Diese werden werden im Zusammenhang mit den CSS-Eigenschaften im Abschnitt über Pseudoformate beschrieben.


	HTML-Elemente direktformatieren
	CSS Stylesheets in HTML einbinden

SELFHTML/Navigationshilfen

CSS Stylesheets

CSS-Formate definieren