Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - CZERWIEC 2022 (test 2)



PYTANIE NR 7.
Ilustracja przedstawia fragment kodu CSS, który definiuje styl dla nagłówka drugiego stopnia (h2).
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Poprawna odpowiedź opisuje łącznie trzy cechy formatowania:
kursywę (czyli pismo pochylone), linię dekoracyjną umieszczoną nad tekstem (overline) oraz parametr wysokości wiersza ustawiony na 60 px (line-height). Pozostałe opcje zmieniają położenie linii lub mylą interlinię z odstępem między znakami.

Pełne wyjaśnienie:

W zestawie odpowiedzi rozpoznawalne są typowe atrybuty formatowania tekstu stosowane w CSS. Poprawna odpowiedź łączy trzy elementy opisu wyglądu:

  • "czcionką pochyloną" – odpowiada użyciu kursywy, czyli właściwości font-style: italic. To zmienia kąt pochylenia glifów (o ile krój pisma ma wariant italic lub przeglądarka go zasymuluje).
  • "z linią nad tekstem" – chodzi o dekorację tekstu w postaci linii umieszczonej nad znakami, czyli text-decoration: overline (a nie podkreślenie).
  • "wysokość wiersza na 60 px" – dotyczy odstępu pionowego w obrębie linii tekstu, czyli line-height: 60px. Wpływa to na interlinię i wysokość obszaru linii, a przez to na rytm typograficzny i czytelność.

Dlaczego pozostałe odpowiedzi są błędne?

  • Wariant z "linią pod tekstem" opisuje podkreślenie (underline), czyli inną dekorację niż linia nad tekstem. To częsty błąd wynikający z traktowania dekoracji jako "jakaś linia" bez zwracania uwagi na położenie.
  • Wariant z "czcionką podstawową" zamiast pochylenia wskazuje brak kursywy (zwykle font-style: normal). Jeśli wymagany jest tekst pochylony, ta opcja odpada mimo poprawnych pozostałych parametrów.
  • Wariant z "odległością między znakami" miesza pojęcia: to odpowiada letter-spacing, czyli odstępowi poziomemu między literami, a nie wysokości wiersza. Nawet przy wartości 60 px byłby to ekstremalny efekt rozstrzelenia, niezwiązany z interlinią.

Wskazówka egzaminacyjna: czytając opis, najpierw mapuj go na grupy właściwości: krój/odmiana pisma (font-*), dekoracje (text-decoration) oraz odstępy pionowe (line-height) vs poziome (letter-spacing, word-spacing). Dzięki temu łatwiej wychwycisz jedną różnicę przesądzającą o poprawności.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co to jest wysokość wiersza (line-height) w CSS?
Line-height określa wysokość linii tekstu, czyli odstęp pionowy przypadający na jeden wiersz. Wpływa na czytelność akapitów i wyrównanie elementów w pionie. Wartość w px (np. 60px) narzuca stałą wysokość niezależnie od rozmiaru fontu.
Jak ustawić kursywę (pochylenie) tekstu w CSS?
Kursywę uzyskasz przez font-style: italic. Działa, gdy krój pisma ma wariant italic; w przeciwnym razie przeglądarka może zastosować pochylenie syntetyczne. Nie myl tego z font-weight, które zmienia grubość, a nie pochylenie.
Co oznacza linia nad tekstem w CSS?
Linia nad tekstem to dekoracja overline, zwykle ustawiana w ramach text-decoration. Różni się od podkreślenia (underline), które jest pod tekstem. Dekoracje służą do wyróżnień, ale trzeba uważać, by nie pogarszać czytelności.
Jaka jest różnica między line-height a letter-spacing?
Line-height to odstęp pionowy między liniami tekstu (interlinia). Letter-spacing to odstęp poziomy między znakami. To dwa różne wymiary: pomylenie ich prowadzi do efektu "ściśnięcia/rozstrzelenia" liter zamiast zwiększenia odstępu między wierszami.
Dlaczego duża wartość line-height może wyglądać jak duże odstępy?
Duże line-height zwiększa wysokość obszaru każdej linii tekstu, więc kolejne wiersze są od siebie dalej. To jest kontrolowany odstęp pionowy, a nie margines. Używaj tego do poprawy czytelności, ale unikaj przesady, bo rozbije spójność układu.
Czy text-decoration podkreśla tylko linki?
Nie. text-decoration można stosować do dowolnego tekstu, nie tylko linków. Linki często mają domyślne podkreślenie, ale możesz je zmienić (np. usunąć lub dodać overline). W interfejsie dbaj, aby styl nie utrudniał rozpoznania elementów klikalnych.
Jakie wartości text-decoration odpowiadają liniom nad i pod tekstem?
Dla linii nad tekstem używa się wartości overline, a dla linii pod tekstem wartości underline. Istnieje też line-through (linia przez środek). W praktyce łączysz je w zapisie text-decoration.
Kiedy stosuje się kursywę w projektowaniu stron?
Kursywę stosuje się m.in. do cytatów, tytułów dzieł, nazw obcych i delikatnych wyróżnień. W CSS realizuje się to przez font-style: italic. Na egzaminie zwracaj uwagę, czy opis dotyczy pochylenia, pogrubienia czy rozmiaru fontu.
Jak uniknąć błędów w zadaniach z dopasowaniem opisu do CSS?
Najpierw rozbij opis na cechy: krój (italic/normal), dekoracja (overline/underline), odstępy (line-height vs letter-spacing). Potem sprawdź, czy każda cecha występuje w jednej odpowiedzi. Jedna różnica (np. linia nad/pod) zwykle przesądza.
Czy 60px to typowa wartość dla line-height?
Nie jest typowa dla zwykłych akapitów; częściej spotyka się wartości zależne od rozmiaru fontu (np. 1.4–1.6). Jednak w zadaniach egzaminacyjnych może to być wartość celowa dla nagłówków lub elementów o stałej wysokości. Kluczowe jest rozpoznanie, że chodzi o line-height, a nie o odstępy między literami.
info

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

Specjaliści zwracają uwagę: "Pozostałe opcje zmieniają położenie linii lub mylą interlinię z odstępem między znakami."

Źródła:

  • MDN Web Docs: "font-style" (CSS) — https://developer.mozilla.org/en-US/docs/Web/CSS/font-style (dostęp: 2026-02-27)
  • 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: "line-height" (CSS) — https://developer.mozilla.org/en-US/docs/Web/CSS/line-height (dostęp: 2026-02-27)

Materiały:

  • Dokumentacja MDN Web Docs: właściwości CSS font-style, text-decoration, line-height, letter-spacing
  • Specyfikacje W3C/WHATWG dotyczące CSS Text i CSS Inline Layout (opis zachowania dekoracji i interlinii)
  • Ćwiczenia praktyczne: tworzenie prostych stron z różnymi ustawieniami typografii i porównywanie efektów
Zobacz też:

Aktualizacja pytania: 03.04.2026



Aktualizacja pytania: 03.04.2026
📡 Brak połączenia internetowego