Unterschied zwischen Klasse und ID

Anonim

Klasse vs. ID

Cascading Style Sheets (CSS) ist eine Sprache, die das Aussehen und die Formatierung eines mit einer Auszeichnungssprache geschriebenen Dokuments beschreibt. CSS wird häufig verwendet, um in HTML geschriebene Webseiten zu gestalten. Mit CSS können Sie eigene Stylesheets angeben und Styles für HTML-Elemente anwenden. Dies erfolgt mithilfe der ID- und Klassenselektoren. Bei der Angabe eines Stils für ein einzelnes eindeutiges Element wird der ID-Selektor verwendet. Bei der Angabe eines Stils für eine Gruppe von Elementen wird der Klassenselektor verwendet.

Was ist eine Klasse?

In CSS kann der Klassenselektor verwendet werden, um einen eigenen Stil auf eine Gruppe von Elementen anzuwenden. Mit dem Class Selector wird ein bestimmter Stil auf eine Gruppe von Elementen mit derselben Klasse angewendet. In CSS wird ein Klassenselektor durch einen Punkt (.) Identifiziert. Es folgt ein Beispiel für einen in CSS definierten Klassenselektor.

. my_class {

Farbe: blau;

font-weight: fett;

}

HTML kann auf die in CSS definierte Klasse verweisen, indem Sie die Attributklasse wie unten gezeigt verwenden.

Dies ist meine Formatierung

Dies ist 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 im selben Element verwendet werden, werden die Klassen in das Klassenattribut eingefügt, das durch ein Leerzeichen begrenzt wird (siehe unten).

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.

#my_ID {

Farbe: rot;

text-align: right;

}

HTML kann auf den in CSS definierten ID-Selektor verweisen, indem Sie die Attribut-ID wie unten gezeigt verwenden.

Dies ist mein Formatierungsformular. Ein ID-Selektor

IDs sind eindeutig. Daher kann jedes Element nur eine einzige ID haben und jede Seite kann nur ein einzelnes Element mit dieser spezifischen ID enthalten. IDs haben ein wichtiges Merkmal, das mit einem Browser verwendet werden kann. Der Browser wird versuchen, das Element automatisch mit der ID "my_id" zu lokalisieren und die Webseite zu scrollen, um das Element anzuzeigen (zB // myweb. Dies ist ein Grund, warum die Seite ein einzelnes Element mit dieser bestimmten 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 einen eigenen Stil auf Elemente in einer Webseite anzuwenden, haben sie einige wichtige Unterschiede. Klassenselektor kann verwendet werden, um einen 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 enthalten. Klasse kann jedoch für mehrere Elemente verwendet werden, und ein einzelnes Element kann mehrere Klassen verwenden.Darüber hinaus kann ID verwendet werden, um eine Seite automatisch zu scrollen, um das Element mit dieser ID anzuzeigen. Dies ist jedoch mit dem Klassenselektor nicht möglich.