## Pseudoformate

| Allgemeines zu Pseudoformaten :link, :visited, :hover, :active, :focus (Pseudoformate für Verweise) :first-line, :first-letter, :first-child (Pseudoformate für Absätze) :before, :after (Pseudoformate für automatisch generierten Text) Automatische Nummerierung

## Allgemeines zu Pseudoformaten

Was Pseudoformate sind, wird im Abschnitt Pseudoformate definieren beschrieben.

## :link, :visited, :hover, :active, :focus (Pseudoformate für Verweise)

Sie können das Erscheinungsbild von Verweisen zu noch nicht besuchten Seiten, zu bereits besuchten Seiten und zu Verweisen, die gerade mit der Maus überfahren oder angeklickt werden, bestimmen.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>:link, :visited, :hover, :active</title>
    <style type="text/css">
    a:link { font-weight:bold; color:#0000E0; text-decoration:none }
    a:visited { font-weight:bold; color:#000080; text-decoration:none }
    a:hover { font-weight:bold; color:#E00000; text-decoration:none }
    a:active { font-weight:bold; color:#E00000; text-decoration:underline }
    a:focus { font-weight:bold; color:#00E000; text-decoration:underline }
    </style>
    </head><body bgcolor="FFFFFF" text="#000000">

    <h1>Bekannte Suchdienste</h1>
    <p>
    <a href="http://www.yahoo.de/">Yahoo (Verzeichnis)</a><br>
    <a href="http://www.google.de/">Google (Suchmaschine)</a><br>
    <a href="http://web.de/">Web.de (Verzeichnis)</a><br>
    <a href="http://www.multimeta.de/">Multimeta (Meta-Suchmaschine)</a>
    </p>

    </body></html>

### Erläuterung:

Pseudoformate werden zentral in einem `style`-Bereich notiert. Die hier beschriebenen Pseudoformate gelten für das `a`-Element in HTML, daher wird vor dem Doppelpunkt das `a` notiert. In den Formatdefinitionen für die einzelnen Pseudoformate können Sie beliebige, geeignete CSS-Eigenschaften zuweisen. Die Pseudoformate bedeuten:

`:link` = für Verweise zu noch nicht besuchten Seiten
`:visited` = für Verweise zu bereits besuchten Seiten
`:hover` = für Verweise, während der Anwender mit der Maus darüber fährt
`:active` = für gerade angeklickte Verweise
`:focus` = für Verweise, die den Fokus erhalten, z.B. durch "Durchsteppen" mit der Tabulatortaste

### Beachten Sie:

Um eine korrekte Darstellung dieser Pseudoformate zu erreichen, müssen Sie bei der Notierung die folgende Reihenfolge einhalten:
`:link`, `:visited`, `:hover`, `:active`.

Netscape 4.x und der Internet Explorer 3.0 interpretieren noch nicht alle Angaben. Insbesondere reagiert Netscape 4.x noch nicht auf das Pseudoformat `a:hover`. Der Internet Explorer 5.x kennt die Angabe `a:focus` noch nicht.

`:focus` funktioniert bei anderen Elementen als Verweisen auch. Wenn Sie beispielsweise für `h1:focus` CSS-Eigenschaften definieren und dann mit der Maus auf eine `h1`-Überschrift klicken, nimmt diese, solange die Maus geklickt ist, die definierten Eigenschaften an.

## :first-line, :first-letter, :first-child (Pseudoformate für Absätze)

Sie können für Absätze mit längerem Fließtext für die erste Zeile des Absatzes ein separates Erscheinungsbild erzwingen. Ferner können Sie für das erste Zeichen der ersten Zeile ein separates Erscheinungsbild erzwingen. Und schließlich können Sie sogar bestimmen, dass ein erstes Kindelement eines Elements ein besonderes Aussehen erhält. Dies sind typographische Effekte, die von Druckschriften her bekannt sind.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>:first-line, :first-letter, :first-child</title>
    <style type="text/css">
    p:first-line { font-weight:bold }
    p:first-letter { font-size:300%; color:red }
    div { background-color:#E0E0E0 }
    div p:first-child { background-color:#C0C0C0; }

    </style>
    </head><body bgcolor="FFFFFF" text="#000000">

    <p>Man kann nur Br&uuml;cken schlagen zwischen Ufern die man
    auseinanderh&auml;lt. Denn wo es keine Gr&auml;ben gibt, da gibt es
    auch keine Unterschiede, und wo es keine Unterschiede gibt, da ist kein
    Leben.</p>
    <div>
    <p>Und die Moral von der Geschicht:</p>
    <p>Traue Philosophen nicht!</p>
    </div>
    </body></html>

### Erläuterung:

Pseudoformate werden zentral in einem `style`-Bereich notiert. Die hier beschriebenen Pseudoformate sind für typische Absatz- oder Überschriftenelemente in HTML gedacht. In den Formatdefinitionen für die einzelnen Pseudoformate können Sie beliebige, geeignete CSS-Eigenschaften zuweisen. Die Pseudoformate bedeuten:

`:first-line` = die erste Textzeile des Elements erhält die CSS-Eigenschaften
`:first-letter` = der erste Buchstabe des Textes erhält die CSS-Eigenschaften
`:first-child` = das erste Kindelement des Elements erhält die CSS-Eigenschaften

### Beachten Sie:

Der Internet Explorer 5.x interpretiert `:first-child` noch nicht.

## :before, :after (Pseudoformate für automatisch generierten Text)

Sie können bestimmen, dass vor oder nach einem Element automatisch Inhalt eingefügt wird. Es kann sich um statischen Text handeln, aber auch um variable Inhalte.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>:before, :after</title>
    <style type="text/css">
    td.Preis:before { content:"Preis: "; }
    td.Preis:after  { content:",- EUR"; }
    td.Produkt:before { content:url(list_style_image.gif)" "; }
    td.Produkt:after  { content:" "attr(title); }
    </style>
    </head><body bgcolor="FFFFFF" text="#000000">

    <table border="1">
    <tr>
    <td class="Produkt" title="(f&uuml;r Kinder und Erwachsene)">Stoffhasen</td>
    <td class="Preis">29</td>
    </tr>
    <tr>
    <td class="Produkt">Wahrsager-Kugeln</td>
    <td class="Preis">39</td>
    </tr>
    </table>

    </body></html>

### Erläuterung:

Pseudoformate werden zentral in einem `style`-Bereich notiert. Die hier beschriebenen Pseudoformate bedeuten:

`:before` = Inhalt, der vor dem notierten Inhalt des Elements eingefügt werden soll
`:after` = Inhalt, der nach dem notierten Inhalt des Elements eingefügt werden soll

Innerhalb der geschweiften Klammern bestimmen Sie dann mit `content:`, was vor bzw. nach dem in HTML notierten Elementinhalt automatisch eingefügt werden soll.

Im obigen Beispiel wird für `td`-Elemente mit dem Klassennamen `Preis` bestimmt, dass vor dem Elementinhalt der statische Text `Preis:` ausgegeben werden soll, und nach dem Elementinhalt der Text EUR,-. In HTML genügt es dann, nur die Zahlen zu notieren.
Für Tabellenzellen mit dem Klassennamen `Produkt` wird bestimmt, dass vor dem Element eine Grafik eingefügt wird. Dazu können Sie die Syntax `url([URI])` zum Referenzieren der Grafik verwenden. Für die gleiche Tabellenzellenklasse wird festgelegt, dass, wenn im einleitenden `<td>`-Tag ein Attribut `title=` notiert wird, dessen Wertzuweisung als Text hinter dem Elementhinhalt eingefügt wird. Für diese Art von variablem Inhalt können Sie die Syntax `attr([Attributname])` verwenden, wie im Beispiel oben gezeigt.

Statischer Text hinter `content:` muss in Anführungszeichen stehen. Im obigen Beispiel können Sie auch sehen, dass es möglich ist, Angaben zu kombinieren. So bedeutet `content:url(list_style_image.gif)" ";`, dass hinter der Grafik noch ein statisches Leerzeichen eingefügt wird.

### Beachten Sie:

Diese Angaben werden vom Internet Explorer 5.x noch nicht interpretiert.

## Automatische Nummerierung

Eine erweiterte Syntax der Pseudoformate :before, :after erlaubt auch die automatische Nummerierung von Elementen, z.B. für Kapitelüberschriften.

### Beispiel:

Anzeigebeispiel: So sieht's aus

    <html><head><title>:before, :after</title>
    <style type="text/css">
    h1:before { content:counter(Ebene01);
                        conter-increment(Ebene01);
                        counter-reset(Ebene02);
              }
    h2:before { content:counter(Ebene01) ". ";
                        counter(Ebene02);
                        conter-increment(Ebene02);
              }
    </style>
    </head><body bgcolor="FFFFFF" text="#000000">

    <h1>&Uuml;berschrift erster Ordnung</h1>
    <p>Text</p>
    <h2>&Uuml;berschrift zweiter Ordnung</h2>
    <p>Text</p>
    <h2>&Uuml;berschrift zweiter Ordnung</h2>
    <p>Text</p>
    <h1>&Uuml;berschrift erster Ordnung</h1>
    <p>Text</p>
    <h2>&Uuml;berschrift zweiter Ordnung</h2>
    <p>Text</p>
    <h2>&Uuml;berschrift zweiter Ordnung</h2>
    <p>Text</p>
    <h2>&Uuml;berschrift zweiter Ordnung</h2>
    <p>Text</p>
    <h1>&Uuml;berschrift zweiter Ordnung</h1>
    <p>Text</p>

    </body></html>

### Erläuterung:

In der Regel werden Sie für die automatische Nummerierung ein Überschriftenelement wie `h1` oder `h2` angeben und die Nummerierung vor dessen Text setzen. Dann müssen Sie im `style`-Bereich Selektoren wie `h1:before` oder `h2:before` notieren. In den geschweiften Klammern folgt dann, wie bei `:before` und `:after` üblich, die Eigenschaft `content:`. Dahinter können im Zusammenhang mit automatischer Nummerierung drei Funktionen folgen, die die Nummerierungszähler steuern. Trennen Sie mehrere Funktionsaufrufe durch Strichpunkte (`;`).

Mit `counter([Name])` fügen Sie den Wert des Zählers mit dem Namen `Name` an die aktuelle Stelle ein. Beim ersten Vorkommen hat der Zähler den Wert 1. In den runden Klammern notieren Sie Zählernamen. Im obigen Beispiel sind das die Namen `Ebene01` und `Ebene02`. Die Namen können Sie frei vergeben.
Mit `counter-increment([Name])` zählen Sie den Zähler mit dem angegebenen Namen um eins hoch. Normalerweise notieren Sie zuerst `counter([Name])` und dann `counter-increment([Name])`, um zuerst den aktuellen Zählerstand einzufügen und dann den Zähler für das nächste Vorkommen des betroffenen Elementtyps hochzuzählen.
Mit `counter-reset([Name])` setzen Sie einen Zähler wieder auf seinen Anfangswert (1) zurück. Dies ist vor allem wichtig, wenn Sie mit Kapitel-Unterkapitel-Nummerierung arbeiten, wie im obigen Beispiel. Dort wird beim Vorkommen eines neuen `h1`-Elements der Zähler für `h2`-Elemente wieder auf 1 gesetzt.

Neben den Funktionen für die Zählerkontrolle kann auch statischer Text notiert werden. Im obigen Beispiel wird hinter dem Aufruf von `counter(Ebene01)` als statischer Text ein Punkt notiert. So entsteht im Beispiel durch die Verwaltung der beiden Zähler für Überschriften erster und zweiter Ordnung ein Nummerierungsschema wie 1, 1.1, 1.2, 2, 2.1, 2.2., 2.3, 3 usw.

### Beachten Sie:

Die automatische Nummerierung wird bislang weder von Netscape noch vom Internet Explorer unterstützt, wohl aber vom Opera-Browser.

| Positionierung und Anzeige von Elementen
| Tabellenformatierung

© 2001 selfhtml@teamone.de