<div id="menu"></div> Dla przedstawionego fragmentu dokumentu HTML zdefiniowano formatowanie CSS selektora identyfikatora „menu” tak, aby kolor tła...
<div id="menu"></div>Dla przedstawionego fragmentu dokumentu HTML zdefiniowano formatowanie CSS selektora identyfikatora „menu” tak, aby kolor tła bloku był zielony. Która definicja stylu CSS odpowiada temu formatowaniu?
A.
#menu { color: green; }
B.
.menu { background-color: green; }
C.
#menu { background-color: green; }
D.
div:menu { background-color: green; }
Selektor #menu jest właściwy, ponieważ w CSS znak # oznacza selektor identyfikatora, czyli odwołanie do elementu mającego atrybut id o konkretnej wartości. W podanym fragmencie HTML element div ma identyfikator menu, więc reguła #menu { background-color: green; } trafi dokładnie w ten blok i ustawi mu zielone tło. Właściwość background-color odpowiada za kolor tła elementu, a nie za kolor tekstu. To ważne rozróżnienie, bo w praktyce bardzo często osobno ustawia się tło kontenera, a osobno kolor napisów za pomocą color. Z mojego doświadczenia najlepiej zapamiętać to tak: # wybiera id, kropka wybiera klasę, a background-color maluje tło. W dobrych praktykach HTML identyfikator id powinien być unikalny w dokumencie, więc #menu nadaje się np. do głównego bloku nawigacji strony. W większych projektach częściej używa się klas do stylowania wielu podobnych elementów, ale dla pojedynczego, konkretnego elementu selektor identyfikatora jest jak najbardziej poprawny.
W tym zadaniu łatwo pomylić kilka podobnie wyglądających składni CSS, ale każda z nich znaczy coś innego. Zapis .menu odnosi się do klasy, czyli zadziałałby dopiero wtedy, gdy element HTML miałby atrybut class o wartości menu. Tutaj mamy jednak id, a nie class, więc kropka nie pasuje do struktury dokumentu. To typowy błąd, bo nazwa menu wygląda tak samo, ale znak przed nią całkowicie zmienia znaczenie selektora. Z kolei zapis div:menu sugeruje użycie pseudoklasy albo pseudoelementu powiązanego z elementem div. W standardowym CSS nie istnieje pseudoklasa :menu, więc taka reguła nie jest poprawnym sposobem wyboru elementu po identyfikatorze. Dwukropek w CSS ma swoje konkretne zastosowania, np. :hover, :first-child czy ::before, ale nie służy do wybierania id. Trzeba też uważać na właściwość color. Ona ustawia kolor tekstu wewnątrz elementu, a nie kolor jego tła. Gdyby w bloku znajdował się napis, byłby zielony, ale samo tło nadal pozostałoby bez zmiany. Moim zdaniem właśnie rozróżnienie selektora i właściwości jest tutaj najważniejsze: najpierw trzeba poprawnie wskazać element, czyli #menu, a potem zastosować odpowiednią cechę wyglądu, czyli background-color. W praktyce takie drobiazgi decydują, czy styl działa od razu, czy potem człowiek pół godziny szuka czemu strona nie wygląda jak w projekcie.