Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Q: Do jakiej kwalifikacji zawodowej należy to pytanie?

To pytanie pochodzi z kwalifikacji INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych. Wymagana w zawodach: Technik informatyk, Technik programista.

Q: W jakim zawodzie przydaje się ta wiedza?

Wiedza ta jest potrzebna w zawodach: TECHNIK INFORMATYK oraz TECHNIK PROGRAMISTA.

Q: Gdzie mogę przećwiczyć więcej pytań z kwalifikacji INF.03?

Więcej pytań z kwalifikacji INF.03 znajdziesz na Zawodowe.edu.pl - darmowa baza pytań CKE z symulatorem egzaminu.

Question

Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych

Zawód: Technik informatyk , Technik programista

Kategorie: Tworzenie stron WWW Programowanie webowe

Dla przedstawionego fragmentu dokumentu HTML:

<div class="menu"></div>

zdefiniowano formatowanie CSS selektora klasy "menu" tak, aby kolor tła bloku był zielony. Która definicja stylu CSS odpowiada temu formatowaniu?

Wybrany selektor `div.menu { background-color: green; }` dokładnie pasuje do podanego fragmentu HTML: `<div class="menu"></div>`. W CSS zapis `div.menu` oznacza element typu `<div>`, który ma atrybut `class` ustawiony na `menu`. Kropka w selektorze zawsze oznacza klasę, więc `menu` po kropce to nazwa klasy, a nie nazwa znacznika. Dzięki temu styl zostanie zastosowany tylko do tych elementów `div`, które mają klasę `menu`, a nie do wszystkich divów na stronie. Właśnie tak zgodnie ze standardami CSS definiuje się wygląd elementów z konkretną klasą. Własność `background-color: green;` ustawia kolor tła danego bloku na zielony. Można tu używać różnych zapisów kolorów: nazw (green), wartości heksadecymalnych (`#00ff00`), funkcji `rgb()` czy `hsl()`. W tym pytaniu istotne jest jednak nie tyle to, jak dokładnie zapisano kolor, tylko czy selektor trafia w odpowiedni element HTML. W praktyce bardzo często używa się klas do stylowania wielu podobnych elementów, np. `.menu`, `.btn-primary`, `.card`. Z mojego doświadczenia lepiej unikać nadmiernego używania identyfikatorów (`id`) do stylowania, a zamiast tego bazować właśnie na klasach, bo klasy można wielokrotnie powtarzać w dokumencie i są bardziej elastyczne. Dodatkowo selektor z typem elementu (`div.menu`) jest trochę bardziej precyzyjny niż samo `.menu`, co bywa przydatne, gdy ta sama klasa pojawia się na różnych znacznikach, a chcemy kontrolować konkretne przypadki. W nowoczesnym front-endzie takie podejście jest zgodne z dobrymi praktykami: czytelne, przewidywalne i zgodne ze specyfikacją CSS.

Podstawowy problem w niepoprawnych odpowiedziach wynika z mylenia różnych rodzajów selektorów CSS: typu, klasy i identyfikatora, a także pseudo-klas. W HTML mamy wyraźnie wskazany element `<div class="menu"></div>`. Atrybut `class` mówi wprost, że do stylowania należy użyć selektora klasy, czyli zapisu z kropką: `.menu` lub bardziej precyzyjnie `div.menu`. Użycie dwukropka w zapisie `div:menu` wygląda jak próba zastosowania pseudo-klasy, ale `menu` nie jest żadną standardową pseudo-klasą CSS. Pseudo-klasy to np. `:hover`, `:active`, `:first-child`. Przeglądarka taki selektor po prostu zignoruje, więc styl się nie zastosuje. Kolejnym typowym nieporozumieniem jest zamiana klasy na identyfikator. Znak `#` w CSS oznacza selektor id, więc `#menu` pasowałby do elementu `<div id="menu">`, a nie do `<div class="menu">`. Id i klasa to dwie różne rzeczy: id powinno być unikalne w całym dokumencie, a klasę można stosować wielokrotnie. W realnych projektach front-endowych mieszanie tych dwóch mechanizmów prowadzi do chaosu w kodzie i trudnych do wykrycia błędów, dlatego warto od początku rozróżniać `.` od `#` bardzo świadomie. Pojawia się też zapis `menu { background-color: rgb(0,255,0); }`. Taki selektor odnosi się do znacznika HTML o nazwie `menu`, czyli do `<menu>...</menu>`. Istnieje taki tag w HTML5, ale w pytaniu nie ma go w ogóle, jest zwykły `<div>`. Sam fakt, że klasa nazywa się „menu”, nie oznacza, że selektor typu `menu` będzie pasował. CSS nie „zgaduje” naszych intencji, tylko ściśle dopasowuje selektor do struktury dokumentu. To częsty błąd myślowy: patrzymy na nazwę klasy i podświadomie traktujemy ją jak nazwę znacznika. Moim zdaniem kluczowa lekcja z tego pytania jest taka: najpierw patrzymy na HTML i dokładnie identyfikujemy, czy mamy do czynienia z klasą (`class`), identyfikatorem (`id`), czy konkretnym tagiem (`div`, `p`, `nav` itd.). Dopiero potem dobieramy odpowiedni selektor CSS: `.` dla klasy, `#` dla id, samą nazwę znacznika dla selektora typu. Takie systematyczne podejście bardzo ułatwia dalszą pracę z arkuszami stylów i pomaga budować czytelne, skalowalne style zgodnie z dobrymi praktykami branżowymi.

Answer 1

A. #menu { background-color: rgb(0,255,0); }

Answer 2

B. menu { background-color: rgb(0,255,0); }

Answer 3

C. div.menu { background-color: green; }

Answer 4

D. div:menu { color: green; }

Dla przedstawionego fragmentu dokumentu HTML: <div class="menu"></div> zdefiniowano formatowanie CSS selektora klasy "menu" tak, aby kolor tła bloku był zielony. Która definicja stylu CSS odpowiada temu formatowaniu?

Odpowiedzi

Informacja zwrotna

Dla przedstawionego fragmentu dokumentu HTML:
<div class="menu"></div>
zdefiniowano formatowanie CSS selektora klasy "menu" tak, aby kolor tła bloku był zielony. Która definicja stylu CSS odpowiada temu formatowaniu?