.webp)
Die Tag-Attribute id und class werden verwendet, um ein eindeutiges Element oder eine Gruppe aus mehreren Elementen zu kennzeichnen.
Besuche die App, um alle Inhalte zu sehen!
Erklärung
Die Verwendung von den Tag-Attributen id und class hat den Vorteil, dass das selbe HTML-Tag je nach Klasse oder ID bspw. unterschiedlich aussehen kann.
id-Attribut
Das id-Attribut wird verwendet, um eine eindeutige ID Für ein HTML-Element anzugeben. Es wird von CSS und JavaScript verwendet, um eine bestimmte Aufgabe für ein eindeutiges Element auszuführen. In CSS wird das id-Attribut mit dem Symbol # gefolgt von der ID-Bezeichnung beschrieben.
HTML:
Besuche die App, um alle Inhalte zu sehen!
CSS:
Besuche die App, um alle Inhalte zu sehen!
In dem gesamten HTML-Dokument darf nicht mehr als ein Element mit derselben ID existieren.
class-Attribut
Das class-Attribut wird verwendet, um einen oder mehrere Klassennamen für ein HTML-Element anzugeben. Das class-Attribut kann für ein oder mehre HTML-Element(e) genutzt werden. Der Klassenname kann von CSS und JavaScript verwendet werden, um bestimmte Aufgaben für Elemente mit dem angegebenen Klassennamen auszuführen. Eine Klasse wird in CSS mit einem . gefolgt von dem Klasennamen beschrieben.
HTML:
Besuche die App, um alle Inhalte zu sehen!
CSS:
Besuche die App, um alle Inhalte zu sehen!
Vergleich
id | class |
|---|---|
Tag kann nur eine ID enthalten Hier versteckt sich noch mehr! Besuche die App, um alle Inhalte zu sehen! | Tag kann mehrere Klassen enthalten Hier versteckt sich noch mehr! Besuche die App, um alle Inhalte zu sehen! |
Einmaliges Vorkommen im HTML Dokument Hier versteckt sich noch mehr! Besuche die App, um alle Inhalte zu sehen! | Klassenname kann in vielen Tags vorkommen Hier versteckt sich noch mehr! Besuche die App, um alle Inhalte zu sehen! |
Tags können sowohl Klassen als auch eine ID zusammen zugewiesen bekommen Hier versteckt sich noch mehr! Besuche die App, um alle Inhalte zu sehen! | |
Beispiele
Einfaches Beispiel eines class-Attributs
HTML:
Besuche die App, um alle Inhalte zu sehen!
CSS (mystyle.css):
Besuche die App, um alle Inhalte zu sehen!
Da der Textmarker-Effekt an mehreren Stellen angewendet werden soll, macht es Sinn eine Klasse anzulegen. Die Klasse kann dann auf mehrere Tags im HTML-Dokument zugewiesen werden.
Einfaches Beispiel eines id-Attributs:
HTML:
Besuche die App, um alle Inhalte zu sehen!
CSS (mystyle.css):
Besuche die App, um alle Inhalte zu sehen!
In diesem Beispiel können die Hintergründe unterschiedlicher Elemente mit verschiedenen id-Attributen eingefärbt werden. Das macht Sinn, da nur bestimmte Tags eingefärbt werden sollen und jeweils in einem anderen Farbton.
.png)
.svg)
