TablicaPro / karta pracy ucznia / CSS

Pseudoklasy i pseudoelementy CSS — hover, focus i before

Klasa: __________ Numer: __________ Data: __________

Pracuj w przygotowanym pliku. Po każdej zmianie zapisz go i sprawdź rezultat.

Kod do rozpoczęcia pracy

.przycisk:hover { background: #1d4ed8; }
.lista li::before { content: "\2714  "; }
#zgoda:checked + span { font-weight: bold; }

Zadanie 1

Przyciskowi .przycisk zmień tło na #1d4ed8 po najechaniu (:hover), a polu #pole nadaj po aktywowaniu kontur 3 px #f59e0b (:focus). Sprawdź w F12 (:hov) i myszą.

Zadanie 2

Przed każdym li w .lista wstaw znak ✔ w kolorze #166534 (::before, kod \2714), a po ostatnim li tekst (ostatni) w kolorze #64748b (::after).

Zadanie 3

Gdy pole #zgoda jest zaznaczone, następny po nim span ma być pogrubiony. Zaznacz i odznacz pole, sprawdź efekt.

Sprawdź przed oddaniem

Zadanie 1: :hover 1 pkt, :focus 1 pkt, sprawdzenie w F12 1 pkt; zadanie 2: ::before z content 1 pkt, ::after na ostatnim li 2 pkt; zadanie 3: :checked + span 2 pkt; wyjaśnienie różnicy 1 pkt; poprawny zapis CSS 1 pkt. Razem 10 pkt.

Jaką zmianę w kodzie potrafisz samodzielnie wyjaśnić?

Drukuj kartę pracy