Kwalifikacje w Zawodzie - Testy zawodowe online | Egzaminy Zawodowe

KWALIFIKACJA PGF7 - TEST WIEDZY NR 7



PYTANIE NR 29.
Poniżej przedstawiono fragment kodu w CSS: 
.banner {
  background-color: #ff0000;
  text-align: center;
  padding: 50px;
  color: #ffffff;
}
Jakie efekty będzie miał powyższy kod na element o klasie "banner"?
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Reguła CSS dla selektora .banner ustawia tło na czerwone (#ff0000), wyrównuje tekst do środka (text-align: center), dodaje wypełnienie wewnętrzne 50px z każdej strony (padding: 50px) oraz ustawia kolor tekstu na biały (#ffffff). Dzięki temu element będzie "czerwoną belką" z białym, wyśrodkowanym napisem.

Pełne wyjaśnienie:

Selektor .banner w CSS dotyczy każdego elementu HTML, który ma przypisaną klasę banner. Wewnątrz bloku deklaracji znajdują się cztery właściwości, które łącznie opisują wygląd takiego elementu.

  • background-color: #ff0000 – ustawia kolor tła elementu na czerwony. Zapis #ff0000 to kolor w formacie szesnastkowym (maksymalna składowa czerwieni, brak zieleni i niebieskiego).
  • text-align: center – wyrównuje zawartość tekstową wewnątrz elementu do środka w osi poziomej. To wpływa na sposób ustawienia linii tekstu, a nie na położenie całego elementu na stronie.
  • padding: 50px – dodaje wypełnienie wewnętrzne (odstęp między treścią a krawędzią obszaru tła/obramowania). Wartość 50px bez dodatkowych parametrów oznacza taki sam padding z góry, dołu, lewej i prawej strony.
  • color: #ffffff – ustawia kolor tekstu (foreground) na biały. W zapisie szesnastkowym #ffffff oznacza maksymalną jasność wszystkich składowych, czyli biel.

Poprawny opis efektu musi uwzględniać, że czerwony jest kolorem tła, a biały jest kolorem tekstu, oraz że padding nie jest marginesem zewnętrznym, tylko przestrzenią wewnątrz elementu.

Dlaczego pozostałe propozycje są błędne? Odpowiedzi mówiące o białym tle przeczą ustawieniu background-color: #ff0000. Warianty z czarnym tekstem nie pasują do color: #ffffff. W praktyce (np. baner reklamowy) takie ustawienie daje duży, czytelny obszar z wyraźnym kontrastem: biały napis na czerwonym tle, wyśrodkowany i "odsunięty" od krawędzi dzięki padding.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Co oznacza selektor .banner w CSS?
Selektor z kropką, np. .banner, wybiera elementy HTML mające klasę banner. Oznacza to, że reguła zadziała na każdy element z atrybutem class zawierającym tę nazwę, niezależnie od tego, czy jest to div, sekcja czy nagłówek.
Jak działa background-color: #ff0000?
Właściwość background-color ustawia kolor tła elementu. Wartość #ff0000 to zapis szesnastkowy koloru czerwonego (dużo czerwieni, brak zieleni i niebieskiego), więc cały obszar tła elementu będzie czerwony.
Dlaczego color i background-color to nie to samo?
color dotyczy koloru tekstu (pierwszego planu), a background-color dotyczy tła (drugiego planu). Częsty błąd na egzaminie to zamiana tych pojęć i opisanie czerwonego tekstu zamiast czerwonego tła.
Co robi text-align: center w banerze?
text-align: center wyrównuje tekst wewnątrz elementu do środka w poziomie. Nie centruje całego elementu na stronie, tylko sposób ułożenia linii tekstu w jego wnętrzu. To typowe ustawienie dla nagłówków i haseł reklamowych.
Co to jest padding: 50px i gdzie widać ten odstęp?
padding to wypełnienie wewnętrzne elementu: przestrzeń między treścią (np. tekstem) a krawędzią obszaru tła. 50px oznacza, że tekst będzie "odsunięty" od krawędzi z każdej strony, a tło będzie sięgało dalej niż sam napis.
Jak rozpoznać kolor #ffffff i #ff0000 na egzaminie?
W zapisie RGB w systemie szesnastkowym #ffffff oznacza biel (wszystkie składowe maksymalne), a #ff0000 oznacza czystą czerwień (maksimum czerwieni, zero pozostałych). Pomaga zasada: "ff" to 255, czyli maksimum danej składowej.
Czy padding: 50px działa na wszystkie strony elementu?
Tak, jeśli podasz jedną wartość (np. 50px), to CSS stosuje ją do góry, prawej, dołu i lewej strony. Inaczej byłoby przy dwóch lub czterech wartościach, ale w tym pytaniu jest tylko jedna, więc odstęp jest równy w każdym kierunku.
Jakie błędy są najczęstsze przy interpretacji takiego kodu CSS?
Najczęściej myli się kolor tła z kolorem tekstu, traktuje padding jak margin (odstęp zewnętrzny) albo zakłada, że text-align centruje cały element. Warto czytać deklaracje po kolei i przypisać każdej z nich konkretny efekt wizualny.
Jak taki styl może pomóc w przekazie reklamowym?
Czerwone tło przyciąga uwagę, biały tekst daje wysoki kontrast i czytelność, a duży padding zwiększa "oddech" kompozycji, przez co hasło wygląda profesjonalnie. Wyśrodkowanie tekstu jest typowe dla banerów i sekcji promocyjnych na landing page.
Jak sprawdzić działanie tej reguły w praktyce?
Dodaj element HTML z klasą banner i wklej regułę CSS do arkusza lub do sekcji stylów. Następnie otwórz stronę w przeglądarce i użyj narzędzi deweloperskich, aby zobaczyć zastosowane style oraz model pudełkowy (obszar treści i padding).
info

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

Eksperci podkreślają: "Dzięki temu element będzie "czerwoną belką" z białym, wyśrodkowanym napisem."

Źródła:

  • MDN Web Docs: background-color — https://developer.mozilla.org/en-US/docs/Web/CSS/background-color (accessed 2026-03-01)
  • MDN Web Docs: text-align — https://developer.mozilla.org/en-US/docs/Web/CSS/text-align (accessed 2026-03-01)
  • MDN Web Docs: padding — https://developer.mozilla.org/en-US/docs/Web/CSS/padding (accessed 2026-03-01)

Materiały:

  • Dokumentacja MDN Web Docs: podstawy CSS i selektory
  • Materiały o modelu pudełkowym CSS (box model) z przykładami
  • Ćwiczenia praktyczne: tworzenie banerów HTML/CSS i testowanie właściwości w przeglądarce
Zobacz też:

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego