Einführung in Selektoren

Teil des Abschnitts Styling with CSS der HTML-Journey von Coddy — Lektion 10 von 76.

In CSS sind Selektoren Muster, die verwendet werden, um die HTML-Elemente auszuwählen, die Sie formatieren möchten. Sie sind ein entscheidender Teil von CSS-Regeln, da sie bestimmen, auf welche Elemente die Stile angewendet werden.

Es gibt verschiedene Arten von Selektoren, von denen jeder Elemente auf unterschiedliche Weise anspricht. Das Verständnis von Selektoren ist grundlegend für die Beherrschung von CSS und die Erstellung gut gestalteter Webseiten.

Hier ist eine grundlegende CSS-Regel mit einem Selektor:

selector {
    property: value;
}

selector: Zielt auf die HTML-Elemente ab, die gestaltet werden sollen.
property: Das Stil-Attribut, das Sie ändern möchten (z. B. color, font-size).
value: Der Wert, den Sie für die Eigenschaft festlegen möchten (z. B. blue, 16px).

Zum Beispiel:

p {
    color: blue;
    font-size: 16px;
}

In diesem Beispiel ist p der Selektor, der auf alle Absatzelemente abzielt. Die Deklarationen legen die Textfarbe auf Blau und die Schriftgröße auf 16 Pixel für alle Absätze fest.

Aufgabe

Einfach

Ihnen wird ein HTML-Dokument zur Verfügung gestellt. Verwenden Sie internes CSS, um das Dokument mit den folgenden Eigenschaften zu gestalten:

Setzen Sie die Hintergrundfarbe aller h1-Überschriften auf green.
Setzen Sie die Textfarbe aller h1-Überschriften auf white.
Setzen Sie die Schriftgröße aller Absätze (p) auf 18px.

Ihnen wird ein CSS-Startcode dafür zur Verfügung gestellt.

Spickzettel

CSS-Selektoren sind Muster, mit denen HTML-Elemente ausgewählt werden, die Sie gestalten möchten. Sie bestimmen, auf welche Elemente die Stile angewendet werden.

Grundlegende CSS-Regelstruktur:

selector {
    property: value;
}

selector: Zielt auf die zu gestaltenden HTML-Elemente ab
property: Das Stilattribut, das Sie ändern möchten (z. B. color, font-size)
value: Der Wert, den Sie für die Eigenschaft festlegen möchten (z. B. blue, 16px)

Beispiel, das auf alle Absatzelemente abzielt:

p {
    color: blue;
    font-size: 16px;
}

Probier es selbst

<!DOCTYPE html>
<html>
<head>
    <title>Selectors</title>
    <style>
        h1 {
            
        }
        p {
            
        }
    </style>
</head>
<body>
    <h1>John Doe</h1>
    <p>Web Developer</p>
</body>
</html>