CSS id und class

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.




Finden Sie das nützlich?

Ähnliche Artikel