Style aktywne
Część sekcji Mistrzowskie opanowanie CSS ścieżki HTML w Coddy. Lekcja 10 z 43.
Pseudoklasa :active stosuje style do elementu, gdy użytkownik go aktywuje, zazwyczaj klikając element i przytrzymując przycisk myszy.
Na przykład:
<button class="action-button">Click Me!</button>Dodaj CSS, aby ostylować przycisk, gdy jest aktywny:
.action-button {
background-color: blue;
}
.action-button:active {
background-color: darkblue;
}Gdy klikniesz przycisk i przytrzymasz go, zmieni kolor z niebieskiego na ciemnoniebieski. Dzięki temu użytkownicy otrzymują wizualną informację zwrotną, że ich działanie jest rejestrowane.
Wyzwanie
ŁatwyNapisz CSS dla klasy .special-link, który dodaje następujące style, gdy link jest aktywny:
- Zmienia kolor tekstu na #e74c3c
- Dodaje cień tekstu o wartości 1px 1px 2px rgba(0,0,0,0.3)
Spróbuj swoich sił
<!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>
Sprawdź sięTa lekcja zawiera krótki quiz. Zacznij lekcję, żeby na niego odpowiedzieć i śledzić swoje postępy.
Wszystkie lekcje w sekcji Mistrzowskie opanowanie CSS
1Opanowanie selektorów – łączenie
WprowadzenieSelektor potomkaSelektor dzieckaSelektor sąsiadującego rodzeństwaSelektor ogólnego rodzeństwaWyzwanie podsumowujące7Twórz za pomocą CSS Grid
Podstawy GridRozmieszczanie elementów w wierszach siatkiNazwane obszaryWyzwanie podsumowujące2Interaktywne pseudoklasy
PseudoklasyEfekty najechania kursoremEfekty fokusuStyle aktywneWyzwanie podsumowującePoćwicz samodzielnie: Edytor online Web