Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA AUD5 - TEST WIEDZY NR 1



PYTANIE NR 34.
Rozważ następujący fragment kodu CSS: 

#myDiv {
    background-color: #ff0000;
    color: #000000;
    width: 200px;
    height: 200px;
}
Wykorzystując powyższy kod, stworzono div o identyfikatorze "myDiv". Jak będzie wyglądał ten div na stronie internetowej?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Selektor #myDiv dotyczy elementu o identyfikatorze "myDiv". Właściwość background-color: #ff0000 ustawia czerwone tło, a color: #000000 ustawia czarny kolor tekstu. width i height po 200 px dają obszar 200×200 px, czyli kwadrat.

Pełne wyjaśnienie:

W CSS zapis #myDiv jest selektorem identyfikatora: reguła zostanie zastosowana do elementu HTML, który ma atrybut id="myDiv" (np. <div id="myDiv">Tekst</div>). To ważne, bo identyfikator odróżnia ten jeden konkretny element od innych na stronie.

Następnie analizujemy deklaracje wewnątrz bloku:

  • background-color: #ff0000; — ustawia kolor tła elementu. W zapisie szesnastkowym #ff0000 oznacza czystą czerwień (maksymalna składowa czerwieni, brak zieleni i niebieskiego).
  • color: #000000; — ustawia kolor tekstu wewnątrz elementu. #000000 to kolor czarny.
  • width: 200px; oraz height: 200px; — określają wymiary obszaru elementu na 200 pikseli szerokości i 200 pikseli wysokości.

W efekcie otrzymujemy element o stałym rozmiarze 200×200 px, który jest wizualnie kwadratem. Jeśli w <div> znajduje się jakiś tekst, będzie on wyświetlany kolorem czarnym na czerwonym tle.

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

  • "Białe tło i czarny tekst" — tło nie jest białe, bo background-color ustawiono na czerwień.
  • "Czarne tło i czerwony tekst" — to odwrócenie ról właściwości: czerwony kolor dotyczy tła, a czarny dotyczy tekstu.
  • "Czerwone tło i biały tekst" — tekst jest czarny, bo color ustawiono na #000000, a nie na #ffffff.

Wskazówka egzaminacyjna: zawsze czytaj osobno właściwości dotyczące tła (background-*) i tekstu (color) oraz sprawdź wymiary, bo często odpowiadają za kształt (kwadrat/prostokąt).

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co oznacza selektor #myDiv w CSS?
Selektor #myDiv wybiera element HTML o atrybucie id="myDiv". Oznacza to, że reguły CSS z tego bloku będą dotyczyć właśnie tego jednego elementu (np. <div id="myDiv">...</div>), a nie wszystkich elementów <div>.
Jak odczytać kolor #ff0000 w zapisie szesnastkowym?
#ff0000 to zapis RGB w systemie szesnastkowym: ff (255) dla czerwieni oraz 00 (0) dla zieleni i niebieskiego. W praktyce daje to intensywną, czystą czerwień. Taki zapis jest standardem w CSS i często występuje w zadaniach egzaminacyjnych.
Dlaczego color nie zmienia tła elementu?
W CSS właściwość color odpowiada za kolor tekstu (foreground). Tło kontroluje osobna właściwość background-color. To częsta pułapka: jeśli chcesz zmienić tło kafelka lub baneru, używasz background-color, a nie color.
Co się stanie, jeśli w divie nie ma żadnego tekstu?
Nadal zobaczysz blok o wymiarach 200×200 px i czerwonym tle, ponieważ width, height oraz background-color działają niezależnie od treści. Po prostu nie będzie w nim widocznych znaków, więc właściwość color nie ujawni się w praktyce.
Jakie są różnice między id a class w CSS?
id (selektor #) identyfikuje pojedynczy, unikalny element na stronie, a class (selektor .) może być użyta dla wielu elementów. W projektach multimedialnych zwykle class służy do stylowania powtarzalnych komponentów, a id do wyjątkowych sekcji lub punktów zaczepienia.
Czy width i height zawsze tworzą kwadrat 200×200 px?
Tak, jeśli ustawisz width: 200px i height: 200px, obszar treści ma 200×200 px, czyli jest kwadratem. Uwaga: dodatkowe własności jak padding, border i box-sizing mogą zmienić rozmiar widoczny na ekranie, dlatego warto o nich pamiętać.
Jak sprawdzić w przeglądarce, jakie style ma element myDiv?
Użyj narzędzi deweloperskich (Inspect/Zbadaj element). Kliknij element <div id="myDiv"> i przejdź do zakładki stylów, aby zobaczyć zastosowane reguły oraz ich źródło. To praktyczna umiejętność przy wdrażaniu projektów graficznych na strony WWW.
Dlaczego w zadaniach myli się tło z tekstem?
Najczęściej działa automatyzm: uczący się widzą dwa kolory i intuicyjnie "przepisują" je bez przypisania do roli. Warto stosować prostą regułę: background = tło, color = tekst. Na egzaminie pomaga też szybkie sprawdzenie, czy kontrast tekst–tło ma sens.
Jak zmienić tekst na biały przy czerwonym tle?
Trzeba zmienić deklarację color na białą, np. color: #ffffff;, a background-color zostawić jako #ff0000. Wtedy tło pozostaje czerwone, a litery są białe. To częsty zabieg w projektowaniu przycisków i banerów.
Jak przygotować się do pytań o CSS na egzaminie multimedialnym?
Ćwicz czytanie krótkich fragmentów CSS i przewidywanie efektu: kolory, rozmiary, marginesy, obramowania. Twórz mini-przykłady w pliku HTML i testuj je w przeglądarce. Zapamiętaj podstawowe selektory (#, . oraz nazwy tagów) i najczęstsze właściwości, bo to podstawa wielu zadań.
info

To pytanie poprawnie rozwiązuje 78% zdających egzamin. średnio łatwe

Eksperci podkreślają: "Selektor #myDiv dotyczy elementu o identyfikatorze "myDiv"."

Źródła:

  • MDN Web Docs: "background-color" — https://developer.mozilla.org/en-US/docs/Web/CSS/background-color (accessed 2026-02-18)
  • MDN Web Docs: "color" — https://developer.mozilla.org/en-US/docs/Web/CSS/color (accessed 2026-02-18)
  • W3C: "Selectors Level 4" — sekcja dot. selektorów identyfikatora (#id) — https://www.w3.org/TR/selectors-4/ (accessed 2026-02-18)

Materiały:

  • Dokumentacja MDN: właściwości background-color, color, width, height
  • W3C CSS Color Module Level 4 (opis zapisu kolorów)
  • W3C Selectors Level 4 (selekcja po identyfikatorze)
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego