Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - STYCZEŃ 2022



PYTANIE NR 8.
Wskaż zapis stylu CSS formatujący punktor list numerowanych na wielkie cyfry rzymskie, a list punktowanych na kwadraty.
Ilustracja przedstawia fragment kodu CSS, który jest częścią pytania egzaminacyjnego dotyczącego kwalifikacji zawodowej
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Poprawny zapis CSS musi rozdzielić style dla dwóch typów list: numerowanej (<ol>) i punktowanej (<ul>). Dla <ol> ustawia się list-style-type: upper-roman, co daje wielkie cyfry rzymskie, a dla <ul> list-style-type: square, co daje kwadratowe znaczniki punktów.

Pełne wyjaśnienie:

W HTML istnieją dwa podstawowe typy list:

  • <ol> (ordered list) – lista numerowana, gdzie przeglądarka wyświetla kolejne znaczniki w formie numerów/oznaczeń.
  • <ul> (unordered list) – lista punktowana, gdzie znacznikiem jest punktor (np. kropka, kwadrat).

Za wygląd "punktora"/oznaczenia pozycji listy odpowiada w CSS właściwość list-style-type. W tym zadaniu wymagane są dwa różne formaty, więc poprawna odpowiedź musi zawierać dwie reguły: jedną dla <ol> i drugą dla <ul>.

Odpowiedź "ol { list-style-type: upper-roman; } ul { list-style-type: square; }" jest poprawna, ponieważ:

  • upper-roman ustawia numerację listy uporządkowanej na wielkie cyfry rzymskie (I, II, III…).
  • square ustawia punktor listy nieuporządkowanej jako kwadrat.

Dlaczego pozostałe typowe błędy w takich zadaniach są niepoprawne?

  • Użycie tylko jednego selektora (np. ustawienie list-style-type wyłącznie dla <ol> albo wyłącznie dla <ul>) nie spełnia wymogu jednoczesnego formatowania obu list.
  • Zamiana selektorów (upper-roman dla <ul> i square dla <ol>) daje efekt odwrotny do wymaganego.
  • Wybranie wartości typu roman lub lower-roman zmienia wielkość znaków (małe litery) albo jest niezgodne z oczekiwanym zapisem, więc nie realizuje warunku "wielkie cyfry rzymskie".

Wskazówka egzaminacyjna: najpierw dopasuj typ listy do selektora (<ol> numerowana, <ul> punktowana), a dopiero potem wybierz wartości list-style-type odpowiadające wymaganym znacznikom.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co to jest list-style-type w CSS?
list-style-type to właściwość CSS określająca wygląd znacznika elementu listy (marker/punktor/numer). Działa dla list <ul> i <ol> oraz ich elementów <li>. Przykłady wartości to m.in. square, disc, decimal, upper-roman.
Jak ustawić wielkie cyfry rzymskie dla listy <ol>?
Dla listy numerowanej <ol> użyj reguły CSS z wartością upper-roman: ol { list-style-type: upper-roman; }. Wtedy elementy <li> będą oznaczane jako I, II, III itd. Pamiętaj, że to dotyczy list uporządkowanych, nie punktowanych.
Jak ustawić kwadratowe punktory dla listy <ul>?
Dla listy punktowanej <ul> ustaw list-style-type: square, np. ul { list-style-type: square; }. W efekcie punktor przy każdym <li> będzie miał kształt kwadratu. To prosta metoda dopasowania wyglądu list do wymagań makiety strony.
Dlaczego nie da się jedną regułą wystylować <ol> i <ul> inaczej?
Jedna reguła CSS przypisana do jednego selektora (np. tylko ol albo tylko ul) nie rozróżnia typów list. Jeśli wymagania są różne (rzymskie liczby vs kwadraty), musisz zastosować co najmniej dwie reguły albo selektory bardziej szczegółowe, które rozdzielą style dla <ol> i <ul>.
Czym się różni <ol> od <ul> w HTML?
<ol> tworzy listę uporządkowaną (numerowaną), gdzie kolejność ma znaczenie. <ul> tworzy listę nieuporządkowaną (punktowaną), gdzie zwykle liczy się zestaw elementów, a nie numeracja. W CSS często styluje się je osobno, bo mają inne markery.
Jakie są typowe wartości list-style-type na egzaminie?
Najczęściej spotkasz wartości: disc (kropka), circle (okrąg), square (kwadrat) dla <ul> oraz decimal (1,2,3), lower-alpha (a,b,c), upper-roman (I,II,III) dla <ol>. Warto je kojarzyć z efektem wizualnym.
Kiedy lepiej stylować list-style-type na <li> zamiast na <ul> lub <ol>?
Stylowanie na <li> bywa przydatne, gdy w jednej liście chcesz różne markery dla poszczególnych elementów (np. pierwszy element inny niż reszta) albo gdy nadpisujesz style w zagnieżdżonych listach. Dla prostych zadań egzaminacyjnych zazwyczaj wystarcza ustawienie na <ul> i <ol>.
Dlaczego upper-roman to nie to samo co lower-roman?
upper-roman generuje wielkie cyfry rzymskie (I, V, X), a lower-roman małe (i, v, x). W zadaniach egzaminacyjnych różnica wielkości liter jest kluczowa, bo "wielkie cyfry rzymskie" oznaczają konieczność użycia wariantu upper, nie lower.
Jakie błędy najczęściej robi się w zadaniach o listach CSS?
Najczęstsze pomyłki to: zamiana <ol> z <ul>, ustawienie tej samej wartości list-style-type dla obu list mimo różnych wymagań, wybór podobnej wartości (np. lower-roman zamiast upper-roman) oraz zapis reguł w złej kolejności przy bardziej szczegółowych selektorach, co powoduje nadpisanie stylu.
Jak szybko rozpoznać poprawną odpowiedź na egzaminie z CSS list?
Sprawdź, czy odpowiedź zawiera dwa dopasowania: jedno do <ol> i jedno do <ul>. Następnie zweryfikuj wartości: dla "wielkich cyfr rzymskich" musi być upper-roman, a dla "kwadratów" musi być square. Jeśli brakuje któregoś elementu, odpowiedź odpada.
info

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

Eksperci podkreślają: "Poprawny zapis CSS musi rozdzielić style dla dwóch typów list: numerowanej (&lt;ol&gt;) i punktowanej (&lt;ul&gt;)."

Źródła:

  • MDN Web Docs: CSS list-style-type (wartości m.in. upper-roman, square) — https://developer.mozilla.org/en-US/docs/Web/CSS/list-style-type (dostęp: 2026-02-27)
  • MDN Web Docs: HTML element &lt;ol&gt; — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol (dostęp: 2026-02-27)
  • MDN Web Docs: HTML element &lt;ul&gt; — https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul (dostęp: 2026-02-27)

Materiały:

  • Dokumentacja MDN: właściwość CSS list-style-type
  • Dokumentacja MDN: elementy HTML &lt;ol&gt; i &lt;ul&gt;
  • Ćwiczenia praktyczne: tworzenie list i zmiana markerów w CSS w prostym pliku HTML
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego