Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA PGF4 - PAŹDZIERNIK 2016



PYTANIE NR 39.
Którą regułę stylów należy dopisać do pliku style_list.css w celu zdefiniowania klasy znaczek dla list nienumerowanych z obrazkiem znaczek_logo.gif jako znakiem wypunktowania, jeśli obrazek umieszczony jest w podkatalogu GRAFIKI katalogu z plikami stylów?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Poprawna reguła używa właściwości list-style-image, bo ma ustawić obraz jako znacznik wypunktowania listy. Selektor ul.znaczek wskazuje listę nienumerowaną <ul> z klasą "znaczek". Funkcja url() powinna zawierać ścieżkę względną z ukośnikami: GRAFIKI/znaczek_logo.gif.

Pełne wyjaśnienie:

W CSS obrazek jako znak wypunktowania listy ustawia się właściwością list-style-image. Dlatego poprawna odpowiedź wskazuje regułę:

ul.znaczek { list-style-image: url(GRAFIKI/znaczek_logo.gif) }

Kluczowe są tu dwa elementy:

  • Selektor ul.znaczek oznacza element <ul> (lista nienumerowana), który ma przypisaną klasę znaczek. To precyzyjnie ogranicza działanie stylu do list danego typu i tej klasy.
  • Adres zasobu w url(...) jest ścieżką względną liczona względem lokalizacji pliku CSS. Skoro grafika leży w podkatalogu GRAFIKI katalogu z arkuszami stylów, zapis GRAFIKI/znaczek_logo.gif jest właściwy. W URL w CSS standardowo używa się ukośników /, a nie separatorów systemowych.

Dlaczego pozostałe odpowiedzi są niepoprawne:

  • ul.znaczek {list-style-type: url(...)} – list-style-type przyjmuje nazwy typów wypunktowania (np. kropka, kwadrat), a nie adres URL obrazka, więc jest to niewłaściwa właściwość do tego celu.
  • .znaczek {list-style-image: url(\GRAFIKI\...)} – zastosowano backslash (\) i dodatkowo ścieżkę wyglądającą jak "od katalogu głównego", co jest typowym błędem wynikającym z nawyków pracy w Windows. W kontekście URL w CSS oczekuje się składni zgodnej z adresami internetowymi.
  • .znaczek {list-style-image: url(grafiki/...)} – wskazuje inny katalog (inna nazwa i/lub wielkość liter) niż podany w treści. W praktyce na wielu serwerach wielkość liter w nazwach katalogów ma znaczenie, więc taka rozbieżność może powodować brak wczytania grafiki.

Wskazówka egzaminacyjna: zawsze sprawdź (1) czy wybrana właściwość rzeczywiście ustawia obraz, (2) czy selektor pasuje do elementu <ul>, oraz (3) czy ścieżka w url() jest względna względem pliku CSS i używa ukośników.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co to jest właściwość list-style-image w CSS?

list-style-image ustawia obraz jako znacznik wypunktowania listy.

Podaje się ją zwykle jako url(...), np. list-style-image: url("GRAFIKI/znaczek.gif"). Działa dla elementów listy (np. <ul>/<ol>) i zastępuje standardowe kropki/numery.

Jak zapisać selektor ul.znaczek i co on oznacza?

Selektor ul.znaczek oznacza element <ul>, który ma klasę znaczek.

To bardziej precyzyjne niż sama klasa .znaczek, bo ogranicza styl tylko do list nienumerowanych, a nie do dowolnego elementu z tą klasą.

Dlaczego w url() w CSS używa się ukośnika / zamiast \?

W url() stosuje się składnię adresów URL, a w URL standardowym separatorem jest ukośnik /.

Backslash \ pochodzi z zapisu ścieżek w Windows i bywa niepoprawny lub działa nieprzewidywalnie w CSS, więc na egzaminie wybieraj zapis z /.

Jak działa ścieżka względna w url() w arkuszu stylów?

Ścieżka względna w url() jest liczona względem lokalizacji pliku CSS.

Jeśli arkusz stylów leży w katalogu ze stylami, a obraz w podkatalogu GRAFIKI tego katalogu, to poprawny zapis zwykle wygląda jak url(GRAFIKI/plik.gif).

Czy list-style-type może przyjmować url() do obrazka?

Nie. list-style-type określa typ znacznika (np. kółko, kwadrat, liczby), a nie plik graficzny.

Obrazek ustawia się właściwością list-style-image. Na egzaminie to częsty "haczyk": podobna nazwa, ale inne przeznaczenie.

Jakie są typowe błędy przy ustawianiu obrazka jako bullet w liście?
Najczęstsze błędy to: użycie złej właściwości (np. list-style-type zamiast list-style-image), zła ścieżka do pliku, używanie \ zamiast /, oraz rozbieżność wielkości liter w nazwie katalogu/pliku.
Czy wielkość liter w nazwie katalogu GRAFIKI ma znaczenie?

W praktyce często ma znaczenie, zwłaszcza na serwerach opartych o systemy, gdzie nazwy plików są rozróżniane wielkością liter.

Dlatego jeśli w zadaniu podano katalog GRAFIKI, najlepiej użyć dokładnie takiego zapisu w url().

Kiedy lepiej użyć selektora .znaczek zamiast ul.znaczek?

.znaczek stosuje się, gdy styl ma dotyczyć każdego elementu z tą klasą, niezależnie od typu.

Jeśli jednak zadanie mówi o listach nienumerowanych, selektor ul.znaczek jest bezpieczniejszy, bo nie "przecieka" na inne elementy.

Jak sprawdzić w przeglądarce, czy list-style-image działa poprawnie?

Otwórz narzędzia deweloperskie (inspektor), zaznacz <ul> i sprawdź, czy reguła list-style-image jest zastosowana oraz czy URL nie jest przekreślony.

Jeśli obraz się nie wczytuje, sprawdź ścieżkę, literówki i lokalizację pliku względem CSS.

Jak przygotować się do zadań egzaminacyjnych o ścieżkach w CSS?

Ćwicz na prostych projektach: osobny katalog na style i podkatalog na grafiki. Zmieniaj położenie plików i zapis url(), obserwując efekt.

Zapamiętaj zasadę: ścieżkę liczysz od pliku CSS oraz zapisujesz ją w formacie URL z ukośnikami.

info

To pytanie poprawnie rozwiązuje 64% zdających egzamin. średnie

Według specjalistów z branży: "Poprawna reguła używa właściwości list-style-image, bo ma ustawić obraz jako znacznik wypunktowania listy."

Ź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-02-18)
  • MDN Web Docs: "list-style" (CSS) — https://developer.mozilla.org/en-US/docs/Web/CSS/list-style (dostęp: 2026-02-18)
  • W3C CSS Lists and Counters Module Level 3 (Working Draft): definicja list-style-image i list-style-type — https://www.w3.org/TR/css-lists-3/ (dostęp: 2026-02-18)

Materiały:

  • Dokumentacja MDN dotycząca list-style-image oraz list-style
  • Ćwiczenia z selektorów CSS (element, klasa, element.klasa)
  • Materiały o adresowaniu względnym i bezwzględnym w URL
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego