Sie sind hier: Startseite » CSS-Tutorials » Klassen
| Mit dem Universalattribut "class=" können Sie Formate für bestimmte Klassen festlegen. Hierbei wird angegeben, welches HTML-Element einer bestimmten Stylesheet-Klasse angehört. Das Element übernimmt Formate, die zentral für diese Klasse definiert wurden. Solche Klassen können für alle HTML-Elemente festgelegt werden. Die Notierung erfolgt indem Sie dem jeweiligen Selektor einen Punkt (.) anfügen und unmittelbar danach eine frei formulierbare Klasse notieren. Dabei haben Sie die Möglichkeit die Klasse für ein bestimmtes, oder für kein bestimmtes HTML-Element festlegen. Wählen Sie für den Namen der Klasse immer eine treffende und möglichst kurze Bezeichnung damit Sie auch später noch einen Überblick über Ihre CSS-Definitionen behalten ! Die vergebenen Namen sollten keine Leerzeichen und keine deutschen Umlaute enthalten. |
| Formate für Klassen werden im nebenstehenden Beispiel für p-Elemente in 3-facher Weise definiert. Im 1. Textabsatz wird allen p-Elementen die Schriftart zugewiesen (hier zur besseren Veranschaulichung "Comic Sans MS"). Im 2. Textabsatz wird die Klasse ".Khakihinterlegt" definiert. Im 3. Textabsatz wird ".Cyanhinterlegt" und zusätzlich die Klasse ".Navyhinterlegt" mit "color=silver" definiert. Wird diese Definition für eine komplette HTML-Datei festgelegt, wird der Text in allen p-Elementen in dieser Schriftart ausgegeben. Sie können auch alle p-Elemente durch die Angabe class="Khakihinterlegt" ausgeben, weil hier als Selektor "p" festgelegt ist. Legen Sie keinen festen Selektor fest, können Sie die Definition auch auf andere HTML-Elemente anwenden. Wollen Sie mehreren Elementen die gleiche Klasse zuweisen, notieren Sie diese Elemente einfach durch ein Komma getrennt ! |
Normaler Text im p-Element, mit Selektor (p) formatiert Nochmal Text im p-Element, mit der Klasse "Khakihinterlegt" formatiert Nochmal Text im p-Element, mit der Klasse "Cyanhinterlegt" formatiert, aber hier kommt zusätzlich die Klasse "Navy hinterlegt" zur Wirkung |
|
| Die Elemente div und span haben auf Grund ihrer "Eigenschaftslosigkeit" eine besondere Bedeutung bei CSS. Das div-Element erzwingt lediglich einen Zeilenumbruch im Fliesstext, während das span-Element völlig eigenschaftslos ist, und somit gut in Fliesstexten einzusetzen ist.
Im nebenstehenden Beispiel wurden folgende Namen für die Klassen gewählt: .body (für den Body-Hintergrund) / .kopf (für die Überschrift) / .umrahmt ( für den umrahmten Text, unten) / .rot / .gruen / .maroon / (für die farbigen Textteile) ! Da die Klassen keinen Selektor haben, sind sie praktisch in jedem HTML-Element einsetzbar! |
Eine Überschrift
Ein Text im div-Element
Und hier ein Text, der mit dem span-Element teilweise formatiert ist
Hier Text im div-Element, der mit dem span-Element ROT / GRÜN / MAROON teilweise formatiert wird
|
|
