SELFHTML/Quickbar
CSS Style-Sheets
Style-Sheet-Angaben SELFHTML/Quickbar
CSS Style-Sheets
Style-Sheet-Angaben
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.
<style type="text/css">
a:link { color:#FF0000; font-weight:bold }
a:visited { color:#990000; }
a:active { color:#0000FF; font-style:italic }
</style>
|
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.
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.
<style type="text/css">
p:first-line { font-weight:bold }
h1:first-line { color:#990000; }
</style>
|
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.
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.
<style type="text/css">
blockquote.goethe:first-letter { font-size:36pt; color:blue; }
blockquote.schiller:first-letter { font-size:36pt; color:green; }
</style>
|
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.
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.
<style type="text/css">
p.Hinweis:before { content:"Hinweis: " }
p.veraltet:after { content:" (nicht mehr aktuell)" }
</style>
|
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.
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
|
