Kwalifikacja: INF.03 - Tworzenie i administrowanie stronami i aplikacjami internetowymi oraz bazami danych
Jak zdefiniować formatowanie tabeli w języku CSS, aby wyróżnić wiersz, na który aktualnie najeżdża kursor myszy, korzystając z innego koloru?
Odpowiedzi
Informacja zwrotna
Prawidłową odpowiedzią jest użycie pseudoklasy :hover, która jest standardowym rozwiązaniem w CSS do stylizacji elementów, gdy użytkownik na nie najedzie kursorem myszy. Pseudoklasa :hover pozwala na dynamiczną modyfikację wyglądu elementów, co jest szczególnie użyteczne w kontekście interaktywności stron internetowych. Na przykład, można zastosować tę pseudoklasę do wierszy tabeli, aby zmienić ich kolor tła na inny, co podnosi czytelność i estetykę interfejsu użytkownika. Implementacja może wyglądać następująco: table tr:hover { background-color: #f2f2f2; } - dzięki temu, gdy użytkownik najedzie myszką na wiersz tabeli, jego tło zmieni się na jasno szare, co zwraca uwagę na ten wiersz. Użycie :hover jest zgodne z dobrymi praktykami w projektowaniu UI, gdyż poprawia doświadczenia użytkownika oraz umożliwia intuicyjne korzystanie z interakcji na stronie. Pseudoklasa :hover wspiera również responsywność, ponieważ wpływa na sposób, w jaki użytkownicy wchodzą w interakcje z elementami, co jest kluczowe w nowoczesnym projektowaniu stron.
Zastosowanie pseudoklasy :visited jest nieodpowiednie w kontekście zmiany stylów wierszy tabeli, ponieważ ta pseudoklasa dotyczy linków, a konkretnie tych, które zostały już odwiedzone przez użytkownika. Nie ma możliwości jej użycia do modyfikacji stylów dla innych elementów jak wiersze tabel, co ogranicza jej zastosowanie w interaktywnym projektowaniu. Z kolei pseudoelement ::marker jest przeznaczony do stylizacji markerów w listach, a nie do wierszy tabeli, co sprawia, że jest całkowicie nieadekwatny w kontekście tego pytania. Ta pomyłka często wynika z mylnego przekonania, że pseudoelementy mogą być używane w celu wprowadzania efektów interakcji z użytkownikiem, co jest niezgodne z ich przeznaczeniem. Ostatnia z wymienionych opcji, pseudoelement ::first-line, pozwala na stylizację pierwszej linii tekstu w bloku, co również nie ma zastosowania w kontekście zmiany stylów dla wierszy tabel. Tego typu nieporozumienia mogą prowadzić do błędnych implementacji oraz niezrozumienia roli, jaką odgrywają różne selektory w CSS. Dlatego ważne jest, aby przy projektowaniu strony internetowej mieć jasne pojęcie o tym, jakie klasy i pseudoklasy są przeznaczone do jakich zastosowań, aby uniknąć nieefektywnych i błędnych rozwiązań.