KWALIFIKACJA INF3 - CZERWIEC 2022

PYTANIE NR 31.
Wskaż paragraf sformatowany przedstawionym stylem CSS.
Ilustracja składa się z dwóch głównych części.
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Poprawny jest "Paragraf 4.", ponieważ jako jedyny łączy wszystkie efekty wynikające z podanego stylu dla selektora p: czcionkę szeryfową (serif), tło w kolorze Teal, biały kolor tekstu (White) oraz kursywę (font-style: italic). Pozostałe paragrafy mają inną rodzinę fontu, obramowanie lub pogrubienie.

Pełne wyjaśnienie:

W zadaniu trzeba dopasować wygląd akapitu do deklaracji CSS przypisanych do selektora p. Oznacza to, że każdy paragraf, który ma być "sformatowany przedstawionym stylem", powinien jednocześnie spełniać wszystkie wskazane cechy.

  • font-family: serif – tekst powinien być zapisany czcionką szeryfową (z "ozdobnikami" na końcach kresek liter).
  • background-color: Teal – tło obszaru paragrafu ma być w kolorze ciemnoturkusowym (teal).
  • color: White – kolor liter ma być biały.
  • font-style: italic – tekst ma być pochylony (kursywa), a nie pogrubiony.

"Paragraf 4." odpowiada temu zestawowi cech w komplecie: ma tło teal, biały tekst, kursywę oraz krój szeryfowy, więc jest zgodny z każdą deklaracją.

Dlaczego pozostałe propozycje nie pasują?

  • "Paragraf 1." ma co prawda tło teal, biały tekst i kursywę, ale zastosowano krój bezszeryfowy, więc nie spełnia warunku font-family: serif.
  • "Paragraf 2." ma krój szeryfowy i kursywę, ale tło jest białe i pojawia się ramka zamiast wypełnienia tła kolorem teal; dodatkowo kolor tekstu nie jest biały. To nie odpowiada zestawowi background-color i color.
  • "Paragraf 3." ma tło teal i biały tekst, ale tekst jest pogrubiony i nie jest pochylony, więc nie spełnia font-style: italic; dodatkowo krój jest bezszeryfowy.

Wskazówka egzaminacyjna: w takich zadaniach nie wystarczy dopasować jednej cechy (np. samego tła). Najpewniejsza metoda to sprawdzenie po kolei każdej deklaracji z CSS i odhaczanie jej w podglądzie (tło → kolor tekstu → pochylenie → rodzina fontu).

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Selektor p wskazuje wszystkie elementy akapitu w HTML, czyli znaczniki p. Jeśli w kodzie CSS podano regułę dla p, to każda pasująca treść akapitu powinna dostać te same właściwości, o ile nie są nadpisane innymi, bardziej szczegółowymi regułami.
Czcionka szeryfowa ma małe "zakończenia" kresek liter (szeryfy), np. przy literach T, I, E. Bezszeryfowa (sans-serif) wygląda prościej, bez tych ozdobników. W zadaniu trzeba to ocenić wzrokowo i połączyć z deklaracją font-family: serif.
Bo reguła CSS działa jako zestaw warunków jednocześnie: akapit ma pasować do każdej deklaracji (tło, kolor tekstu, pochylenie, rodzina fontu). Jeśli wybierzesz tylko po kolorze tła, możesz trafić na paragraf, który ma inne pismo albo jest pogrubiony zamiast pochylony.
Italic (kursywa) oznacza pochylenie znaków w prawo, a bold (pogrubienie) zwiększa grubość kresek liter. Właściwość font-style dotyczy m.in. kursywy, a font-weight dotyczy pogrubienia. Na egzaminie często myli się te dwa efekty.
background-color ustawia kolor tła elementu, czyli obszaru "pod" tekstem (wypełnienie). To nie jest obramowanie. Jeśli widzisz tylko ramkę i białe wnętrze, to najczęściej oznacza użycie właściwości typu border, a nie background-color.
W CSS istnieje zestaw nazwanych kolorów (tzw. named colors), które przeglądarka rozpoznaje bez zapisu heksadecymalnego. W praktyce często stosuje się też zapis HEX/RGB/HSL dla większej kontroli. Na egzaminie kluczowe jest skojarzenie nazwy z efektem wizualnym.
Najczęstsze pułapki to: mylenie serif z sans-serif, pomijanie jednej deklaracji (np. kursywy), mylenie tła z obramowaniem oraz ocenianie tylko po kolorze. Dobra strategia to wypisać sobie cechy z CSS i porównać je z każdym wariantem po kolei.
W praktyce używa się narzędzi deweloperskich przeglądarki (DevTools) i zakładki z regułami CSS, gdzie widać, co wygrywa w kaskadzie. W zadaniach egzaminacyjnych zwykle zakłada się brak konfliktów, ale warto pamiętać o specyficzności selektorów i kolejności reguł.
Bo praca przy stronach i aplikacjach WWW wymaga szybkiego czytania CSS oraz diagnozowania różnic między projektem graficznym a wdrożeniem. Umiejętność dopasowania właściwości do efektu wizualnego pomaga w testowaniu interfejsu, poprawkach stylów i komunikacji z zespołem UI/UX.
Ćwicz krótkie zestawy właściwości CSS i ich efekt: kolor tekstu, tło, kursywa/pogrubienie, fonty. Rób mini-zadania "jaki to efekt?" oraz "który podgląd pasuje do kodu?". Pomaga też praca w edytorze i natychmiastowy podgląd w przeglądarce.
info

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

Specjaliści zwracają uwagę: "Pozostałe paragrafy mają inną rodzinę fontu, obramowanie lub pogrubienie."

Źródła:

  • MDN Web Docs: font-family (CSS) — https://developer.mozilla.org/en-US/docs/Web/CSS/font-family (accessed 2026-03-31)
  • MDN Web Docs: background-color (CSS) — https://developer.mozilla.org/en-US/docs/Web/CSS/background-color (accessed 2026-03-31)
  • MDN Web Docs: font-style (CSS) — https://developer.mozilla.org/en-US/docs/Web/CSS/font-style (accessed 2026-03-31)

Materiały:

  • Dokumentacja MDN: właściwości color, background-color, font-family, font-style
  • Specyfikacja CSS Color oraz CSS Fonts (części dotyczące nazw kolorów i rodzin fontów)
  • Ćwiczenia praktyczne: porównywanie efektów font-style italic i font-weight bold w przeglądarce

Aktualizacja pytania: 03.04.2026



Aktualizacja pytania: 03.04.2026
📡 Brak połączenia internetowego