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


Style-Sheet-Angaben: Pseudo-Formate

Diese Seite ist ein Dokument mit Informationstext

 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.

 

HTML4.0MS IE3.0Netscape 4.0 Pseudo-Formate für Verweise (:link, :visited, :active)

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

 

CSS2.0 Pseudo-Formate für erste Absatzzeile (:first-line)

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

 

CSS1.0 Pseudo-Formate für erstes Absatzzeichen (:first-letter)

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

 

CSS2.0 Pseudo-Formate Text vor/nach Elementen (:before, :after)

Beispiel 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