Unterklassen
<style type="text/css">
<!--
p.normal { font-size:10pt; color:black; }
p.gross { font-size:12pt; color:black; }
p.klein { font-size:8pt; color:black;
.rot { color:red; }
.blau { color:blue; }
//-->
</style>

Normaler Textabsatz mit Schrift 10 Punkt schwarz

Textabsatz mit Schrift 12 Punkt schwarz

Textabsatz mit Schrift 8 Punkt schwarz

roter Textabsatz

roter Absatz für Adressen
blaues Zitat
hier ein roter Link
hier ein blauer Link

Unterklassen von HTML-Tags bilden Sie , indem Sie zuerst das Tag notieren, im obigen Beispiel p. Dahinter folgt ein Punkt und dahinter ein Name für die Unterklasse.
p.normal { font-size:10pt; color:black; }

Den Html Tag vor der Klasse kann man auch weglassen.
.rot { color:red; }
.blau { color:blue; }
Dadurch definieren Sie eine Unterklasse mit Formatierungen, die Sie anschließend auf irgendein HTML-Tag anwenden können. Die Namen hinter dem Punkt können Sie frei vergeben. Die Namen sollten nicht zu lang sein und keine Leerzeichen und keine deutschen Umlaute enthalten.

Man soll angeblich auch das Schlüsselwort all statt des html Tags einsetzten können, jedoch würde ich davon abraten, da das in vielen Fällen nicht funktioniert.
all.blau { color:blue; }

Innerhalb des Dateikörpers können Sie definierte Unterklassen anwenden. Dazu notieren Sie im einleitenden HTML-Tag die Angabe class= und dahinter den Namen der Unterklasse, den Sie zuvor vergeben haben. Im obigen Beispiel werden zunächst drei Varianten des normalen Fließtextabsatzes p notiert.

<p class="normal">Normaler Textabsatz mit Schrift 10 Punkt schwarz</p>


Etwas weiter unten können Sie die Wirkung der Klasse rot sehen.
<address class="rot">roter Absatz für Adressen</address>

Verschiedene HTML-Tags (im Beispiel p und address) können die gleiche Unterklasse von Formaten benutzen.

Allerdings zeigt IE 4 anscheinend die allgemeine Unterklasse im Html Tag <p> nicht an. Eine extra für p definierte Unterklasse funktioniert allerdings. Eine allgemeine Unterklasse, welche einem font Tag zugewiesen wird, funktioniert auch in beiden Browsern. Es ist mal wieder ein Dilemma, welches sich mittlerweile von selbst gelöst hat, da wohl überwiegend neuere Browser in Gebrauch sind.
In Style Sheet Editoren wie Top Style kann man sich für jeden Browser die Darstellung anzeigen lassen. Top Style kann ich nur empfehlen, er lässt sich sehr schön in Dreamweaver und Homesite integrieren.

Die Namen, die ich hier gewählt habe sind eigenlicht nicht so toll. Denn Namen, welche die Formatierung beschreiben (z.B.: blue, rot) sind nicht sehr sinnvoll, da nach einer Änderung der Formatierung der Name nicht mehr sehr sinnvoll ist. Besser sind Namen wie info, hinweis, mailadresse, etc.


Startseite nächste Seite