SELFHTML/Quickbar CSS Style-Sheets Style-Sheet-Angaben

| ## Style-Sheet-Angaben: Pseudo-Formate
| Allgemeines zu Pseudo-Formaten Pseudo-Formate für Verweise (:link, :visited, :active) Pseudo-Formate für erste Absatzzeile (:first-line) Pseudo-Formate für erstes Absatzzeichen (:first-letter) Pseudo-Formate für Text vor/nach Elementen (:before, :after)

## Allgemeines zu Pseudo-Formaten

Was Pseudo-Formate sind, wird im Abschnitt Pseudo-Formate definieren beschrieben.

## Pseudo-Formate für Verweise (:link, :visited, :active)

Anzeigebeispiel: So sieht's aus

Sie können das Erscheinungsbild von Verweisen zu noch nicht besuchten Seiten, zu bereits besuchten Seiten und zu Verweisen, die gerade angeklickt werden, bestimmen.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
    a:link { color:#FF0000; font-weight:bold }
    a:visited { color:#990000; }
    a:active { color:#0000FF; font-style:italic }
    </style>

### Erläuterung:

Notieren Sie zuerst das HTML-Tag, für das die Pseudo-Angaben gelten sollen. Im obigen Beispiel ist dies das `<a>`-Tag, das in HTML üblicherweise für Verweise verwendet wird. Sinnvoll sind diese Angaben jedoch auch für Elemente, die durch Dynamisches HTML Verweis-Charakter erhalten. Hinter dem Namen des HTML-Tags folgt ein Doppelpunkt und dahinter ein Bezeichner für das gewünschte Pseudo-Element. Dabei sind folgende Angaben erlaubt.

`link` = für Verweise zu noch nicht besuchten Seiten
`visited` = für Verweise zu bereits besuchten Seiten
`active` = für gerade angeklickte Verweise

Dahinter können Sie dann wie üblich in geschweiften Klammern die Eigenschaften für solche Elemente definieren. Erlaubt sind dabei Farbangaben für die Verweisfarbe. Auch andere Angaben, etwa zum Hintergrund des anklickbaren Verweis-Bereichs, sind möglich.

### Beachten Sie:

Netscape 4.0 und der MS IE 3.0 interpretieren nur Angaben zur Farbe, nicht aber zur Schriftformatierung. Netscape 4.0 interpretiert auch das Pseudo-Format `a:active` nicht.

## Pseudo-Formate für erste Absatzzeile (:first-line)

Anzeigebeispiel: So sieht's aus

Sie können für Absätze mit längerem Fließtext für die erste Zeile des Absatzes ein separates Erscheinungsbild erzwingen. Dies ist ein typographischer Effekt, der von Druckschriften her bekannt ist.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
    p:first-line { font-weight:bold }
    h1:first-line { color:#990000; }
    </style>

### Erläuterung:

Notieren Sie zuerst das HTML-Tag, für das die Pseudo-Angaben gelten sollen. Im obigen Beispiel sind dies die HTML-Tags `<p>` und `<h1>`. Hinter dem Namen des HTML-Tags folgt ein Doppelpunkt und dahinter die Pseudo-Element-Angabe `:first-line`. Dahinter können Sie dann wie üblich in geschweiften Klammern die Eigenschaften für solche Elemente definieren. Erlaubt sind dabei alle sinnvollen Formatierungsmöglichkeiten, etwa Angaben zur Schriftformatierung oder Angaben zum Hintergrund.

### Beachten Sie:

Netscape 4.0 und der MS Internet Explorer, auch die Version 4.0, interpretieren diese Angaben noch nicht.

## Pseudo-Formate für erstes Absatzzeichen (:first-letter)

Anzeigebeispiel: So sieht's aus

Sie können für Absätze mit längerem Fließtext für das erste Zeichen der ersten Zeile ein separates Erscheinungsbild erzwingen. Dies ist ein typographischer Effekt, der von Druckschriften her bekannt ist.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
    blockquote.goethe:first-letter { font-size:36pt; color:blue; }
    blockquote.schiller:first-letter { font-size:36pt; color:green; }
    </style>

### Erläuterung:

Notieren Sie zuerst das HTML-Tag, für das die Pseudo-Angaben gelten sollen. Im obigen Beispiel sind dies Klassen "goethe" und "schiller" des HTML-Tags `<blockquote>`. Dahinter folgt ein Doppelpunkt und anschließend die Pseudo-Element-Angabe `:first-letter`. Dahinter können Sie dann wie üblich in geschweiften Klammern die Eigenschaften für solche Elemente definieren. Erlaubt sind dabei alle sinnvollen Formatierungsmöglichkeiten, etwa Angaben zur Schriftformatierung oder Angaben zum Hintergrund.

### Beachten Sie:

Sie können nach CSS 2.0 hinter der Angabe `content:` nicht nur fest vordefinierten Text notieren, sondern auch typisierte und variable Inhalte notieren. Auf diese Weise lassen sich beispielsweise laufende Absatznumerierungen realisieren. Die entsprechenden Befehle dazu wurden erst nach Redaktionsschluß dieses Kapitels bekannt und sind hier deshalb noch nicht beschrieben. Die Original-Dokumentation dieser für die Zukunft noch sehr wichtigen Befehle finden Sie in der CSS-2.0-Spezifikation unter der Überschrift Generated content and automatic numbering.

Netscape 4.0 und der MS Internet Explorer, auch die Version 4.0, interpretieren diese Angaben noch nicht.

## Pseudo-Formate Text vor/nach Elementen (:before, :after)

Anzeigebeispiel: So sieht's aus

Sie können bestimmen, daß vor oder nach einem Element ein Text eingefügt wird.

### Beispiel (Style-Sheet-Definition im Dateikopf):

    <style type="text/css">
    p.Hinweis:before { content:"Hinweis: " }
    p.veraltet:after { content:" (nicht mehr aktuell)" }
    </style>

### Erläuterung:

Notieren Sie zuerst das HTML-Tag, für das die Pseudo-Angaben gelten sollen. Im obigen Beispiel sind dies Klassen "Hinweis" und "varaltet" des HTML-Tags `<p>`. Dahinter folgt ein Doppelpunkt und anschließend die Pseudo-Element-Angabe `:before`, wenn Text vor dem Element, oder `:after`, wenn Text nach dem Element eingefügt werden soll. Dahinter notieren Sie in geschweiften Klammern die Angabe `content:`, gefolgt von dem gewünschten Text, der vor oder nach dem Element eingefügt werden soll. Der Text muß in Anführungszeichen stehen. Der Text übernimmt automatisch alle Formatdefinitionen des zugehörigen Elements. Innerhalb der geschweiften Klammern können Sie weitere Style-Sheet-Angaben notieren, die für das Element gültig sein sollen.

### Beachten Sie:

Sie können nach CSS 2.0 hinter der Angabe `content:` nicht nur fest vordefinierten Text notieren, sondern auch typisierte und variable Inhalte notieren. Auf diese Weise lassen sich beispielsweise laufende Absatznumerierungen realisieren. Die entsprechenden Befehle dazu wurden erst nach Redaktionsschluß dieses Kapitels bekannt und sind hier deshalb noch nicht beschrieben. Die Original-Dokumentation dieser für die Zukunft noch sehr wichtigen Befehle finden Sie in der CSS-2.0-Spezifikation unter der Überschrift Generated content and automatic numbering.

Netscape 4.0 und der MS Internet Explorer, auch die Version 4.0, interpretieren all diese Angaben noch nicht.

weiter: | Style-Sheet-Angaben: Elemente positionieren
zurück: | Style-Sheet-Angaben: Listen und Tabellen

SELFHTML/Quickbar CSS Style-Sheets Style-Sheet-Angaben

© 1998 Stefan Münz, muenz@csi.com