Grundlagen von CSS-Selektoren

Einführung

Willkommen zum Lab "Grundlagen von CSS-Selektoren"! Cascading Style Sheets (CSS) ist eine Kerntechnologie des World Wide Web, die zur Beschreibung der Darstellung eines Dokuments verwendet wird, das in einer Auszeichnungssprache wie HTML geschrieben ist.

CSS-Selektoren sind Muster, die verwendet werden, um die gewünschten HTML-Elemente auszuwählen und zu gestalten. Die Beherrschung von Selektoren ist eine grundlegende Fähigkeit für jeden Webentwickler. In diesem Lab lernen Sie, wie Sie die gängigsten Arten von CSS-Selektoren verwenden, um eine einfache Webseite zu gestalten.

Sie werden üben:

• Element-Selektor: Zielt auf Elemente anhand ihres Tag-Namens ab.
• Klassen-Selektor: Zielt auf Elemente mit einem bestimmten class-Attribut ab.
• ID-Selektor: Zielt auf ein einzelnes Element mit einem bestimmten id-Attribut ab.
• Gruppierungs-Selektor: Wendet dieselben Stile auf mehrere Selektoren an.
• Nachfahren-Selektor: Zielt auf Elemente ab, die Nachfahren eines anderen Elements sind.

Die Laborumgebung wurde mit einer index.html-Datei vorkonfiguriert. Ihre Aufgabe ist es, CSS-Code in der styles.css-Datei zu schreiben, um die Seite zu gestalten. Sie können Ihre Änderungen in Echtzeit in der Registerkarte Web 8080 in der oberen linken Ecke der Benutzeroberfläche in der Vorschau anzeigen.

Elementselektor für p-Tag verwenden

In diesem Schritt verwenden Sie einen Element-Selektor, um allen <p>-Elementen (Absätzen) auf der Seite einen Stil zuzuweisen. Element-Selektoren sind der grundlegendste Selektortyp; sie wählen HTML-Elemente anhand ihres Tag-Namens aus.

Suchen Sie zuerst die Datei styles.css im Dateiexplorer auf der linken Seite Ihrer WebIDE. Klicken Sie darauf, um sie im Editor zu öffnen.

Fügen Sie nun den folgenden CSS-Code zur Datei styles.css hinzu. Diese Regel wählt alle <p>-Elemente aus und ändert ihre Textfarbe zu blau.

p {
  color: blue;
}

Nachdem Sie den Code hinzugefügt haben, speichern Sie die Datei (Sie können Strg+S oder Cmd+S verwenden). Um den Effekt zu sehen, klicken Sie auf die Registerkarte Web 8080. Sie sollten sehen, dass sich der Text aller drei Absätze auf der Seite blau gefärbt hat.

Klassen-Selektor mit .klassenname anwenden

In diesem Schritt lernen Sie, einen Klassen-Selektor zu verwenden. Klassen-Selektoren sind spezifischer als Element-Selektoren. Sie wählen Elemente basierend auf dem Wert ihres class-Attributs aus. Ein Klassen-Selektor wird mit einem Punkt (.) gefolgt vom Klassennamen geschrieben.

In Ihrer index.html-Datei hat einer der Absätze das Attribut class="highlight". Wir werden diesen spezifischen Absatz ansprechen.

Fügen Sie die folgende CSS-Regel zu Ihrer styles.css-Datei hinzu. Dies wählt jedes Element mit der Klasse highlight aus und gibt ihm einen gelben Hintergrund.

.highlight {
  background-color: yellow;
}

Speichern Sie die Datei styles.css und wechseln Sie zur Registerkarte Web 8080, um Ihre Änderungen anzuzeigen. Sie werden feststellen, dass nur der Absatz mit dem Text "This is a special paragraph with a class" nun einen gelben Hintergrund hat, während die anderen Absätze unberührt bleiben.

ID-Selektor mit #idname implementieren

In diesem Schritt verwenden wir einen ID-Selektor. ID-Selektoren sind noch spezifischer als Klassen-Selektoren. Sie werden verwendet, um ein einzigartiges Element mit einem bestimmten id-Attribut auszuwählen. Ein ID-Selektor wird mit einem Rautezeichen (#) gefolgt von der ID des Elements geschrieben. Denken Sie daran, dass eine ID auf einer einzelnen HTML-Seite eindeutig sein muss.

Das <h1>-Element in index.html hat die id="main-title". Lassen Sie uns dieses stylen.

Fügen Sie die folgende CSS-Regel zu Ihrer styles.css-Datei hinzu. Diese Regel vergrößert die Schriftgröße des Haupttitels und fügt eine durchgezogene schwarze Linie darunter hinzu.

#main-title {
  font-size: 32px;
  border-bottom: 2px solid black;
}

Speichern Sie die Datei und überprüfen Sie die Registerkarte Web 8080. Sie sollten sehen, dass der Haupttitel "Welcome to Our Page" nun größer ist und eine Linie darunter hat. Dieser Stil gilt nur für das Element mit der ID main-title.

Selektoren mit Komma zur Gruppierung kombinieren

In diesem Schritt lernen Sie, wie Sie dieselben Stile auf mehrere Selektoren anwenden, ohne den Code zu wiederholen. Der Gruppierungsselektor ermöglicht Ihnen dies, indem jeder Selektor durch ein Komma getrennt wird.

Nehmen wir an, wir möchten denselben Schriftart auf die <h1>- und <h2>-Elemente auf unserer Seite anwenden. Anstatt zwei separate Regeln zu schreiben, können wir sie gruppieren.

Fügen Sie die folgende CSS-Regel zu Ihrer styles.css-Datei hinzu.

h1,
h2 {
  font-family: Arial, sans-serif;
}

Diese Regel weist den Browser an, die angegebene font-family auf alle <h1>-Elemente UND alle <h2>-Elemente anzuwenden.

Speichern Sie die Datei und aktualisieren Sie die Registerkarte Web 8080. Beobachten Sie, wie sich die Schriftart sowohl für "Welcome to Our Page" als auch für "About CSS" geändert hat.

Nachfahrenselektor wie div p hinzufügen

In diesem Schritt verwenden Sie einen Nachfahrenselektor (descendant selector). Dieser Selektor wählt alle Elemente aus, die Nachfahren eines bestimmten Elements sind. Ein Nachfahrenselektor wird erstellt, indem zwei oder mehr durch ein Leerzeichen getrennte Selektoren aufgelistet werden.

Unser index.html hat ein <p>-Element innerhalb eines <div>. Wir möchten nur diesen spezifischen Absatz stylen, nicht die anderen Absätze auf der Seite.

Fügen Sie die folgende CSS-Regel zu Ihrer styles.css-Datei hinzu. Der Selektor div p wählt jedes <p>-Element aus, das sich irgendwo innerhalb eines <div>-Elements befindet.

div p {
  font-style: italic;
}

Nachdem Sie die Datei gespeichert haben, wechseln Sie zur Registerkarte Web 8080. Sie werden sehen, dass nur der Absatz "This paragraph is inside a div..." nun kursiv geschrieben ist. Die anderen beiden Absätze bleiben unverändert, da sie keine Nachfahren eines <div> sind.

Zusammenfassung

Herzlichen Glückwunsch zum Abschluss des Labs! Sie haben die grundlegenden CSS-Selektoren erfolgreich gelernt und angewendet, um eine Webseite zu gestalten.

In diesem Lab haben Sie geübt:

• Elementselektor (p): Um alle Elemente eines bestimmten Typs zu stylen.
• Klassenselektor (.highlight): Um bestimmte Elemente zu stylen, die eine Klasse gemeinsam haben.
• ID-Selektor (#main-title): Um ein einzelnes, eindeutiges Element zu stylen.
• Gruppierungsselektor (h1, h2): Um effizient dieselben Stile auf mehrere Elemente anzuwenden.
• Nachfahrenselektor (div p): Um Elemente basierend auf ihrer Position innerhalb eines anderen Elements zu stylen.

Diese Selektoren sind die Bausteine für die Erstellung komplexer und schöner Webseitenlayouts. Sie können sie nun verwenden, um das Erscheinungsbild Ihrer HTML-Dokumente präzise zu steuern.