CSS idundclass

id- und class-Selektoren

Wenn Sie CSS-Stile auf HTML-Elemente anwenden möchten, müssen Sie die Selektoren "id" und "class" für die Elemente festlegen.

ID-Selektor

Der ID-Selektor kann bestimmte Stile für HTML-Elemente mit einer bestimmten ID festlegen.

HTML-Elemente verwenden das id-Attribut, um den ID-Selektor festzulegen. In CSS wird der ID-Selektor mit "#" definiert.

Die folgende Stilregel gilt für das Elementattribut id="para1":

Beispiel

#para1 { text-align:center; color:red; }

Selbst ausprobieren »

RemarkID-Attribute sollten nicht mit einer Zahl beginnen. IDs, die mit einer Zahl beginnen, funktionieren nicht in Mozilla/Firefox-Browsern.

Klassenselektor

Der Klassenselektor wird verwendet, um Stile für eine Gruppe von Elementen zu beschreiben. Der Klassenselektor unterscheidet sich vom ID-Selektor; eine Klasse kann auf mehrere Elemente angewendet werden.

Der Klassenselektor wird in HTML durch das class-Attribut dargestellt. In CSS wird der Klassenselektor durch einen Punkt dargestellt..Zahlenanzeige:

Im folgenden Beispiel werden alle HTML-Elemente mit der Klasse center zentriert.

Beispiel

.center {text-align:center;}

Selbst ausprobieren »

Sie können auch festlegen, dass bestimmte HTML-Elemente eine Klasse verwenden.

Im folgenden Beispiel verwenden alle p-Elemente class="center", um den Text des Elements zu zentrieren:

Beispiel

p.center {text-align:center;}

Selbst ausprobieren »

Mehrere Klassenselektoren können durch Leerzeichen getrennt werden:

Beispiel

.center { text-align:center; } .color { color:#ff0000; }

Selbst ausprobieren »

RemarkDas erste Zeichen eines Klassennamens darf keine Zahl sein! Es funktioniert nicht in Mozilla oder Firefox.

Weitere Erweiterungen