Klasse vs. ID
Cascading Style Sheets (CSS) ist eine Sprache, die das Aussehen und die Formatierung eines Dokuments beschreibt, das mit einer Auszeichnungssprache geschrieben wurde. CSS wird häufig verwendet, um in HTML geschriebene Webseiten zu gest alten. CSS ermöglicht die Angabe eigener Stilselektoren zusätzlich zur Anwendung von Stilen für HTML-Elemente. Dies geschieht mithilfe der ID- und Klassenselektoren. Beim Festlegen eines Stils für ein einzelnes eindeutiges Element wird der ID-Selektor verwendet. Beim Festlegen eines Stils für eine Gruppe von Elementen wird der Klassenselektor verwendet.
Was ist eine Klasse?
In CSS kann der Klassenselektor verwendet werden, um Ihren eigenen Stil auf eine Gruppe von Elementen anzuwenden. Der Klassenselektor wird verwendet, um einen bestimmten Stil auf eine Reihe von Elementen mit derselben Klasse anzuwenden. In CSS wird ein Klassenselektor durch einen Punkt (.) gekennzeichnet. Es folgt ein Beispiel für einen in CSS definierten Klassenselektor.
.meine_klasse {
Farbe: blau;
Schriftstärke: fett;
}
HTML kann auf die in CSS definierte Klasse verweisen, indem das Attribut class wie unten gezeigt verwendet wird.
Das ist meine Formatierung
Das ist nochmal meine Formatierung
Wie oben gezeigt, kann dieselbe Klasse für mehrere Elemente verwendet werden und ein einzelnes Element kann mehrere Klassen verwenden. Wenn mehrere Klassen in demselben Element verwendet werden, werden die Klassen in das class-Attribut eingefügt, das durch ein Leerzeichen getrennt ist, wie unten gezeigt.
Dies ist meine Formatierung mit zwei Klassen
Was ist eine ID?
In CSS kann der ID-Selektor verwendet werden, um Ihren eigenen Stil auf ein einzelnes eindeutiges Element anzuwenden. In CSS wird ein ID-Selektor durch einen Hash () identifiziert. Es folgt ein Beispiel für einen in CSS definierten ID-Selektor.
meine_ID {
Farbe: rot;
text-align:right;
}
HTML kann auf den in CSS definierten ID-Selektor verweisen, indem das Attribut id wie unten gezeigt verwendet wird.
Dies ist mein Formatierungsformular für einen ID-Selektor
IDs sind eindeutig. Daher kann jedes Element nur eine einzige ID haben und jede Seite kann nur ein einziges Element mit dieser spezifischen ID haben. IDs haben ein wichtiges Merkmal, das mit einem Browser verwendet werden kann. Wenn die Seiten-URL einen Hash-Wert enthält (z. B. https://myweb.commy_id), versucht der Browser, das Element mit der ID „my_id“automatisch zu finden und die Webseite zu scrollen, um dieses Element anzuzeigen. Dies ist einer der Gründe, warum die Seite ein einzelnes Element mit dieser spezifischen ID haben sollte, damit der Browser dieses Element finden kann.
Was ist der Unterschied zwischen Klasse und ID?
Obwohl sowohl der Klassenselektor als auch der ID-Selektor verwendet werden können, um Ihren eigenen Stil auf Elemente einer Webseite anzuwenden, weisen sie einige wichtige Unterschiede auf. Der Klassenselektor kann verwendet werden, um Ihren eigenen Stil auf eine Gruppe von Elementen anzuwenden, während der ID-Selektor verwendet wird, um einen Stil auf ein einzelnes, eindeutiges Element anzuwenden. Bei der Verwendung von IDs kann jedes Element nur eine einzige ID haben und jede Seite kann nur ein einzelnes Element mit dieser spezifischen ID haben, aber Klasse könnte für mehrere Elemente verwendet werden und ein einzelnes Element kann mehrere Klassen verwenden. Außerdem kann ID verwendet werden, um eine Seite automatisch zu scrollen, um das Element mit dieser ID anzuzeigen, aber dies ist mit dem Klassenselektor nicht möglich.
