Übung — Selektoren

Abgeschlossen

In der vorherigen Übung haben Sie Stile auf Elemente wie html und h1 angewendet. Häufig müssen Sie beim Auftragen des Stils etwas schmaler sein.

In dieser Übung legen Sie den Stil für die Abschnitte und Links zu Social Media und Erlebnis auf der Seite fest.

Anwenden von Formatvorlagen auf Klassen und IDs

Sie beginnen damit, den Stil für die Abschnitte "Social Media" und "Erlebnis" festzulegen.

1. Kehren Sie zum „vscode.dev“-Fenster zurück, das Sie in der vorherigen Übung verwendet haben.

2. Beachten Sie in index.htmldas section Element mit der ID social-media in Zeile 10. Sie wenden einen Stil auf diesen Abschnitt an, um die Farbe auf Blau festzulegen.

3. Fügen Sie am Ende von style.css das folgende CSS hinzu, um die Farbe für das social-media-Element festzulegen:

   #social-media {
       color: blue;
   }
   

4. Die Seite wird aktualisiert, wobei der Inhalt im Social-Media-Bereich blau wird.

5. Beachten Sie in index.htmldie beiden Abschnitte in den Zeilen 28 und 32 mit der Klassenerfahrung; Sie wenden Stil auf diese Abschnitte an, um die Schriftart kursiv zu setzen.

6. Fügen Sie am Ende von style.css das folgende CSS hinzu, um die Schriftart für die Elemente mit der experience-Klasse zu ändern:

   .experience {
       font-style: italic;
   }
   

7. Die Seite wird aktualisiert, wobei die Schriftart in der Benutzeroberfläche auf kursiv gesetzt wird.

Verwenden von Pseudoklassen zum Festlegen des Verknüpfungsstils

Viele Webentwickler*innen ändern die Farbe und den Stil von Hyperlinks auf einer Seite. Sie legen die Farbe für Links auf Grün fest und markieren Links, wenn ein Benutzer den Mauszeiger darüber bewegt.

1. Fügen Sie am Ende von style.css das folgende CSS hinzu, damit Links immer grün hervorgehoben werden.

   a:visited {
       color: green;
   }
   
   a:link {
       color: green;
   }
   

2. Die Seite wird aktualisiert, um Links grün hervorzuheben.

3. Fügen Sie das folgende CSS am Ende von style.css hinzu, um Links hervorzuheben, wenn der Mauszeiger darüber bewegt wird:

   a:hover {
       background-color: yellow;
   }
   

4. Bewegen Sie den Mauszeiger über die Links auf der Seite, was dazu führt, dass die Links hervorgehoben werden.

Überprüfung

Der folgende Screenshot zeigt die Ergebnisse der angewendeten CSS. Sie haben Klassen, IDs und Pseudoklassen verwendet, um Stile auf bestimmte Elemente und logische Elementgruppen anzuwenden.