KWALIFIKACJA INF3 - CZERWIEC 2021 (test 2)

PYTANIE NR 27.
Wskaż poprawną definicję stylu CSS dla przycisku typu submit o właściwościach: czarny kolor tła, brak obramowania, marginesy wewnętrzne 5 px.
Ilustracja przedstawia cztery różne definicje stylu CSS dla przycisku typu submit.
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
Poprawna definicja musi wskazać selektor input[type=submit] oraz ustawić: czarne tło (np. #000000), brak obramowania (border: none) i margines wewnętrzny 5 px, czyli padding: 5px. Odpowiedzi z margin dotyczą odstępu zewnętrznego, a zapis selektora bez nawiasów kwadratowych jest niepoprawny.

Pełne wyjaśnienie:

W zadaniu trzeba rozpoznać, jak w CSS zapisać regułę stylu dla przycisku wysyłającego formularz, czyli elementu input o atrybucie type równym submit. Do tego służy selektor atrybutu zapisany jako input[type=submit]. Nawiasy kwadratowe są kluczowe: zapis w rodzaju input=submit nie jest poprawnym selektorem CSS i przeglądarka nie dopasuje go do elementu.

Następnie należy spełnić trzy warunki dotyczące właściwości:

  • Czarny kolor tła – realizuje go background-color: #000000; (równoważnie mogłoby być np. black lub zapis RGB, ale w odpowiedziach podano konkretną wartość HEX).
  • Brak obramowania – najczytelniej zapisuje się jako border: none;, co usuwa obramowanie elementu (często spotyka się też border: 0, ale nie rozwiązuje to innych wymagań zadania).
  • Marginesy wewnętrzne 5 px – w modelu pudełkowym CSS jest to padding, czyli odstęp między treścią a obramowaniem. Zapis padding: 5px; ustawia jednakową wartość z każdej strony.

Dlaczego pozostałe propozycje są błędne? Wariant z białym tłem odpada, bo nie spełnia warunku czarnego tła. Warianty używające margin: 5px mylą pojęcia: margin to odstęp na zewnątrz obramowania, a nie "margines wewnętrzny". Dodatkowo odpowiedzi z selektorem bez nawiasów kwadratowych mają błąd składni selektora, więc nawet poprawnie wpisane właściwości nie zostaną zastosowane do właściwego elementu.

Wskazówka egzaminacyjna: gdy w treści pojawiają się "marginesy wewnętrzne", szukaj w odpowiedziach padding; gdy "marginesy zewnętrzne" – margin. To szybki sposób na uniknięcie najczęstszej pomyłki.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
"Marginesy wewnętrzne" to w praktyce padding: odstęp między treścią elementu a jego obramowaniem. Zwiększa "wypełnienie" elementu od środka, np. padding: 5px; doda po 5 px z każdej strony.
Padding działa wewnątrz elementu (między treścią a obramowaniem), a margin działa na zewnątrz obramowania (odstęp od innych elementów). Na egzaminie to częsta pułapka: "wewnętrzne" = padding, "zewnętrzne" = margin.
Użyj selektora atrybutu: input[type=submit]. Nawiasy kwadratowe są obowiązkowe, bo informują CSS, że to warunek na atrybucie. Dzięki temu styl nie obejmie innych pól input, np. tekstowych.
CSS ma własną składnię selektorów. Zapis input=submit nie jest selektorem atrybutu, więc przeglądarka go nie rozpozna i reguła nie dopasuje się do elementów. Poprawny zapis warunku na atrybucie to [type=submit] po nazwie elementu.
W praktyce oba zapisy usuwają widoczną krawędź, ale border: none jest najczytelniejszym sposobem wyrażenia "brak obramowania". Na testach ważne jest też, że samo ustawienie obramowania nie zastąpi wymagania dotyczącego padding lub poprawnego selektora.
Użyj właściwości background-color, np. background-color: #000000;. Alternatywnie można użyć nazwy koloru (np. black) lub RGB, ale w zadaniach egzaminacyjnych często spotkasz zapis szesnastkowy HEX.
Zastosuj padding, np. padding: 5px; lub większą wartość. Padding powiększa przestrzeń wokół tekstu wewnątrz przycisku, co poprawia ergonomię (UX), a jednocześnie nie wymaga zmiany rozmiaru czcionki.
Najczęściej spotkasz px, ale dozwolone są też m.in. em, rem oraz %. W zadaniach podstawowych zwykle używa się pikseli, bo to proste i jednoznaczne, np. padding: 5px;.
Nie. input[type=submit] dotyczy wyłącznie elementów input z atrybutem type równym submit. Element button to inny tag i wymaga osobnego selektora (np. button[type=submit] lub po klasie).
Typowe błędy to: mylenie padding z margin, pomijanie nawiasów kwadratowych w selektorze atrybutu oraz brak jednostki przy wartościach liczbowych (np. "5" zamiast "5px"). W testach sprawdzaj wszystkie warunki po kolei.
info

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

Eksperci podkreślają: "Poprawna definicja musi wskazać selektor input[type=submit] oraz ustawić: czarne tło (np. #000000), brak obramowania (border: none) i margines wewnętrzny 5 px, czyli padding: 5px."

Źródła:

  • MDN Web Docs: Attribute selectors (CSS) – https://developer.mozilla.org/en-US/docs/Web/CSS/Attribute_selectors - dostęp 2026-03-02
  • MDN Web Docs: padding (CSS) – https://developer.mozilla.org/en-US/docs/Web/CSS/padding - dostęp 2026-03-02
  • MDN Web Docs: border (CSS) – https://developer.mozilla.org/en-US/docs/Web/CSS/border - dostęp 2026-03-02

Materiały:

  • Dokumentacja MDN dotycząca selektorów atrybutów w CSS
  • Dokumentacja MDN dla właściwości padding, margin, border i background-color
  • Materiały W3C (Selectors / CSS) opisujące składnię selektorów i właściwości

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego