KWALIFIKACJA INF3 - STYCZEŃ 2017

PYTANIE NR 10.
Zapis CSS postaci:

sprawi, że na stronie internetowej

Ilustracja przedstawia fragment kodu CSS, który dotyczy stylizacji elementu listy na stronie internetowej.
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Ustawienie obrazu jako punktora listy realizuje się w CSS przez właściwość list-style-image wskazującą plik grafiki (np. rys.gif). Wtedy obraz zastępuje standardową kropkę/znacznik listy przy każdym elemencie, a nie staje się tłem ani ramką listy.

Pełne wyjaśnienie:

W CSS wygląd list (zarówno nienumerowanych, jak i numerowanych) można zmieniać poprzez styl punktora, czyli graficznego znacznika pojawiającego się przy elementach listy. Gdy w regule dla listy zastosuje się właściwość list-style-image z adresem pliku, przeglądarka zamiast domyślnego punktora (np. kropki) wyświetla wskazaną grafikę jako marker.

Dlatego poprawne jest stwierdzenie, że punktorem listy nienumerowanej będzie rys.gif: grafika pełni rolę "ikonki" przy każdym elemencie listy, typowo przy elementach <li> w obrębie <ul>.

Pozostałe odpowiedzi opisują inne mechanizmy formatowania, które w CSS realizuje się innymi właściwościami:

  • "rys.gif będzie stanowił ramkę" sugeruje użycie obramowania (border) lub obrazków ramek, co nie ma związku z punktorem listy.
  • "rys.gif jako tło listy" odpowiada właściwościom background-image/background, które wypełniają tłem kontener (np. <ul> lub <li>), a nie zmieniają markera.
  • "każdy punkt listy będzie miał osobne tło" również odnosi się do background-image na elementach <li> (tło elementu), a nie do markera.

Wskazówka egzaminacyjna: jeśli w treści lub kodzie pojawiają się słowa "list-style…", myśl o punktorze/markerze. Jeśli pojawia się "background…", myśl o tle. Jeśli "border…", myśl o ramce. To pomaga szybko odróżniać podobne wizualnie efekty.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Punktor (marker) to znak widoczny przy elementach listy, np. kropka w <ul> lub numer w <ol>. W CSS można go zmieniać właściwościami list-style-type (kształt/typ) oraz list-style-image (grafika jako marker).
Najczęściej używa się właściwości list-style-image z adresem pliku, np. url('rys.gif'). Wtedy grafika zastępuje domyślny znacznik punktora przy każdym elemencie listy, zamiast standardowej kropki.
list-style-image dotyczy wyłącznie markera (punktora) obok treści elementu listy. Tło ustawia się osobnym mechanizmem: background-image (i pokrewnymi). To dwa różne obszary renderowania: marker vs. tło elementu.
list-style-image zmienia tylko punktor (ikonę) przy <li>. background-image wypełnia tłem całe pudełko elementu (np. <ul> lub <li>), może się powtarzać, skalować i pozycjonować. Efekty wizualne bywają podobne, ale znaczenie jest inne.
list-style-type jest lepszy, gdy wystarczą standardowe znaczniki (kółka, kwadraty, cyfry, litery) i chcesz prostoty oraz spójności w różnych rozdzielczościach. Obraz jako punktor bywa mniej elastyczny, wymaga pliku i może wyglądać gorzej przy skalowaniu.
Tak, właściwość może być stosowana również do list numerowanych. Trzeba jednak pamiętać, że zastępuje wizualny marker, więc numery mogą zostać "ukryte" przez obraz. Jeśli w zadaniu chodzi o zachowanie numeracji, lepiej pozostać przy list-style-type.
Najczęstsze przyczyny to zła ścieżka w url(...), brak pliku na serwerze, literówka w nazwie lub problem z uprawnieniami. W praktyce warto sprawdzić narzędzia deweloperskie (Network/Console) oraz użyć ścieżki względnej względem pliku CSS.
Bo oba rozwiązania używają grafiki i "coś widać przy liście". Jednak punktor to osobny marker obok treści, a tło wypełnia obszar elementu. Na egzaminie pomagają słowa-klucze: "list-style" → punktor, "background" → tło, "border" → ramka.
Do tego służy list-style-position, która określa, czy marker jest "outside" (na zewnątrz bloku treści) czy "inside" (wewnątrz). To niezależne od tego, czy marker jest kropką, numerem, czy obrazem z list-style-image.
Podobne są pytania o selektory dla <ul>/<li>, skrót list-style, różnice między margin/padding listy oraz o tła i obramowania elementów. Często sprawdzana jest umiejętność przewidzenia efektu kodu bez uruchamiania przeglądarki.
info

Około 60% zdających odpowiada poprawnie na to pytanie. średnie

Eksperci podkreślają: "Ustawienie obrazu jako punktora listy realizuje się w CSS przez właściwość list-style-image wskazującą plik grafiki (np. rys.gif)."

Źródła:

  • MDN Web Docs: "list-style-image" (CSS) — https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-image (dostęp: 2026-03-01)
  • MDN Web Docs: "list-style" (CSS shorthand) — https://developer.mozilla.org/en-US/docs/Web/CSS/list-style (dostęp: 2026-03-01)
  • W3C: CSS 2.1 Specification, rozdział 12 (Lists) — https://www.w3.org/TR/CSS21/generate.html#lists (dostęp: 2026-03-01)

Materiały:

  • Dokumentacja MDN o list-style-image i list-style
  • Ćwiczenia: tworzenie list ul/ol z różnymi stylami punktorów
  • Powtórka właściwości background-* i border-* dla rozróżnienia od punktora

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego