In unserem vorherigen Kapitel haben wir etwas über Selektoren gelernt. Jetzt werden wir über die Selektoren id und class, die häufig verwendet werden, um Webseitenelemente zu gestalten, sprechen.
CSS-Selektor id
Der ID-Selektor ist eine eindeutige Kennung des HTML-Elements, auf das ein bestimmter Stil angewendet werden soll. Es wird verwendet, wenn nur ein einziges HTML-Element auf der Webseite einen bestimmten Stil haben soll.
Sowohl in internen als auch in externen Style Sheets verwenden wir Hash (#) ür den ID-Selektor.
Lassen Sie uns ein Beispiel ansehen.
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
#blue {
color: #1c87c9;
}
</style>
</head>
<body>
<p>Erster Absatz.</p>
<p id="blue">Zweiter Absatz.</p>
<p>Dritter Absatz.</p>
</body>
</html>Wie Sie sehen, haben wir blue als ID-Selektor für den zweiten Absatz (id="blue") zugewiesen und seinen Stil mit der Farbeigenschaft - #blue {color: #1c87c9;} im Abschnitt <head> angegeben. Das bedeutet, dass das HTML-Element mit dem id-Selektor blau in #1c87c9 angezeigt wird.
Überprüfen Sie diesen Code in unserem HTML-Online-Editor, um zu sehen, dass die Farbe des zweiten Absatzes #1c87c9 ist.
CSS-Selektor class
Class-Selektor wird verwendet, wenn der gleiche Stil auf mehrere HTML-Elemente auf derselben Webseite angewendet werden soll.
Sowohl in internen als auch in externen Style Sheets verwenden wir Punkt (.) für die Klassenauswahl.
Lassen Sie uns ein Beispiel ansehen.
<!DOCTYPE html>
<html>
<head>
<title>Der Titel des Dokuments</title>
<style>
.blue {
color: #1c87c9;
}
</style>
</head>
<body>
<h2 class="blue">Das ist eine Überschrift.</h2>
<p>Zweiter Absatz.</p>
<p class="blue">Dritter Absatz.</p>
</body>
</html>In unserem Beispiel wird der Selektor class zweimal verwendet, in der Überschrift und im Absatz.
Wie Sie sehen, haben wir blue als class Selektor (class="blue") zugewiesen, und seinen Stil mit der Farbeigenschaft - .blue {color: #1c87c9;} im Abschnitt <head> angegeben. Das bedeutet, dass die Elemente mit dem Klassenwahlschalter blau in #1c87c9 angezeigt werden.
In unserem Beispiel sind der Titel und der dritte Absatz #1c87c9. Überprüfen Sie es in unserem HTML-Online-Editor.
Übe dein Wissen
