KWALIFIKACJA INF3 - WRZESIEŃ 2014

PYTANIE NR 4.
Wskaż stwierdzenie, które jest prawdziwe dla następującej definicji stylu:
Ilustracja przedstawia fragment kodu CSS, który jest częścią pytania egzaminacyjnego z kwalifikacji zawodowej TECHNIK
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
W CSS klasa jest wskazywana selektorem poprzedzonym kropką.
Jeżeli w pokazanej definicji stylu występują dwa niezależne selektory klasowe (dwie nazwy z "."), oznacza to, że zdefiniowano dwie klasy. Pozostałe odpowiedzi dotyczyłyby stylu inline lub właściwości (np. zmiany wielkości liter, rozmiaru czcionki).

Pełne wyjaśnienie:

W arkuszach CSS reguła składa się z selektora (lub selektorów) oraz bloku deklaracji w nawiasach klamrowych. W praktyce rozpoznanie, co "zdefiniowano" w danym fragmencie, zaczyna się od analizy selektora.

Odpowiedź "Zdefiniowano dwie klasy." jest poprawna, gdy w definicji widoczne są dwa selektory klasowe, czyli dwa zapisy zaczynające się od kropki (np. ".nazwaKlasy"). Każdy taki selektor odnosi się do klasy przypisywanej w HTML przez atrybut class. W konsekwencji, jeśli w definicji pojawiają się dwie różne nazwy poprzedzone kropką, to w kodzie CSS mamy dwie klasy (albo dwie reguły dla klas, albo listę dwóch klas w selektorze – zależnie od zapisu).

Odpowiedź "Jest to styl lokalny." byłaby trafna tylko wtedy, gdyby style były zapisane bezpośrednio w atrybucie style w znaczniku HTML (inline). Sama "definicja stylu" w postaci reguły CSS nie jest stylem lokalnym.

Odpowiedź "Akapit będzie transponowany na małe litery." sugeruje użycie właściwości text-transform: lowercase. Nie wynika to z samego faktu użycia klas; byłoby prawdziwe tylko przy obecności konkretnej deklaracji text-transform w regule.

Odpowiedź "Odnośnik będzie pisany czcionką 14 punktów." dotyczy właściwości rozmiaru czcionki (np. font-size) i dodatkowo jednostek. Taka teza jest poprawna wyłącznie, gdy w deklaracjach CSS występuje ustawienie rozmiaru czcionki dla selektora dotyczącego odnośnika (np. elementu linku) oraz jest podana odpowiednia wartość. Sama informacja o klasach nie przesądza ani o elemencie (odnośnik), ani o rozmiarze.

Wskazówka egzaminacyjna: najpierw rozpoznaj typ selektora (klasa: kropka, identyfikator: #, element: nazwa znacznika), dopiero potem szukaj deklaracji, które uzasadniają skutki typu "małe litery" lub "14 punktów".

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Klasa w CSS to sposób grupowania elementów HTML, aby nadać im wspólne style. W selektorze CSS zapisuje się ją z kropką, np. .menu. W HTML przypisujesz ją atrybutem class, np. class="menu".
Najprościej po selektorze: jeśli nazwa jest poprzedzona kropką (np. .naglowek), to jest to selektor klasy. Gdy w definicji widzisz kilka różnych nazw z kropką, oznacza to użycie wielu klas w selektorach.
Styl lokalny (inline) zapisuje się bezpośrednio w znaczniku HTML w atrybucie style. Reguła w arkuszu CSS (zewnętrznym lub w sekcji stylów) to osobny zapis, który działa przez dopasowanie selektora, a nie przez wpis w atrybucie elementu.
Klasa używa kropki w CSS (np. .box) i może być przypisana wielu elementom. Identyfikator używa znaku # (np. #box) i w praktyce powinien być unikalny w obrębie strony. Oba służą do stylowania, ale mają inne zastosowania i semantykę.
Właściwość text-transform: lowercase wymusza wyświetlanie tekstu małymi literami (wizualnie). Nie zmienia to faktycznej treści w źródle HTML, tylko sposób prezentacji. Aby stwierdzić taki efekt, musisz widzieć tę deklarację w CSS.
Musisz znaleźć deklarację font-size w regule, np. font-size: 14pt;. Sama obecność selektora (np. klasy) nie przesądza o rozmiarze. Zwróć uwagę też na jednostki (pt, px, em, rem), bo mogą dawać inne efekty na ekranie.
Tak. Możesz użyć listy selektorów rozdzielonych przecinkiem (wtedy reguła dotyczy wielu selektorów) albo selektora łączonego, np. .a.b, który pasuje do elementów mających jednocześnie klasy a i b. Interpretacja zależy od zapisu.
Selektor elementu (np. p) stosuje się, gdy chcesz ostylować wszystkie elementy danego typu. Klasy (np. .opis) używa się, gdy styl ma dotyczyć tylko wybranych elementów, niezależnie od ich typu, albo gdy potrzebujesz wariantów wyglądu w różnych miejscach strony.
Częste błędy to pomijanie kropki (klasa) i mylenie jej z elementem HTML, mylenie # z klasą, oraz dopowiadanie efektów "na oko" (np. małe litery, rozmiar czcionki) bez sprawdzenia, czy w deklaracjach są właściwe właściwości jak text-transform lub font-size.
Ćwicz czytanie krótkich fragmentów CSS: rozpoznawanie selektorów (element, klasa, identyfikator), a potem interpretację deklaracji (kolory, czcionki, transformacje tekstu). Dobrą metodą jest tworzenie mini-przykładów w edytorze i sprawdzanie efektu w przeglądarce.
info

Statystycznie 66% uczniów zna prawidłową odpowiedź. średnie

Eksperci podkreślają: "W CSS klasa jest wskazywana selektorem poprzedzonym kropką.Jeżeli w pokazanej definicji stylu występują dwa niezależne selektory klasowe (dwie nazwy z "."), oznacza to, że zdefiniowano dwie klasy."

Źródła:

  • W3C Selectors Level 3, rozdział "Class selectors", https://www.w3.org/TR/selectors-3/#class-html (dostęp: 2026-02-27)
  • MDN Web Docs: Class selectors, https://developer.mozilla.org/en-US/docs/Web/CSS/Class_selectors (dostęp: 2026-02-27)
  • MDN Web Docs: text-transform, https://developer.mozilla.org/en-US/docs/Web/CSS/text-transform (dostęp: 2026-02-27)

Materiały:

  • Dokumentacja MDN: selektory klas w CSS
  • Dokumentacja MDN: właściwość text-transform
  • Dokumentacja MDN: właściwość font-size

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego