Unterschied zwischen id und class in CSS
Share
Das Hauptunterschied zwischen id und class in CSS ist das id wird verwendet, um Stil auf ein eindeutiges Element anzuwenden, während die Klasse verwendet wird, um Stil auf mehrere Elemente anzuwenden.
In der Webentwicklung gibt es verschiedene Technologien. Die wichtigsten Sprachen für die Entwicklung von Websites sind HTML, CSS und JavaScript. HTML steht für Hyper Text Markup Language. Es hilft, die Struktur der Webseite zu entwickeln. JavaScript hilft, die Webseite dynamischer zu gestalten. CSS steht für Cascading Style Sheets. Es hilft, Stile hinzuzufügen und die Webseiten besser präsentierbar zu machen. Die CSS-Regeln gelten für die HTML-Elemente. Außerdem helfen die CSS-Selektoren, die Elemente zu finden und den erforderlichen Stil auf die HTML-Tags anzuwenden. ID und Klasse sind zwei Arten von Selektoren.
Wichtige Bereiche
1. Was sind CSS-Regeln?
- Definition, Beispiel
2. Was ist id
- Definition, Beispiel
3. Was ist Klasse?
- Definition, Beispiel
4. Unterschied zwischen ID und Klasse
- Vergleich der wichtigsten Unterschiede
Schlüsselbegriffe
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 in einem Paar geschweiften Klammern wie folgt.
Selektor Eigenschaft: Wert;
Wähler - Hilft bei der Identifizierung des Elements, auf das der Stil angewendet werden soll
Eigentum - Ein Attribut Alle HTML-Attribute werden in CSS-Eigenschaften konvertiert. Einige Beispiele sind Farbe, Textausrichtung, Rahmen usw.
Wert - Wert ist das, was der Eigenschaft zugewiesen wird. Beispielsweise kann der Eigenschaftsfarbe Blau zugewiesen 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, muss 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, prüft er die ID des Elements h1, das in der CSS-Datei header1 ist. Dann wendet er die definierte CSS-Regel auf das Element h1 an. Daher erscheint der Text Hello World in der Farbe Blau.
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 es ein. (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, prüft er die Klasse des h1-Elements (Header1 in der CSS-Datei). Dann wendet er 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 class 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 lautet #id css-Deklarationen; . Die Klassensyntax lautet .class css-Deklarationen.
Verwendungszweck
Darüber hinaus wird mit id das Styling auf ein bestimmtes Element angewendet. Die Verwendung von Klassen ist das Anwenden von Stil auf mehrere Elemente.
Fazit
Die ID und die Klasse sind zwei Selektoren in CSS, mit denen die HTML-Elemente mit Stil versehen werden können. Der Hauptunterschied zwischen id und class in CSS besteht darin, dass id zum Anwenden von Stil auf ein eindeutiges Element verwendet wird, während class zum Anwenden von Stil auf mehrere Elemente verwendet wird.
Referenz:
1. "CSS-Syntax und Selectors". Online-Tutorials von W3Schools, Hier verfügbar.
Bildhöflichkeit:
1. „CSS.3" Von Nikotaf - Eigene Arbeit (CC BY-SA 4.0) über Commons Wikimedia
