Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA INF3 - CZERWIEC 2018



PYTANIE NR 10.
Przedstawione formatowanie CSS sprawi, że dla prezentowanego nagłówka trzeciego stopnia

<style> h3 { background-color: grey; } </style>
…
<h3 style="background-color: orange;">Rozdział 1.2.2.</h3>

A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Deklaracja background-color ustawiona w atrybucie style elementu <h3> ma wyższy priorytet niż reguła h3 z sekcji <style>. Dlatego reguła z arkusza osadzonego (szare tło) zostanie nadpisana i tło nagłówka będzie pomarańczowe.

Pełne wyjaśnienie:

W CSS ostateczny wygląd elementu wynika z kaskadowości: przeglądarka porównuje deklaracje dla tej samej właściwości i wybiera tę, która ma wyższy priorytet w kaskadzie.

W zadaniu istnieją dwie deklaracje dla tej samej właściwości background-color elementu <h3>:

  • Reguła w sekcji <style>: h3 { background-color: grey; }
  • Styl inline w znaczniku: <h3 style="background-color: orange;">...</h3>

Styl inline (atrybut style) ma wyższy priorytet niż reguły z arkusza osadzonego, o ile nie użyto wyjątków typu !important (którego tutaj nie ma). W efekcie deklaracja background-color: orange nadpisuje background-color: grey.

Dlaczego pozostałe odpowiedzi są błędne?

  • "tło będzie szare" – byłoby prawdą tylko wtedy, gdyby nie było stylu inline ustawiającego tło lub gdyby reguła szara miała wyższy priorytet (np. przez inne mechanizmy). Tutaj wygrywa inline.
  • "kolor czcionki będzie szary" – zadanie dotyczy właściwości background-color, a nie color. Samo ustawienie tła nie zmienia koloru tekstu.
  • "kolor czcionki będzie pomarańczowy" – analogicznie: ustawiono tło na pomarańczowe, nie kolor czcionki. Kolor tekstu pozostałby domyślny lub wynikałby z innych reguł color, których w zadaniu nie pokazano.

W praktyce warto pamiętać zasadę egzaminacyjną: gdy ta sama właściwość jest ustawiona w arkuszu CSS i w atrybucie style, zwykle wygrywa styl inline, bo jest najbardziej "bezpośredni" dla danego elementu.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co to jest kaskadowość CSS i dlaczego ma znaczenie w tym zadaniu?
Kaskadowość CSS to mechanizm wybierania, która deklaracja stylu "wygra", gdy wiele reguł dotyczy tej samej właściwości elementu. W tym zadaniu są dwie deklaracje background-color dla <h3>, więc trzeba ustalić priorytet i wybrać tę skuteczną.
Jak działa priorytet stylu inline w porównaniu z regułą w <style>?
Styl inline (atrybut style w znaczniku, np. <h3 style="...">) ma zwykle wyższy priorytet niż reguły z arkusza osadzonego w <style>. Dlatego może nadpisywać deklaracje z selektorów takich jak h3.
Dlaczego w przykładzie tło jest pomarańczowe, a nie szare?
Obie deklaracje ustawiają tę samą właściwość: background-color. Reguła w <style> daje szare tło, ale styl inline w <h3> ustawia pomarańczowe. Ponieważ inline ma wyższy priorytet, ostatecznie widzisz pomarańczowe tło.
Czy ustawienie background-color zmienia też kolor tekstu (czcionki)?
Nie. background-color dotyczy tła elementu, a kolor tekstu ustala właściwość color. Jeśli w kodzie nie ma deklaracji color, przeglądarka użyje wartości domyślnej albo wynikającej z innych reguł CSS.
Jakie są najczęstsze pomyłki uczniów w pytaniach o CSS cascade?
Najczęściej myli się background-color z color, ignoruje styl inline w atrybucie style albo zakłada, że "reguła z <style> zawsze działa". Warto zawsze sprawdzić, czy element nie ma stylu inline nadpisującego arkusz.
Czy kolejność reguł w <style> ma znaczenie, gdy jest też styl inline?
Kolejność w <style> ma znaczenie między regułami o podobnym priorytecie, ale styl inline zwykle i tak je przebija dla tej samej właściwości. Wyjątki mogą wynikać np. z !important lub innych ustawień, ale w tym typie zadań inline wygrywa.
Kiedy zamiast stylu inline lepiej użyć klasy CSS dla nagłówka?
W praktyce częściej używa się klas (np. .rozdzial) w pliku/sekcji CSS, bo to ułatwia utrzymanie i ponowne użycie stylów. Styl inline utrudnia refaktoryzację i potrafi niechcący nadpisywać reguły globalne, co komplikuje diagnostykę.
Jak sprawdzić w DevTools, która reguła ustawia tło elementu <h3>?
W narzędziach deweloperskich przeglądarki wybierz element <h3> i otwórz zakładkę Styles lub Computed. Zobaczysz listę reguł ustawiających background-color oraz informację, która została zastosowana, a które są nadpisane.
Czy selektor h3 jest mniej "ważny" niż atrybut style?
Tak w sensie kaskady: selektor h3 to zwykła reguła z arkusza, a atrybut style jest przypisany bezpośrednio do elementu. Dlatego przy konflikcie tej samej właściwości wynik zwykle pochodzi ze stylu inline, a nie z selektora.
Jak przygotować się do egzaminu INF.3 z pytań o CSS i HTML?
Ćwicz analizę krótkich fragmentów HTML/CSS: selektory, klasy, identyfikatory, inline, <style> i pliki zewnętrzne. Rób zadania, w których trzeba przewidzieć wynik (tło, marginesy, układ), a potem sprawdzaj w przeglądarce i w DevTools, skąd pochodzi finalny styl.
info

To pytanie poprawnie rozwiązuje 65% zdających egzamin. średnie

Eksperci podkreślają: "Deklaracja background-color ustawiona w atrybucie style elementu &lt;h3&gt; ma wyższy priorytet niż reguła h3 z sekcji &lt;style&gt;."

Źródła:

  • MDN Web Docs: CSS Cascade (Cascade, specificity and inheritance) — https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_and_inheritance (dostęp: 2026-02-18)
  • MDN Web Docs: style attribute (HTML) — https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/style (dostęp: 2026-02-18)
  • W3C: CSS Cascading and Inheritance Level 3 (CR), rozdział o kaskadzie i pochodzeniu deklaracji — https://www.w3.org/TR/css-cascade-3/ (dostęp: 2026-02-18)

Materiały:

  • Dokumentacja MDN o kaskadowości i priorytetach CSS
  • Specyfikacja CSS Cascading and Inheritance (rozdziały o kaskadzie)
  • Ćwiczenia z DevTools: zakładka "Styles/Computed" dla elementu &lt;h3&gt;

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego