LU02.A02 - Pseudo-Klassen

Erstellen Sie eine Datei index.html mit folgendem Inhalt:

<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Pseudo-Klassen Übung</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <h1>Pseudo-Klassen in Aktion</h1>
    <button>Klick mich</button>
    <input type="text" placeholder="Fokus mich">
    <ul>
        <li>Element 1</li>
        <li>Element 2</li>
        <li>Element 3</li>
        <li>Element 4</li>
    </ul>
</body>
</html>

Erstellen Sie eine CSS-Datei styles.css und verknüpfe sie die CSS-Datei mit der HTML-Datei.
Fügen Sie eine Regel hinzu, die das <button>-Element verändert, wenn die Maus darüberfährt (hover).
Erstellen Sie eine Regel für button:active, sodass sich das Aussehen ändert, wenn der Button geklickt wird.
Gestalten Sie das <input>-Feld so, dass sich die Rahmenfarbe ändert, wenn es fokussiert wird (focus).
Setzen Sie eine Regel, die den ersten <li> fett macht und den letzten <li> grau färbt.
Verwenden Sie nth-child(n), um das zweite <li>-Element in einer anderen Farbe darzustellen.
Fügen Sie eine Deklaration hinzu, sodass das <h1>-Element eine andere Farbe bekommt, wenn man mit der Maus darüberfährt.
Testen Sie Ihre Lösung, indem Sie die HTML-Datei in einem Browser öffnen und mit den Elementen interagiert!

Was	Beschreibung
Produkt	HTML- und CSS-Datei
Zeit	15 Min.
Sozialform	Einzel- oder Partnerarbeit

LU02.A02 - Pseudo-Klassen

Ausgangslage

Aufgabenstellung

Rahmenbedingungen

BZZ - Modulwiki