Pytanie sprawdza umiejętność powiązania definicji listy w HTML (struktura ul/ol oraz elementy li) z tym, jak lista jest renderowana po zastosowaniu CSS. W praktyce, aby wskazać poprawny "Efekt", należy przejść przez analizę:
- Rodzaj listy: czy jest to lista nieuporządkowana (ul) czy uporządkowana (ol). Ma to znaczenie dla domyślnych markerów (punkty vs numeracja) i tego, czy CSS je nadpisuje.
- Markery (punktory/numeracja): właściwość list-style-type zmienia typ markera (np. kółka, kwadraty, cyfry), a list-style-image może podstawić grafikę. Jeśli w definicji występuje zmiana markerów, właściwy efekt musi to pokazywać.
- Położenie markera: list-style-position: outside zwykle trzyma marker "na zewnątrz" obszaru treści elementu li, a inside powoduje, że marker staje się częścią bloku tekstu i wpływa na łamanie wierszy. To często widać przy długich liniach tekstu i przy kolorowych tłach.
- Odstępy i wcięcia: przeglądarki stosują domyślne marginesy i paddingi dla ul/ol. Reguły CSS typu margin i padding (albo ich zerowanie) zmieniają wcięcie listy względem otoczenia oraz odstęp między elementami.
- Selekcja elementów: inny będzie rezultat, gdy styl dotyczy ul/ol, a inny gdy dotyczy li (np. tło ustawione na li pokoloruje każdy wiersz/pozycję osobno, a tło na ul pokoloruje cały obszar listy).
Odpowiedź "Efekt 4." jest poprawna wtedy, gdy jako jedyna wizualizacja jest spójna ze wszystkimi kluczowymi konsekwencjami reguł CSS użytych do formatowania listy: markerami, ich pozycją, wcięciem oraz ewentualnym tłem/ramkami.
Pozostałe efekty są niepoprawne w typowej sytuacji, gdy pokazują inną kombinację cech niż ta wynikająca z kodu (np. inny typ markerów, marker w innym miejscu, brak/większe wcięcie, styl zastosowany do innego elementu niż zakładano). Przy rozwiązywaniu na egzaminie warto najpierw "wypisać" w głowie, co zmienia każda właściwość CSS, a dopiero potem porównać z obrazkami efektów.
