KWALIFIKACJA INF3 - CZERWIEC 2019

PYTANIE NR 15.
Podany styl tworzy obramowanie pojedyncze, o następujących cechach:
Ilustracja przedstawia fragment kodu CSS, który definiuje styl obramowania dla elementu HTML.
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
W zapisie czterowartościowym kolory (i inne wartości) przypisuje się kolejno do stron obramowania: góra, prawo, dół, lewo (TRBL).
Dlatego poprawny opis to taki, w którym czerwień dotyczy krawędzi górnej, niebieski prawej, zielony dolnej, a żółty lewej.

Pełne wyjaśnienie:

Właściwości obramowania (ramki) elementu mogą przyjmować cztery wartości, aby osobno ustawić parametry dla każdej krawędzi. Dla takich zapisów obowiązuje standardowa kolejność stron: góra → prawo → dół → lewo. To popularna reguła zapamiętywana skrótem TRBL (Top, Right, Bottom, Left).

Jeżeli w stylu podano cztery kolory, to pierwszy kolor dotyczy krawędzi górnej, drugi krawędzi prawej, trzeci krawędzi dolnej, a czwarty krawędzi lewej. Z tego wynika, że poprawny opis obramowania musi przypisywać barwy dokładnie w tej kolejności: czerwona góra, niebieskie prawo, zielony dół, żółta lewa.

Pozostałe odpowiedzi są błędne, bo reprezentują typowe pomyłki w kolejności:

  • Jedna z nich przesuwa kolory na inne krawędzie (np. przypisuje czerwień do prawej strony), co odpowiada błędnemu "obrotowi" kolejności.
  • Inna zamienia lewą z prawą (albo przestawia środek sekwencji), co często wynika z mylenia reguły TRBL z inną konwencją zapisu.
  • Kolejna przypisuje pierwszy kolor do lewej krawędzi, co bywa skutkiem intuicyjnego czytania od lewej strony zamiast trzymania się ustalonej kolejności stron.

W praktyce, aby uniknąć błędów na egzaminie, warto po przeczytaniu każdej z czterech wartości szybko "odkliknąć" w głowie mapę: góra, potem prawo, potem dół, na końcu lewo i dopiero wtedy porównać z opisem w odpowiedzi.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
W zapisie czteroelementowym wartości przypisuje się kolejno do stron: góra, prawo, dół, lewo (TRBL). To dotyczy m.in. kolorów, szerokości i stylu obramowania, gdy podasz 4 wartości.
To ustalona konwencja ułatwiająca skrótowy zapis dla czterech stron elementu. Dzięki stałej kolejności przeglądarka jednoznacznie wie, która wartość dotyczy której krawędzi, a programista może szybko czytać i pisać deklaracje.
TRBL to mnemotechnika od angielskich słów: Top, Right, Bottom, Left. W praktyce oznacza kolejność przypisywania 4 wartości: góra → prawo → dół → lewo, np. przy kolorach lub szerokościach ramki.
Najczęściej myli się kolejność stron (np. góra–lewo–dół–prawo) albo przesuwa się kolory "o jedną krawędź" przez brak weryfikacji wszystkich czterech stron. Pomaga nawyk: zawsze wypowiedzieć w głowie kolejno góra, prawo, dół, lewo.
Tak, przy dwóch wartościach typowo pierwsza dotyczy góry i dołu, a druga lewej i prawej. To wynika z reguł rozwijania skrótów. Na egzaminie zwracaj uwagę, ile wartości podano: 1, 2, 3 czy 4.
Trzy wartości stosuje się, gdy jedna z krawędzi ma powtórzyć kolor z przeciwnej strony. Typowe mapowanie: 1) góra, 2) lewo i prawo, 3) dół. Zasada jest analogiczna jak w innych skrótach dla czterech stron.
Użyj narzędzi deweloperskich (inspektora). Zaznacz element i w panelu stylów odszukaj właściwości obramowania. W widoku modelu pudełkowego często widać osobno wartości dla każdej strony, co ułatwia potwierdzenie przypisania kolorów.
Nie. Ta kolejność pojawia się szeroko przy właściwościach "czterostronnych", np. odstępach zewnętrznych i wewnętrznych. Jeśli widzisz zapis z 4 wartościami dla stron elementu, bardzo często obowiązuje właśnie schemat góra → prawo → dół → lewo.
Ćwicz czytanie krótkich deklaracji i natychmiastowe mapowanie ich na strony elementu. Przygotuj własną ściągę TRBL i rozwiązuj mini-zadania: podaj, jaki kolor/szerokość ma każda krawędź. Pomaga też testowanie w prostym pliku HTML.
Najpierw wypisz w myślach kolejność stron: góra, prawo, dół, lewo. Następnie porównaj opis odpowiedzi z tą kolejnością, linia po linii. Unikaj zgadywania po jednym fragmencie (np. tylko po krawędzi górnej), bo reszta może być zamieniona.
info

Około 55% zdających odpowiada poprawnie na to pytanie. średnie

Źródła:

  • MDN Web Docs: border-color (kolejność wartości dla 1–4 wartości), https://developer.mozilla.org/en-US/docs/Web/CSS/border-color - accessed 2026-02-27
  • MDN Web Docs: CSS shorthand properties (zasady skrótów i rozwijania wartości), https://developer.mozilla.org/en-US/docs/Web/CSS/Shorthand_properties - accessed 2026-02-27
  • W3C: CSS Backgrounds and Borders Module Level 3 (właściwości obramowania), https://www.w3.org/TR/css-backgrounds-3/ - accessed 2026-02-27

Materiały:

  • Dokumentacja właściwości obramowania w arkuszach stylów (referencje przeglądarek)
  • Ćwiczenia praktyczne: tworzenie ramek z różnymi kolorami krawędzi dla elementów blokowych
  • Tablice/ściągi z kolejnością wartości: góra–prawo–dół–lewo (TRBL)

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego