Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA PGF4 - TEST WIEDZY NR 1



PYTANIE NR 15.
Rozważ poniższy fragment kodu CSS:
h1 {
  color: #333;
  font-size: 2em;
}
Co ten kod robi?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Selektor typu h1 obejmuje wszystkie nagłówki pierwszego poziomu na stronie. Reguła ustawia im kolor tekstu na #333 (ciemnoszary) oraz rozmiar czcionki na 2em, czyli w przybliżeniu dwukrotność rozmiaru bazowego. Dzięki temu wszystkie <h1> mają spójny wygląd.

Pełne wyjaśnienie:

W CSS reguła składa się z selektora i bloku deklaracji. W podanym fragmencie selektorem jest h1, czyli selektor typu (elementu). Oznacza to, że styl zostanie zastosowany do każdego elementu HTML <h1> występującego w dokumencie (o ile nie zostanie nadpisany bardziej szczegółową regułą).

Deklaracje w nawiasach klamrowych mówią, jak elementy <h1> mają wyglądać:

  • color: #333; ustawia kolor tekstu na wartość zapisaną szesnastkowo. #333 to ciemny odcień szarości, często używany zamiast czystej czerni dla lepszej "miękkości" typografii.
  • font-size: 2em; ustawia rozmiar czcionki na jednostkę względną em. Wartość 2em oznacza "dwa razy tyle", co rozmiar czcionki odziedziczony/bazowy w danym kontekście. W praktyce nagłówki będą wyraźnie większe od tekstu podstawowego.

Dlaczego pozostałe odpowiedzi są błędne? Ponieważ w CSS o tym, które elementy zostaną ostylowane, decyduje selektor. Gdyby chodziło o paragrafy, selektorem byłoby p; dla obrazów byłoby to img; a dla linków a. W tym zadaniu widnieje h1, więc mowa o nagłówkach pierwszego poziomu.

Wskazówka egzaminacyjna: najpierw odczytaj selektor (do kogo?), dopiero potem deklaracje (co zmienia?). To skraca analizę i zmniejsza ryzyko pomylenia elementów.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co oznacza selektor h1 w CSS?
Selektor h1 to selektor typu (elementu). Obejmuje wszystkie elementy HTML <h1> w dokumencie i pozwala nadać im wspólny wygląd (np. kolor, rozmiar czcionki), bez wskazywania klas lub identyfikatorów.
Jak działa właściwość color: #333 w CSS?
Właściwość color ustawia kolor tekstu. Zapis #333 to skrócony zapis koloru w systemie szesnastkowym (odcień szarości). W praktyce tekst będzie ciemnoszary, co często poprawia odbiór typografii w porównaniu z czystą czernią.
Co to jest jednostka em w CSS?
em to jednostka względna zależna od aktualnego rozmiaru czcionki elementu (lub kontekstu dziedziczenia). Dzięki temu typografia skaluje się elastycznie. Przykładowo 2em oznacza rozmiar dwa razy większy od bazowego w danym miejscu.
Dlaczego font-size: 2em powiększa nagłówek?
Bo font-size kontroluje wielkość tekstu, a 2em jest wartością większą od bazowej. Jeśli tekst podstawowy ma np. 1em, to 2em będzie dwa razy większe, więc nagłówek <h1> stanie się wyraźnie bardziej dominujący wizualnie.
Jakie elementy obejmie reguła CSS z selektorem h1?
Obejmie wszystkie elementy <h1> w kodzie HTML, niezależnie od tego, gdzie się znajdują. Wyjątkiem są sytuacje, gdy inna reguła ma większą specyficzność lub pojawia się później i nadpisze część właściwości (np. inny kolor dla nagłówka w nagłówku strony).
Czy ten kod CSS zmieni styl paragrafów <p>?
Nie. Paragrafy zmieniłby selektor p. W CSS selektor wskazuje dokładnie, do jakich elementów stosują się deklaracje. W pokazanym przykładzie selektor to h1, więc modyfikowane są tylko nagłówki pierwszego poziomu.
Jaka jest różnica między selektorem h1 a .h1?
h1 wybiera element HTML <h1>, czyli nagłówek pierwszego poziomu. Z kolei .h1 wybiera elementy z klasą class="h1" (mogą to być np. <div>, <p> itd.). To częsty błąd na egzaminach.
Jak najczęściej myli się selektory w takich zadaniach?
Najczęstsza pomyłka to nieuwaga na selektor i zgadywanie po właściwościach (np. "color" kojarzy się z linkami). Pomaga prosta procedura: 1) odczytaj selektor (do kogo?), 2) odczytaj właściwości (co się zmieni?).
Kiedy warto stylować h1 zamiast używać klas?
Gdy chcesz nadać globalny, spójny wygląd wszystkim nagłówkom pierwszego poziomu w całej publikacji/serwisie. Klasy są lepsze, gdy potrzebujesz wyjątków (np. inny wygląd jednego nagłówka w banerze) albo gdy element nie jest semantycznie nagłówkiem, a ma tylko wyglądać podobnie.
Jak przygotować się do pytań o CSS na egzaminie zawodowym?
Ćwicz rozpoznawanie: selektorów (typ, klasa, ID), właściwości (color, font-size, margin, padding) i jednostek (px, em, rem, %). Rób krótkie testy: "co obejmie selektor?" oraz "jaki efekt da dana deklaracja?"
info

Około 81% zdających odpowiada poprawnie na to pytanie. średnio łatwe

W praktyce zawodowej kluczowe jest to, że selektor typu h1 obejmuje wszystkie nagłówki pierwszego poziomu na stronie.

Źródła:

  • MDN Web Docs: "Type selectors" (CSS selectors) — https://developer.mozilla.org/en-US/docs/Web/CSS/Type_selectors - accessed 2026-02-28
  • MDN Web Docs: "color" — https://developer.mozilla.org/en-US/docs/Web/CSS/color - accessed 2026-02-28
  • MDN Web Docs: "font-size" — https://developer.mozilla.org/en-US/docs/Web/CSS/font-size - accessed 2026-02-28

Materiały:

  • Dokumentacja MDN: podstawy selektorów CSS (type selectors)
  • Dokumentacja MDN: właściwości color i font-size
  • Ćwiczenia praktyczne: tworzenie prostych arkuszy CSS dla typografii (nagłówki, akapity, linki)
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego