#przycisk { background-color: white; padding: 10px; border-width: 2px; border-bottom-style: dashed; } Wskaż przycisk sformatowany przedstawionym...
#przycisk { background-color: white; padding: 10px; border-width: 2px; border-bottom-style: dashed; }Wskaż przycisk sformatowany przedstawionym stylem CSS.
A. Przycisk 4
B. Przycisk 3
C. Przycisk 2
D. Przycisk 1
Pytanie z egzaminu CKE, styczeń 2023 (arkusz EE.09-SG-23.01).
Poprawny jest Przycisk 2, ponieważ jego wygląd odpowiada regułom zapisanym w selektorze #przycisk. Znak # w CSS oznacza selektor identyfikatora, czyli styl zostanie zastosowany do elementu mającego atrybut id równy przycisk. W praktyce byłoby to na przykład button id='przycisk'. W podanym stylu tło ma być białe, bo background-color: white ustawia biały kolor obszaru elementu. Właściwość padding: 10px dodaje wewnętrzny odstęp między tekstem przycisku a jego krawędzią, więc taki przycisk nie wygląda na zbyt ciasny. border-width: 2px określa grubość obramowania, a border-bottom-style: dashed powoduje, że dolna krawędź ramki jest linią przerywaną. To właśnie ta dolna przerywana linia jest najważniejszą cechą rozpoznawczą. Moim zdaniem w takich zadaniach najlepiej patrzeć nie tylko na kolor tła, ale też na szczegóły obramowania, bo one często odróżniają bardzo podobne przyciski. W dobrej praktyce CSS zwykle zapisuje się też pełne deklaracje obramowania, np. border-bottom: 2px dashed black, ponieważ kod jest wtedy czytelniejszy i mniej zależny od domyślnych stylów przeglądarki.
Jeżeli wybrany został Przycisk 1, Przycisk 3 albo Przycisk 4, to najpewniej pomylony został któryś z istotnych szczegółów stylu CSS. W tym przykładzie nie wystarczy zauważyć, że element wygląda jak zwykły przycisk albo że ma jasne tło. Trzeba połączyć kilka cech naraz: białe tło, wewnętrzny odstęp 10px, obramowanie o grubości 2px oraz przede wszystkim dolną krawędź obramowania narysowaną stylem dashed, czyli linią przerywaną. Bardzo częsty błąd polega na patrzeniu tylko na jedną właściwość, na przykład na background-color: white, i ignorowaniu border-bottom-style. A w CSS szczegóły obramowania są ważne, bo solid, dashed, dotted czy none dają zupełnie inny efekt wizualny. Druga pułapka to mylenie paddingu z marginesem. Padding powiększa przestrzeń wewnątrz przycisku, między napisem a ramką, a margin odsuwałby cały przycisk od innych elementów. Tutaj marginesu w ogóle nie ustawiono. Warto też pamiętać, że border-width sam nie mówi jeszcze wszystkiego o wyglądzie ramki. O widoczności i rodzaju linii decyduje styl obramowania, w tym przypadku ustawiony dla dolnej krawędzi. Z mojego doświadczenia najłatwiej rozwiązywać takie pytania przez spokojne przełożenie każdej deklaracji CSS na wygląd: kolor tła, odstęp wewnętrzny, grubość ramki, rodzaj dolnej linii. Wtedy od razu widać, że pasuje tylko przycisk z białym tłem i przerywaną dolną krawędzią.