KWALIFIKACJA INF3 - CZERWIEC 2019

PYTANIE NR 12.
W stylach CSS, aby ustalić styl linii obramowania jako linię kreskową, należy zastosować wartość
A.
B.
C.
D.
Wyjaśnienie poprawnej odpowiedzi:
W CSS styl linii obramowania ustala się właściwością border-style. Aby uzyskać linię kreskową, stosuje się wartość dashed. Wartość dotted daje linię kropkowaną, solid ciągłą, a groove tworzy efekt trójwymiarowego "żłobienia".

Pełne wyjaśnienie:

W arkuszach stylów CSS wygląd obramowania elementu (ramki) opisuje się m.in. przez trzy podstawowe cechy: szerokość (border-width), styl linii (border-style) oraz kolor (border-color). W tym pytaniu interesuje nas wyłącznie styl linii.

Właściwość border-style przyjmuje z góry zdefiniowane wartości, które określają sposób rysowania krawędzi. Aby otrzymać obramowanie w postaci linii kreskowej, należy użyć wartości dashed. To standardowa wartość CSS, która powoduje, że przeglądarka renderuje krawędź jako sekwencję kresek (odcinków) rozdzielonych przerwami.

  • "dotted" jest niepoprawne w tym kontekście, bo oznacza obramowanie kropkowane (ciąg punktów), a nie kreskowane.
  • "solid" daje linię ciągłą, więc nie spełnia warunku "kreskową". To częsty wybór, bo jest najpopularniejszy w praktyce, ale nie odpowiada treści pytania.
  • "groove" nie opisuje kreskowania, tylko styl z efektem wizualnym przypominającym wcięcie/żłobienie (wrażenie 3D). Może wyglądać atrakcyjnie, ale nie jest linią kreskową.

W praktyce spotkasz zapis np. border: 2px dashed #333;, który łączy szerokość, styl i kolor. Na egzaminie warto zapamiętać parę: dotted = kropki, dashed = kreski, aby nie pomylić podobnych nazw.

Dodatkowe pytania

Dodatkowe pytania (FAQ):
Wartość dashed (dla border-style) oznacza, że obramowanie elementu ma być rysowane jako linia kreskowana, czyli złożona z odcinków rozdzielonych przerwami. To jedna ze standardowych wartości stylu obramowania w CSS.
dashed tworzy obramowanie kreskowane (kreski i przerwy), a dotted tworzy obramowanie kropkowane (punkty). Obie wartości dotyczą border-style, ale dają inny efekt wizualny.
Użyj właściwości krawędziowej, np. border-bottom-style: dashed; oraz ustaw szerokość i kolor, np. border-bottom-width i border-bottom-color. Dzięki temu kreskowanie dotyczy tylko dolnej krawędzi.
Renderowanie kresek zależy od silnika przeglądarki i od parametrów takich jak grubość obramowania, skala urządzenia i antyaliasing. Standard określa ideę stylu, ale szczegóły (np. długość kreski) mogą się minimalnie różnić wizualnie.
Nie. groove nie tworzy kresek ani kropek, tylko efekt "wcięcia" (3D), zależny także od koloru obramowania. Jeśli pytanie dotyczy linii kreskowej, właściwą wartością będzie dashed, nie groove.
Skrót border pozwala ustawić kilka cech naraz: szerokość, styl i kolor. Przykład: border: 2px dashed #000;. To szybsze niż osobne wpisy, o ile nie musisz różnicować każdej krawędzi.
Najczęściej do oznaczania elementów pomocniczych lub "tymczasowych": obszarów do przeciągania (drag&drop), podglądu siatki, wyróżnienia sekcji w panelach admina czy zaznaczenia stanu "do uzupełnienia" w formularzu.
Poza dashed często pojawiają się: solid (linia ciągła), dotted (kropki), double (podwójna linia), none (brak obramowania) oraz style 3D jak groove czy ridge.
W klasycznym border-style: dashed nie ustalasz bezpośrednio długości kreski i przerw — to robi przeglądarka. Jeśli potrzebujesz pełnej kontroli, zwykle stosuje się alternatywy, np. tło z gradientem lub obramowanie SVG.
Najczęstsze pomyłki to zamiana dotted z dashed (kropki vs kreski) oraz wybór solid z przyzwyczajenia. Często też miesza się styl linii z inną cechą obramowania, np. z szerokością lub kolorem.
info

Około 82% zdających odpowiada poprawnie na to pytanie. średnio łatwe

W praktyce zawodowej kluczowe jest to, że w CSS styl linii obramowania ustala się właściwością border-style.

Źródła:

  • MDN Web Docs: "border-style" — https://developer.mozilla.org/en-US/docs/Web/CSS/border-style (dostęp: 2026-03-01)
  • MDN Web Docs: "border" (shorthand) — https://developer.mozilla.org/en-US/docs/Web/CSS/border (dostęp: 2026-03-01)
  • W3C / CSS Working Group Editor’s Draft: "CSS Backgrounds and Borders Module Level 3" (definicja border-style) — https://drafts.csswg.org/css-backgrounds-3/ (dostęp: 2026-03-01)

Materiały:

  • Dokumentacja MDN dotycząca właściwości border-style
  • Specyfikacja CSS Backgrounds and Borders (rozdział o border-style)
  • Ćwiczenia praktyczne: tworzenie ramek o różnych stylach i porównanie renderowania w przeglądarkach

Aktualizacja pytania: 31.03.2026



Aktualizacja pytania: 31.03.2026
📡 Brak połączenia internetowego