Die Hauptunterschied zwischen id und class in CSS ist, dass die id wird verwendet, um Stil auf ein eindeutiges Element anzuwenden, während die Klasse verwendet wird, um Stil auf mehrere Elemente anzuwenden.

Es gibt verschiedene Technologien in der Webentwicklung. Die wichtigsten Sprachen für die Entwicklung von Websites sind HTML, CSS und JavaScript. HTML steht für Hypertext Markup Language. Es hilft, die Struktur der Webseite zu entwickeln. JavaScript hilft dabei, die Webseite dynamischer zu gestalten. CSS steht für Cascading Stylesheets. Es hilft, Stile hinzuzufügen und die Webseiten präsentabler zu machen. Für die HTML-Elemente gelten die CSS-Regeln. Außerdem helfen die CSS-Selektoren, die Elemente zu finden und den erforderlichen Stil auf die HTML-Tags anzuwenden. id und class sind zwei Arten von Selektoren.

Klasse, CSS-Regeln, ID

Was sind CSS-Regeln?

CSS besteht aus einer Reihe von Regeln. Der Browser kann diese Regeln interpretieren und auf die angegebenen Elemente im Dokument anwenden. Eine CSS-Stilregel besteht aus drei Abschnitten. Sie sind Selektor, Eigenschaft und Wert. Deklaration bezieht sich auf die Kombination von Eigentum und Wert. Sie erscheinen wie folgt in einem Paar geschweifter Klammern.

Selektor { Eigenschaft: Wert; }

Wähler – Hilft, das Element zu identifizieren, um den Stil anzuwenden

Eigentum – Ein Attribut. Alle HTML-Attribute werden in CSS-Eigenschaften umgewandelt. Einige Beispiele sind Farbe, Textausrichtung, Rahmen usw.

Wert – Wert ist das, was der Eigenschaft zugewiesen wird. Beispielsweise kann der Eigenschaftsfarbe Blau zugeordnet werden.

Was ist id

Der Programmierer kann eine Stilregel basierend auf der ID der Elemente definieren. Alle Elemente mit derselben ID werden mit dem definierten Stil angewendet. Um ein Element mit einer bestimmten ID auszuwählen, sollte ein # (Hash)-Symbol gefolgt von der ID des Elements angezeigt werden.

Angenommen, die HTML-Datei enthält eine Anweisung wie folgt.

Die CSS-Datei enthält den folgenden Code.

#header1{

Farbe blau;

}

Wenn der Browser die HTML-Anweisung interpretiert, überprüft er die ID des h1-Elements, das in der CSS-Datei header1 ist. Dann wendet es die definierte CSS-Regel auf das h1-Element an. Daher wird der Text Hello World in der Farbe Blau angezeigt.

Die ID ist innerhalb der Seite eindeutig. Daher wird der ID-Selektor für ein eindeutiges Element verwendet.

Was ist Klasse

Ähnlich wie bei der ID kann der Programmierer die Stilregeln basierend auf der Klasse des Elements definieren. Alle Elemente mit derselben Klasse werden mit einem definierten Stil angewendet. Um ein Element mit einer bestimmten Klasse auszuwählen, sollte eine. (Punkt) Symbol gefolgt vom Namen der Klasse.

Angenommen, die HTML-Datei enthält die folgenden Anweisungen.

Die CSS-Datei enthält den folgenden Code.

.header1{

Farbe blau;

}

Wenn der Browser die HTML-Anweisung interpretiert, überprüft er die Klasse des h1-Elements, die in der CSS-Datei header1 ist. Dann wendet es die definierte CSS-Regel auf alle h1-Elemente an. Daher erscheinen die Texte Hello World 1 und Hello World 2 in der Farbe Blau.

Es ist möglich, dieselbe Klasse für mehrere Elemente zu verwenden. Daher wird der Klassenselektor für mehrere Elemente verwendet.

Unterschied zwischen ID und Klasse in CSS

Definition

id ist ein Selektor in CSS, der das Element mit einer angegebenen ID formatiert, während class ein Selektor in CSS ist, der die ausgewählten Elemente mit einer angegebenen Klasse formatiert.

Syntax

Die ID-Syntax ist #id{ css-Deklarationen; }. Die Klassensyntax ist.class { css-Deklarationen; }

Verwendungszweck

Darüber hinaus dient die Verwendung von id dazu, einem bestimmten Element ein Styling zuzuweisen. Die Verwendung der Klasse besteht darin, Stil auf mehrere Elemente anzuwenden.

Abschluss

Die id und die Klasse sind zwei Selektoren in CSS, die das Anwenden von Stilen auf die HTML-Elemente ermöglichen. Der Hauptunterschied zwischen id und class in CSS besteht darin, dass id verwendet wird, um Stil auf ein einzelnes Element anzuwenden, während Klasse verwendet wird, um Stil auf mehrere Elemente anzuwenden.

Referenz:

1. „CSS-Syntax und Selektoren.“ W3Schools Online-Web-Tutorials, hier verfügbar.

Bild mit freundlicher Genehmigung:

1. „CSS.3“ von Nikotaf – Eigene Arbeit (CC BY-SA 4.0) über Commons Wikimedia