.info:first-letter {
font-size:50px;
color:#663333;
font-family: Georgia, "Times New Roman", Times, serif;
vertical-align: middle;
float: left;
}
td.Preis:before { content:"Preis: "; }
td.Preis:after { content:",- EUR"; }
Pseudo-Elemente sind Elemente innerhalb einer HTML-Datei, die sich jedoch nicht durch ein eindeutiges HTML-Tag ausdrücken lassen, z.B. ein "noch nicht besuchter Verweis" oder der erste Buchstabe eines Absatzes. Zum Definieren solcher Pseudo-Elemente gibt es eine bestimmte Syntax innerhalb der Style-Sheet-Sprache CSS. Bei Style-Sheet-Definitionen von Pseudo-Elementen notieren Sie zuerst das betroffene HTML-Tag, im Beispiel das a-Tag für Verweise. Dahinter folgt ein Doppelpunkt und dahinter eine erlaubte Angabe, im Beispiel etwa link oder visited. Beachten Sie, dass dies keine frei wählbaren Namen sind, sondern feste Schlüsselwörter.
Die auf meiner Homepage benutzten Effekte mit fließendem Übergang von einer Farbe zur anderen wurden mittels Java Script erstellt. Hier erfahrt ihr mehr.
Mit Pseudo Elementen kann man auch den ersten Buchstaben eines Absatzes, die erste Zeile und das erste Kindelement formatieren. Die Einzelheiten werden im Selfhtml ausführlich erklärt. Hier nur ein Beispiel, wie man den ersten Buchstaben eines Absatzes schön formatiert und linksbündig einsetzt. Die Klasse mit dem frei vergebenen Namen "info" wurde diesem Absatz zugewiesen <p class="info">. Es folgen die 3 Möglichkeiten.
: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
Mit den Elementen :before und :after lassen sich bestimmteTextteile vor und hinter der Eingabe festlegen. Beispielsweise in Preislisten. In der Tabellenzelle die den Preis enthält braucht nur der Preis eingegeben werden.
<td class="Preis"> Durch die Zuweisung der Klasse "Preis" wird automatisch vor der Eingabe der Text "Preis: " eingefügt und nach der Eingabe ",-EUR" . So spart man sich eine Menge Schreibarbeit.
Leider werden diese Angaben vom IE 6 noch nicht interpretiert!
Hamburger | 3,50 |
Bratwurst | 2,50 |
Pommes | 1,00 |
Frikadelle | 2,00 |
Salat | 2,00 |
Startseite | nächste Seite | ![]() |