Cascading Style Sheets (CSS) sind ein wichtiges Werkzeug zum Erstellen und Gestalten von Webseiten. Eines der wichtigsten Konzepte in CSS sind Selektoren, mit denen Sie angeben können, auf welche Seitenelemente bestimmte Stile angewendet werden sollen.
Die zwei häufigsten Arten von Selektoren in CSS sind der Selektor nach id und der Selektor nach Klasse. Sie haben ähnliche Funktionen, aber es gibt einige signifikante Unterschiede, die bei der Arbeit mit ihnen berücksichtigt werden müssen.
id ist ein eindeutiger Bezeichner für ein bestimmtes Seitenelement. Es wird verwendet, um auf ein bestimmtes Element über seinen eindeutigen Namen zuzugreifen, der mit dem Attribut "id" im HTML-Markup angegeben wird. Dadurch können Sie Stile nur für ein bestimmtes Element mit einer bestimmten ID suchen und anwenden.
class im Gegensatz zu einer ID kann sie auf mehrere Elemente auf einer Seite angewendet werden. Mehrere Elemente können dieselbe Klasse verwenden, sodass Sie dieselben Stile auf sie anwenden können. Verwenden Sie das Attribut "class" im HTML-Markup, um eine Klasse anzugeben.
Was unterscheidet id von class in css?
die ID wird verwendet, um ein bestimmtes Element auf der Seite auszuwählen. Der ID-Wert muss innerhalb des gesamten Dokuments eindeutig sein, d. H. Nur ein Element kann eine bestimmte ID haben. In CSS verwenden wir den Selektor #name-id, um ein Element anhand seiner id auszuwählen.
class wird verwendet, um eine Gruppe von Elementen auszuwählen, die einen gemeinsamen Stil haben. Ein class-Wert kann mehreren Elementen auf einer Seite zugewiesen werden, und sie können die gleichen Klassen haben, um allgemeine Stile auf sie anzuwenden. In CSS verwenden wir einen Selektor, um Elemente nach ihrer class auszuwählen.der Name ist eine Klasse .
Der Hauptunterschied zwischen id und class liegt in ihrer Einzigartigkeit und Anwendung. Die Verwendung von ID sollte nur eingeschränkt sein, wenn Sie ein bestimmtes Element auf einer Seite auswählen und formatieren möchten, z. B. um einem Formularelement oder Link eine eindeutige ID hinzuzufügen.
Auf der anderen Seite wird class normalerweise auf eine Gruppe von Elementen angewendet, um allgemeine Stile anzuwenden. Wenn wir beispielsweise mehrere Absätze haben, die den gleichen Stil haben müssen, fügen wir ihnen eine generische class hinzu und definieren die Stile für diese Klasse in CSS.
Verwenden Sie also id, um ein bestimmtes Element auszuwählen, und class, um eine Gruppe von Elementen mit einem gemeinsamen Stil in CSS auszuwählen.
Eindeutige Kennungen
ID stellt einen eindeutigen Bezeichner für ein Element auf einer Webseite dar. Dies bedeutet, dass jede ID innerhalb einer Seite eindeutig sein muss, dh es kann keine zwei Elemente mit derselben ID geben. Auf diese Weise können Sie ein bestimmtes Element auf der Seite genau definieren und stilisieren.
Zum Beispiel: wenn wir ein Element mit der ID "header" haben, können wir seine ID in CSS verwenden, um Stile nur auf dieses Element anzuwenden: #header < color: red; >.
Klassen Im Gegensatz zu Bezeichnern können Sie einer Vielzahl von Elementen auf einer Webseite zugewiesen werden. Dies bedeutet, dass mehrere Elemente dieselbe Klasse haben können. Mithilfe von Klassen können Sie Elemente gruppieren und allgemeine Stile auf sie anwenden.
Zum Beispiel: wenn wir mehrere Elemente mit der Klasse "content" haben, können wir diese Klasse in CSS verwenden, um allgemeine Stile auf alle diese Elemente anzuwenden: .content < font-size: 16px; >.
Die Wahl zwischen der Verwendung von ID und Klasse hängt von der jeweiligen Situation ab. Wenn Sie genau ein bestimmtes Element stylen müssen, verwenden Sie ID. Wenn Sie dieselben Stile auf mehrere Elemente anwenden möchten, verwenden Sie Klassen. Und denken Sie daran, dass ID innerhalb einer Seite eindeutig sein muss, während Klassen auf mehreren Elementen verwendet werden können.
Anwenden von Klassen auf mehrere Elemente
Klassen in CSS bieten die Möglichkeit, Stile auf mehrere Elemente auf derselben Seite anzuwenden. Klassen werden mit einem Attribut definiert class und werden auf Tags angewendet, um anzuzeigen, dass diese Elemente zur gleichen Gruppe gehören.
Der Vorteil von Klassen besteht darin, dass sie die gleichen Stile für mehrere Elemente verwenden können, ohne dass Sie die Stile für jedes Element separat erneut angeben müssen. Darüber hinaus können Klassen auf verschiedenen Seiten neu verwendet werden, was die Entwicklung und Wartung von Stilen erheblich vereinfacht.
Beispiel für die Verwendung einer Klasse:
.highlight Этот абзац будет выделен желтым фоном.
Этот абзац не будет выделен.
Этот абзац тоже будет выделен желтым фоном.
In diesem Beispiel ist die Klasse highlight gilt für zwei Absätze. Infolgedessen haben diese Absätze einen gelben Hintergrund. Der dritte Absatz ohne Klasse wird nicht hervorgehoben, da der Stil nur auf Elemente mit Klasse angewendet wird highlight.
Dies ist nur eines von vielen Beispielen für die Verwendung von Klassen in CSS. Mithilfe von Klassen können Sie die Stile mehrerer Elemente einfach verwalten und das Layout und Styling von Webseiten erheblich vereinfachen.
Stiländerungen priorisieren
Beim Entwerfen von Webseiten müssen Sie häufig verschiedene Stile auf Elemente anwenden. Es gibt zwei Möglichkeiten, Stile in CSS anzugeben: mit id und class. Sie haben jedoch unterschiedliche Prioritäten beim Anwenden von Stilen auf Elemente.
Selektoren mit id haben eine höhere Priorität als Selektoren mit class. Wenn Stile sowohl über id als auch über class auf dasselbe Element angewendet werden, haben die mit id angegebenen Stile ein größeres Gewicht und werden vorrangig auf die über class angegebenen Stile angewendet.
| Stile, die über id angewendet werden | Stile, die über class angewendet werden | Die resultierenden Stile, die auf das Element angewendet werden |
|---|---|---|
| Angegebene Stile | Keine Stile | Standardstile |
| Angegebene Stile | Über class angegebene Stile | Standardstile |
| Durch id angegebene Stile | Über class angegebene Stile | Standardstile |
Daher hängt die Priorität von Stiländerungen davon ab, wie die Stile angegeben werden. Wenn Sie bestimmten Stilen die höchste Priorität geben möchten, sollten Sie einen Selektor mit id verwenden. Wenn Sie allgemeinere Stile auf mehrere Elemente anwenden möchten, ist es bequemer, Selektoren mit class zu verwenden.
