Aktiv-Styles

Teil des Abschnitts CSS Mastery der HTML-Journey von Coddy — Lektion 10 von 43.

Die Pseudo-Klasse :active wendet Stile auf ein Element an, wenn es vom Benutzer aktiviert wird, typischerweise wenn ein Benutzer auf ein Element klickt und die Maustaste gedrückt hält.

Zum Beispiel:

<button class="action-button">Click Me!</button>

Fügen Sie CSS hinzu, um die Schaltfläche zu gestalten, wenn sie aktiv ist:

.action-button {
  background-color: blue;
}
.action-button:active {
  background-color: darkblue;
}

Wenn Sie auf die Schaltfläche klicken und diese gedrückt halten, ändert sie ihre Farbe von Blau zu Dunkelblau. Dies gibt den Benutzern eine visuelle Rückmeldung, dass ihre Aktion registriert wird.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.

Aufgabe

Einfach

Schreibe CSS für die Klasse .special-link, die die folgenden Stile hinzufügt, wenn der Link aktiv ist:

Ändert die Textfarbe in #e74c3c
Fügt einen Textschatten von 1px 1px 2px rgba(0,0,0,0.3) hinzu

Spickzettel

Die Pseudoklasse :active wendet Stile auf ein Element an, wenn es vom Benutzer aktiviert wird, normalerweise beim Klicken und Gedrückthalten der Maustaste.

.action-button {
  background-color: blue;
}
.action-button:active {
  background-color: darkblue;
}

Dies bietet eine visuelle Rückmeldung, dass die Aktion des Benutzers registriert wird.

Probier es selbst

<!DOCTYPE html>
<html>
<head>
    <title>Active Pseudo-class</title>
    <style>
        /* Write your CSS here */
        
    </style>
</head>
<body>
    <a href="#" class="special-link">Interactive Link</a>
</body>
</html>

Teste dich selbst

Diese Lektion enthält ein kurzes Quiz. Starte die Lektion, um es zu beantworten und deinen Fortschritt zu speichern.