Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA PGF4 - WRZESIEŃ 2014


PYTANIE NR 34.
Jaką 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?
Ilustracja przedstawia fragment egzaminacyjnego pytania związanego z kwalifikacją zawodową TECHNIK GRAFIKI I POLIGRAFII
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Poprawna reguła używa selektora ul.znaczek, więc działa tylko dla list nienumerowanych z klasą "znaczek". Właściwość list-style-image pozwala ustawić obraz jako wypunktowanie. Ścieżka GRAFIKI/znaczek_logo.gif jest względna względem pliku CSS, co odpowiada treści zadania.

Pełne wyjaśnienie:

W CSS niestandardowy "znak wypunktowania" dla listy ustawia się przez właściwość list-style-image, która przyjmuje funkcję url() ze ścieżką do pliku graficznego. To dokładnie odpowiada wymaganiu: "obrazek jako znakiem wypunktowania".

Kluczowe są dwa elementy poprawnej reguły:

  • Selektor ul.znaczek oznacza: "zastosuj styl do elementu ul, który ma klasę znaczek". Dzięki temu styl nie obejmie innych elementów z tą klasą (np. div) ani list numerowanych (ol).
  • Ścieżka do grafiki w url() jest w praktyce najczęściej podawana jako ścieżka względna. Zgodnie z zasadami CSS ścieżki w url() są rozwiązywane względem lokalizacji pliku arkusza stylów, a nie względem dokumentu HTML. Skoro plik graficzny jest w podkatalogu GRAFIKI katalogu z plikami stylów, poprawny zapis to GRAFIKI/znaczek_logo.gif.

Dlaczego pozostałe propozycje są błędne:

  • ul.znaczek { list-style-image: url(znaczek_logo.gif); } wskazuje plik w tym samym katalogu co CSS. Jeśli obraz jest w podkatalogu GRAFIKI, przeglądarka nie znajdzie zasobu.
  • .znaczek { list-style-image: url(GRAFIKI/znaczek_logo.gif); } jest zbyt ogólne: zadziała na każdy element z klasą "znaczek", nie tylko na listy ul. W zadaniach egzaminacyjnych oczekuje się zwykle selektora dopasowanego do wskazanego typu elementu.
  • ul.znaczek { list-style-image: url(/GRAFIKI/znaczek_logo.gif); } to ścieżka bezwzględna od katalogu głównego serwera. Może działać w niektórych strukturach, ale nie wynika z treści o podkatalogu względem plików stylów i bywa źródłem błędów po wdrożeniu.

Wskazówka egzaminacyjna: zawsze sprawdzaj (1) czy wybrano właściwą właściwość (image vs type), (2) czy selektor zawęża element (ul z klasą), oraz (3) czy ścieżka jest względna względem CSS i używa ukośników "/".

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co to jest list-style-image w CSS i do czego służy?
list-style-image ustawia obrazek jako znacznik wypunktowania listy. Zamiast kółka lub kwadratu przeglądarka wyświetla ikonę wskazaną w url(). To typowe rozwiązanie dla list nawigacyjnych, list produktów i elementów z ikonami.
Jak działa ścieżka względna w url() w pliku CSS?
Ścieżka w url() jest zwykle liczona względem lokalizacji pliku CSS, a nie HTML. Jeśli arkusz stylów jest w folderze stylów, a grafika w jego podfolderze, zapisuje się np. GRAFIKI/plik.gif.
Dlaczego selektor ul.znaczek jest lepszy niż sama klasa .znaczek?
ul.znaczek ogranicza regułę do list nienumerowanych (ul) posiadających daną klasę. Sama .znaczek zadziała na każdy element z tą klasą, co może niechcący zmienić wygląd innych elementów strony i utrudniać debugowanie.
Jakie są różnice między ścieżką /GRAFIKI/plik.gif a GRAFIKI/plik.gif?
/GRAFIKI/plik.gif to ścieżka bezwzględna od katalogu głównego serwera. GRAFIKI/plik.gif jest ścieżką względną (tu: względem pliku CSS). W zadaniach egzaminacyjnych zwykle chodzi o ścieżkę względną zgodną z układem folderów projektu.
Czy wielkość liter w nazwie folderu GRAFIKI ma znaczenie w CSS?
Tak, na wielu serwerach (np. z systemami Unix/Linux) wielkość liter w nazwach plików i katalogów ma znaczenie. Jeśli folder nazywa się GRAFIKI, a w CSS wpiszesz grafiki, zasób może się nie wczytać, mimo że lokalnie na Windows działał.
Dlaczego nie używa się list-style-type do wstawiania obrazka w wypunktowaniu?
list-style-type wybiera typ znacznika (np. disc, circle, square, none) i nie służy do podawania plików graficznych. Obrazek jako wypunktowanie ustawia się przez list-style-image z funkcją url().
Jakie błędy w ścieżkach do grafiki w CSS zdarzają się najczęściej?
Najczęstsze problemy to: podanie złego folderu (brak GRAFIKI/), użycie ścieżki bezwzględnej, literówki w nazwie pliku oraz pomieszanie wielkości liter. Warto też pamiętać, że w adresach stosuje się ukośnik "/", a nie znak "\".
Jak sprawdzić w przeglądarce, czy list-style-image poprawnie wczytuje plik?
Otwórz narzędzia deweloperskie (zakładka Network) i odśwież stronę. Jeśli obrazek się nie wczyta, zobaczysz błąd 404 lub inną informację o problemie z adresem. To najszybszy sposób, by potwierdzić poprawność ścieżki w url().
Jakie formaty plików najlepiej sprawdzają się jako wypunktowania list?
Najczęściej używa się małych ikon w formacie PNG lub GIF (często z przezroczystością), bo dobrze wyglądają jako znaczniki list. Kluczowe jest, by plik był lekki i czytelny w małym rozmiarze, np. kilkanaście pikseli.
Jak przygotować się do zadań egzaminacyjnych o ścieżkach w CSS?
Przećwicz projekty z kilkoma folderami (np. style, GRAFIKI) i celowo zmieniaj lokalizację plików. Ucz się reguły: url() w CSS liczy ścieżkę od miejsca, gdzie jest CSS. Na egzaminie analizuj strukturę katalogów i dobieraj ścieżkę krok po kroku.
info

Statystycznie 44% uczniów zna prawidłową odpowiedź. trudne

Eksperci podkreślają: "Poprawna reguła używa selektora ul.znaczek, więc działa tylko dla list nienumerowanych z klasą "znaczek"."

Ź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-28)
  • MDN Web Docs: "url()" (CSS) — https://developer.mozilla.org/en-US/docs/Web/CSS/url (dostęp: 2026-02-28)
  • W3C CSS Lists and Counters Module Level 3: definicje właściwości list-style-image oraz list-style-type — https://www.w3.org/TR/css-lists-3/ (dostęp: 2026-02-28)

Materiały:

  • Dokumentacja MDN: właściwość list-style-image oraz lista stylów list
  • Dokumentacja MDN: składnia i zasady działania url() w CSS
  • Ćwiczenia praktyczne: tworzenie list ul z klasami i testowanie ścieżek do grafik w różnych folderach
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego