TablicaPro / karta pracy ucznia / CSS

Kaskada i specyficzność CSS — dlaczego styl nie działa?

Klasa: __________ Numer: __________ Data: __________

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

Kod do rozpoczęcia pracy

p { color: red; }
.x { color: blue; }
#p1 { color: green; }

Zadanie 1

Bez uruchamiania strony zapisz kolor akapitów #p1-#p6. Dla każdego wskaż wygrywającą regułę i jej specyficzność.

Zadanie 2

W F12 (panele Styles i Computed) sprawdź przewidywania. Zapisz, które reguły są przekreślone i dlaczego.

Zadanie 3

Zmień kolor akapitu #p2 na fioletowy bez !important i bez zmiany HTML. Wskaż, jak zwiększyłeś specyficzność.

Sprawdź przed oddaniem

Zadanie 1: sześć przewidywań 3 pkt, specyficzność reguł 1 pkt; zadanie 2: sprawdzenie w F12 i wyjaśnienie przekreśleń 2 pkt; zadanie 3: reguła bez !important 2 pkt, wyjaśnienie 1 pkt; poprawny zapis CSS 1 pkt. Razem 10 pkt.

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

Drukuj kartę pracy