KWALIFIKACJA INF3 - STYCZEŃ 2024

PYTANIE NR 9.
W języku CSS zapisano wspólne formatowanie dla pewnej grupy znaczników. Formatowanie takich znaczników w kodzie HTML nastąpi przez atrybut
Ilustracja przedstawia fragment kodu CSS, który definiuje wspólne formatowanie dla grupy znaczników HTML.
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Reguły CSS dla grupy elementów stosuje się najczęściej przez przypisanie im tej samej klasy. W HTML robi się to atrybutem class, np. class="format1". Atrybut id służy do identyfikacji unikatowej, a style zawiera pojedyncze deklaracje inline.
Dzięki klasom jeden selektor może objąć wiele znaczników.

Pełne wyjaśnienie:

Jeżeli w CSS zapisano wspólne formatowanie dla grupy elementów, to w HTML trzeba wskazać, które elementy należą do tej grupy. Standardowym mechanizmem do takiego "grupowania" jest atrybut class. Dzięki temu wiele elementów może mieć tę samą wartość klasy, a selektor klasy w CSS (np. .format1) obejmie wszystkie te elementy.

Odpowiedź class="format1" jest właściwa, ponieważ:

  • class może wystąpić wielokrotnie w dokumencie, więc nadaje się do wspólnego stylowania wielu elementów.
  • CSS naturalnie współpracuje z klasami poprzez selektory klas, co sprzyja porządkowi w arkuszu stylów i ponownemu użyciu reguł.

Pozostałe propozycje nie spełniają warunku "formatowania grupy":

  • div="format1" jest niepoprawne, bo div to nazwa elementu HTML, a nie atrybut. Atrybut o takiej nazwie nie jest standardowym sposobem wiązania stylów.
  • style="format1" wskazuje na atrybut style, który służy do wpisywania deklaracji CSS bezpośrednio w elemencie (inline), np. style="color:red;". Wartość "format1" nie jest deklaracją CSS, a nawet gdyby była, inline style nie jest mechanizmem "wspólnego formatowania" przez jeden selektor.
  • id="format1" oznacza identyfikator elementu. Id powinno być unikatowe w obrębie dokumentu, więc nie służy do oznaczania całej grupy elementów (to typowy błąd, gdy myli się role id i class).

W praktyce: gdy chcesz nadać ten sam wygląd wielu przyciskom, linkom lub kafelkom produktu, przypisz im wspólną klasę i styluj selektorem klasy w CSS. Id zostaw do elementów pojedynczych (np. sekcja nawigacji) lub do odwołań w JavaScript.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Atrybut class nadaje elementowi nazwę klasy, którą można współdzielić przez wiele elementów. To pozwala stosować te same reguły CSS do całej grupy, np. dla wielu przycisków lub sekcji. W CSS używa się wtedy selektora klasy, np. .format1.
Selektor klasy wybiera wszystkie elementy, które mają wskazaną klasę. Zapis ma postać kropka + nazwa, np. .format1. Dzięki temu jedna reguła może stylować wiele elementów naraz, bez powtarzania deklaracji w każdym miejscu kodu.
Atrybut id ma identyfikować pojedynczy, unikatowy element na stronie. Gdyby kilka elementów miało to samo id, powstaje konflikt (np. w nawigacji, skryptach i selekcji). Do grupowania i wspólnego stylowania służy class.
Atrybut style zawiera deklaracje CSS wpisane bezpośrednio w elemencie (tzw. styl inline), np. style="color:red;". Używa się go raczej wyjątkowo (szybkie testy, generowanie HTML), bo utrudnia utrzymanie i ponowne użycie stylów.
Nazwa elementu (np. <div>, <p>) opisuje typ znacznika w dokumencie. Atrybut (np. class, id, style) to "cecha" dopisana w tagu otwierającym. Błąd polega na traktowaniu nazwy elementu jako atrybutu.
Najczęściej myli się role: wybiera id zamiast class, bo oba wyglądają podobnie. Drugim błędem jest wybór style, bo kojarzy się ze "stylowaniem", mimo że pytanie dotyczy grupy elementów i reguł z arkusza CSS, a nie inline.
Tak. W praktyce w class można podać kilka nazw klas (oddzielonych spacjami), aby łączyć style, np. wspólny styl przycisku i dodatkowy wariant kolorystyczny. To ułatwia budowanie komponentów UI i ogranicza duplikację kodu CSS.
Najpierw nadaj elementom tę samą klasę przez atrybut class. Następnie w arkuszu CSS utwórz regułę dla tej klasy (selektor z kropką). To daje spójne formatowanie, prostą modyfikację wyglądu i lepszą organizację projektu.
class stosuj do grup elementów o wspólnym stylu lub zachowaniu. id zostaw dla elementów unikatowych: główne sekcje, punkty nawigacji, kotwice w URL, elementy jednoznacznie wskazywane w skryptach. Zasada: id jest "jeden", class "wiele".
Zwróć uwagę na słowa "wspólne formatowanie" i "grupa" — to sugeruje mechanizm wielokrotnego użycia. W HTML taką rolę pełni class. id kojarz z unikatowością, a style z deklaracjami wpisanymi bezpośrednio w elemencie (inline).
info

Statystycznie 77% uczniów zna prawidłową odpowiedź. średnio łatwe

Według specjalistów z branży: "Reguły CSS dla grupy elementów stosuje się najczęściej przez przypisanie im tej samej klasy."

Źródła:

  • MDN Web Docs: "Global attributes: class" (HTML) https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/class - accessed 2026-03-01
  • MDN Web Docs: "Global attributes: id" (HTML) https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id - accessed 2026-03-01
  • MDN Web Docs: "CSS selectors" https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_selectors - accessed 2026-03-01

Materiały:

  • Dokumentacja MDN: HTML atrybut class i id
  • Dokumentacja MDN: selektory CSS (w tym selektor klasy)
  • WHATWG HTML Living Standard (sekcja o globalnych atrybutach)

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego