KWALIFIKACJA INF3 - CZERWIEC 2017

PYTANIE NR 9.
W języku CSS określono formatowanie znacznika h1 według wzoru. Zakładając, że żadne inne formatowanie nie jest dodane do znacznika h1, wskaż sposób formatowania tego znacznika.
Ilustracja składa się z dwóch głównych części.
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Reguła CSS dla h1 ustawia pochylony krój pisma (font-style: oblique), wariant kapitalików (font-variant: small-caps) oraz wyrównanie tekstu do prawej (text-align: right). Poprawna jest więc odpowiedź przedstawiająca tekst pochylony, w kapitalikach i wyrównany do prawej.

Pełne wyjaśnienie:

W pytaniu trzeba odczytać trzy niezależne deklaracje CSS dla selektora h1 i przewidzieć ich łączny efekt.

  • font-style: oblique oznacza pismo pochyłe (zbliżone do kursywy). W praktyce przeglądarka renderuje nagłówek jako pochylony, o ile użyta czcionka ma taki wariant albo przeglądarka potrafi go zasymulować.
  • font-variant: small-caps włącza kapitaliki: litery odpowiadające małym literom są rysowane jako mniejsze wielkie litery. To nie jest to samo co zapisanie wszystkiego WIELKIMI LITERAMI w tekście źródłowym, bo proporcje i wielkość znaków są różne.
  • text-align: right wyrównuje wiersze tekstu do prawej krawędzi pola (dla nagłówka działa analogicznie jak dla akapitu).

Poprawna odpowiedź musi więc spełniać jednocześnie trzy warunki: tekst jest pochylony, ma cechy kapitalików oraz jest wyrównany do prawej. Odpowiedzi, które są tylko pochylone i mają inne wyrównanie (np. do środka), odpadają przez niezgodność z text-align. Warianty bez kapitalików odpadają przez niezgodność z font-variant. Warianty dodające dodatkowe efekty (np. tło), przy założeniu "że żadne inne formatowanie nie jest dodane", również nie opisują poprawnie skutku samego podanego kodu.

Wskazówka egzaminacyjna: przy takich zadaniach czytaj każdą deklarację osobno, a potem sprawdź, czy wybrana odpowiedź realizuje wszystkie właściwości naraz. To ogranicza ryzyko wyboru odpowiedzi "prawie pasującej".

Dodatkowe pytania

Dodatkowe pytania (FAQ):
font-style: oblique oznacza pochylenie kroju pisma. Przeglądarka wyświetla tekst jako pochylony (często podobnie do kursywy), jeśli font ma taki wariant lub jeśli potrafi go zasymulować. To zmienia tylko kształt liter, nie ich wielkość ani wyrównanie.
small-caps to wariant pisma, w którym litery odpowiadające małym literom są wyświetlane jako mniejsze wielkie litery. Efekt różni się od wpisania tekstu caps lockiem, bo zachowuje "dwie wysokości" znaków i wygląda bardziej typograficznie.
text-align: right wyrównuje wiersze tekstu do prawej krawędzi dostępnego obszaru. Dla elementu h1 działa tak samo jak dla akapitu: jeśli nagłówek łamie się na dwie linie, obie będą dosunięte do prawej.
Nie w sensie treści. font-variant: small-caps zmienia sposób renderowania liter: małe litery wyglądają jak mniejsze wersje wielkich. Tekst w HTML nadal pozostaje taki sam, a kopiowanie/wyszukiwanie nie zmienia znaków na inne.
Bo efekt końcowy to suma właściwości. Łatwo popełnić błąd, gdy zauważy się tylko jedną rzecz (np. wyrównanie), a pominie wariant pisma lub pochylenie. Na egzaminie najlepiej "odhaczyć" każdą deklarację i sprawdzić, czy odpowiedź spełnia je wszystkie.
Kapitaliki wyglądają tak, że cały tekst jest "wielkoliterowy", ale część liter jest wyraźnie mniejsza (te, które w normalnym zapisie byłyby małe). Jeśli wszystkie litery mają identyczną wysokość, to jest to zwykły zapis wielkimi literami, nie small-caps.
Nie zawsze. italic oznacza kursywę (osobny krój projektowany typograficznie), a oblique zwykle pochylenie podstawowego kroju. W wielu fontach efekt wygląda podobnie, ale semantycznie to inne warianty i przeglądarka może je mapować inaczej.
Najczęściej gdy element jest np. flex-kontenerem i tekst jest w innym elemencie, albo gdy wyrównujesz sam element, a nie jego zawartość. text-align wyrównuje inline’ową zawartość wewnątrz elementu, więc musi dotyczyć tego elementu, który zawiera tekst.
Typowe błędy to mylenie small-caps z text-transform: uppercase oraz zakładanie, że kapitaliki zawsze wyglądają identycznie. W praktyce zależą od fontu; gdy font nie ma kapitalików, przeglądarka może je symulować, co zmienia wygląd.
Ćwicz na krótkich przykładach: weź jedną regułę CSS i opisz jej efekt słowami (pochylenie, grubość, wyrównanie, rozmiar). Potem porównuj z wynikiem w przeglądarce i narzędziach devtools. To buduje nawyk analizy deklaracji zamiast zgadywania.
info

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

Specjaliści zwracają uwagę: "Reguła CSS dla h1 ustawia pochylony krój pisma (font-style: oblique), wariant kapitalików (font-variant: small-caps) oraz wyrównanie tekstu do prawej (text-align: right)."

Źródła:

  • MDN Web Docs: font-style — https://developer.mozilla.org/en-US/docs/Web/CSS/font-style (dostęp: 2026-04-01)
  • MDN Web Docs: font-variant — https://developer.mozilla.org/en-US/docs/Web/CSS/font-variant (dostęp: 2026-04-01)
  • MDN Web Docs: text-align — https://developer.mozilla.org/en-US/docs/Web/CSS/text-align (dostęp: 2026-04-01)

Materiały:

  • Dokumentacja MDN: właściwości font-style, font-variant, text-align
  • Specyfikacja CSS Fonts (rozdziały o wariantach pisma i stylu fontu)
  • Ćwiczenia praktyczne: tworzenie nagłówków h1–h3 z różnymi wariantami typografii w jednym arkuszu CSS

Aktualizacja pytania: 03.04.2026



Aktualizacja pytania: 03.04.2026
📡 Brak połączenia internetowego