SELFHTML: Stylesheets / CSS-Formate definieren / Zentrale Formate definieren
Author: Redaktion SELFHTML, selfhtml81@selfhtml.org
Description: Wie Sie für bestimmte HTML-Elemente oder eine bestimmte Auswahl von Elementen Formate definieren.
Keywords: SELFHTML, CSS, Stylesheets, Cascading Stylesheets, zentrale Formate, Selektoren, attributbedingte Formate, Formate für Klassen, CSS-Klassen, Individualformate, Pseudoformate, Pseudoelemente, Pseudoklassen
Date: 2005-08-22T21:21:39+02:00

| # Zentrale Formate definieren
| Aufbau zentraler Formate Formate für HTML-Elemente definieren Formate für verschachtelte HTML-Elemente definieren Attributbedingte Formate definieren Formate für Klassen definieren Klassen in Verbindung mit den Elementen div und span Individualformate definieren Pseudoelemente und Pseudoklassen 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:

    <!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>

### 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 "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.

#### 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 `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 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, 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.

### Beispiel:

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>&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. Ü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 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 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.

### Beispiel:

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>

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

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 CSS2

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

### Erläuterung:

Die Selektoren im Beispiel haben folgende Bedeutung:

#### Nachfahren-Selektoren

`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).

#### Kind-Selektor

`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).

#### Nachbar-Selektor

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

### Beachten Sie:

Der Internet Explorer 6.0 interpretiert die Selektoren `>` und `+` noch nicht.

## Attributbedingte Formate definieren

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

### Beispiel:

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>

### 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 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 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

    <!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>

### 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 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

- keine Leerzeichen und deutsche Umlaute enthalten,
- nicht mit einer Ziffer oder einem Bindestrich beginnen
- und sollten keinen Unterstrich enthalten und nicht zu lang sein.

### Beachten Sie:

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 span

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

### Beispiel:

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>

### Erläuterung:

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

    <!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 &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 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.

### Beachten Sie:

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

## Pseudoelemente und Pseudoklassen definieren

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

### Beispiel:

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>

### Erläuterung:

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

© 2007 Impressum