KWALIFIKACJA INF3 - CZERWIEC 2021 (test 2)

PYTANIE NR 26.
Która z definicji CSS określa formatowanie nagłówka h1: tekst nadkreślony, z odstępami między wyrazami 10 px i czerwonym kolorem tekstu?
Ilustracja przedstawia cztery różne definicje CSS dla elementu nagłówka h1.
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Aby uzyskać nagłówek h1 z tekstem nadkreślonym, należy użyć właściwości text-decoration ustawionej na overline. Odstępy między wyrazami 10px ustawia word-spacing: 10px, a czerwony kolor tekstu określa color: red. Poprawna definicja musi zawierać wszystkie te deklaracje.

Pełne wyjaśnienie:

W CSS formatowanie tekstu realizuje się przez dobór właściwości (deklaracji), które razem opisują wygląd elementu. Dla nagłówka h1 w treści zadania wymagane są trzy niezależne efekty: nadkreślenie, odstępy między wyrazami oraz czerwony kolor.

  • Nadkreślenie uzyskuje się przez text-decoration ustawione na overline. To dekoracja "nad" tekstem (w odróżnieniu od underline, które jest pod tekstem).
  • Odstępy między wyrazami ustawia właściwość word-spacing. Wartość 10px oznacza dodanie odstępu 10 pikseli między słowami (jednostka jest wymagana).
  • Kolor tekstu ustala color. Wpis red to nazwa koloru w CSS; równie dobrze mógłby to być zapis heksadecymalny, ale w zadaniu wskazano czerwień.

Poprawna odpowiedź musi więc zawierać komplet deklaracji: text-decoration: overline; oraz word-spacing: 10px; i color: red; (kolejność nie ma znaczenia). Odpowiedzi błędne zwykle wynikają z jednego z typowych problemów: użycia underline zamiast overline, pomylenia odstępów między literami (letter-spacing) z odstępami między słowami (word-spacing), braku jednostki przy wartości liczbowej lub ustawienia koloru tła (background-color) zamiast koloru tekstu.

Na egzaminie warto sprawdzać, czy każda wymagana cecha z treści pytania ma odpowiadającą jej właściwość CSS i czy wartości mają poprawne jednostki oraz składnię.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
text-decoration: overline dodaje linię dekoracyjną nad tekstem (nadkreślenie). To inny efekt niż underline, które rysuje linię pod tekstem. W praktyce używa się tego np. do wyróżnień typograficznych nagłówków lub oznaczeń w UI.
Do odstępów między wyrazami służy właściwość word-spacing. Przykład: word-spacing: 10px; zwiększa przerwę między słowami o 10 pikseli. To nie jest to samo co letter-spacing, które zmienia odstępy między znakami.
W wielu właściwościach CSS liczba musi mieć jednostkę długości, np. px, em czy rem. Samo "10" jest zwykle niepoprawne składniowo dla odstępów. W zadaniach egzaminacyjnych brak jednostki często dyskwalifikuje odpowiedź.
color ustawia kolor tekstu elementu, a nie kolor tła. Wartość red to nazwa koloru z listy nazw CSS. Zamiennie można użyć np. zapisu szesnastkowego, ale wtedy treść zadania musi na to pozwalać.
word-spacing zmienia odstęp między wyrazami (rozpoznawanymi przez spacje), a letter-spacing zmienia odstęp między znakami w słowie. Na egzaminie to częsta pułapka: właściwości brzmią podobnie, ale dotyczą innego poziomu typografii.
Typowa reguła ma postać: h1 { ... }, gdzie h1 jest selektorem, a w klamrach znajdują się deklaracje w formacie właściwość: wartość;. W zadaniach sprawdzaj, czy podano poprawne średniki i czy każda deklaracja jest kompletna.
Zwykle kolejność deklaracji w jednym bloku nie ma znaczenia, jeśli dotyczą różnych właściwości (np. dekoracja, odstępy, kolor). Znaczenie ma natomiast kolejność reguł i specyficzność selektorów, gdy różne reguły ustawiają tę samą właściwość.
Gdy chcesz precyzyjniej kontrolować dekorację, możesz użyć rozbicia na właściwości składowe, np. text-decoration-line, text-decoration-color i text-decoration-style. Skrót text-decoration jest nadal poprawny, ale warianty składowe bywają czytelniejsze w większych projektach.
Najczęściej myli się overline z underline, używa background-color zamiast color, podaje 10 bez jednostki albo wybiera letter-spacing zamiast word-spacing. Pomaga metoda: wypisz wymagania z treści i przypisz do nich właściwości.
Najpierw zaznacz trzy wymagania (dekoracja, odstępy, kolor) i sprawdź, czy dana odpowiedź zawiera trzy pasujące właściwości. Potem zweryfikuj wartości: overline (nadkreślenie), 10px (z jednostką), red (kolor tekstu). To ogranicza wybór do jednej opcji.
info

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

Specjaliści zwracają uwagę: "Aby uzyskać nagłówek h1 z tekstem nadkreślonym, należy użyć właściwości text-decoration ustawionej na overline."

Źródła:

  • MDN Web Docs: "text-decoration" (CSS) — https://developer.mozilla.org/en-US/docs/Web/CSS/text-decoration (dostęp: 2026-02-27)
  • MDN Web Docs: "word-spacing" (CSS) — https://developer.mozilla.org/en-US/docs/Web/CSS/word-spacing (dostęp: 2026-02-27)
  • MDN Web Docs: "color" (CSS) — https://developer.mozilla.org/en-US/docs/Web/CSS/color (dostęp: 2026-02-27)

Materiały:

  • Dokumentacja MDN Web Docs: właściwości CSS (text-decoration, word-spacing, color)
  • Kurs podstaw CSS (selektory, właściwości tekstu, jednostki)
  • Ćwiczenia praktyczne: stylowanie nagłówków i akapitów w osobnym pliku CSS

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego