Über mich

Startseite arrow Tipps & Tricks arrow Mehrere CSS-Klassen für ein Element

Mehrere CSS-Klassen für ein Element

Dienstag, 15. April 2008
Geschrieben von Armin Vieweg
Wusstet Ihr, dass man einem Element mehrere CSS-Klassen zuweisen kann? Das kann manchmal recht praktisch sein. Hier erfahrt Ihr, wie das geht.

Stellt Euch vor, Ihr habt einen Text. Und innerhalb diesen Textes sollen verschiedene Formatierungen vorgenommen werden. Ein Wort soll fett dargestellt werden, ein weiteres soll rot statt schwarz sein und wieder ein anderes Wort soll eine größere Schriftart haben.

Wenn wir das mit CSS abdecken würden, hätten wir jetzt folgende Klassen:

.fett { font-weight:bold; }


.rot { color:#FF0000; }


.riesig { font-size:24px; }



Innerhalb vom HTML-Code würden wir um die Worte ein <span class="riesig"> legen und danach die entsprechende Klasse aufrufen.



Mehrere Klassen aufrufen
Wenn wir ein Wort aus diesem Text jetzt rot und riesig haben möchten, können wir entweder eine weitere Klasse anlegen und aufrufen, oder wir verwenden folgende Syntax:

<span class="rot riesig">Wort</span>


Ruft man innerhalb eines Klassenaufrufes mehrere Klassen mit einem Leerzeichen getrennt auf, werden alle sich darin befindenden Eigenschaften auf das Element angewendet. Sollte sich eine Eigenschaft doppeln, die also in beiden, aufgerufenen Klassen eine Font-Size deklariert ist, dann wird der Wert genommen von der Klasse, die als letztes aufrufen wird. Also im oberen Beispiel wäre "riesig" die letzte Klasse und würde doppelte Eigenschaften aus der Klasse "rot" überschreiben.

Hier ein kurzes Beispiel:

.klasse_a { font-size:12px; }
.klasse_b { font-size:24px; }


<span class="klasse_b klasse_a">Textbaustein</span>


Preisfrage: Wie groß ist der Text "Textbaustein"?
Richtige Antwort: 12 Pixel



Dieser Tipp gehört im Übrigen zum CSS-Grundwissen eines jeden Webdesigner.



  Keine Kommentare vorhanden
Letzte Aktualisierung ( Mittwoch, 16. April 2008 )
 
< Zurück   Weiter >