Stylizowanie linków pseudoklasami
Mirosław Zelent
Domyślny styl linków to podkreślony tekst koloru niebieskiego (jeżeli ten link jeszcze nie był odwiedzony), albo koloru fioletowego (w przypadku adresu, który już odwiedziliśmy). I to jest pierwsza, najważniejsza obserwacja: hiperłącza posiadają swój własny niezależny styl, który jest nakładany na tekst wewnątrz znaczników <a></a>
. Krój czcionki pozostaje ten sam, ale kolor i podkreślenie zostają nadane, aby uwidocznić w ten prosty sposób, iż dany tekst jest na stronie hiperłączem.
Do stylizowania wylądu linków najlepiej użyć tzw. pseudoklas, które dopisujemy do selektora po dwukropku. W naszym przypadku linkom nadano dodatkowo także klasę o nazwie .styl1
, co nie jest koniecznie, ale w praktyce umożliwia stworzenie kilku rodzajów hiperłączy na jednej podstronie (wystarczy dodać kolejne klasy). Natomiast możliwe do użycia pseudoklasy to kolejno:
:link
(hiperłącze nieodwiedzone, ang. unvisited link),:visited
(hiperłącze odwiedzone, ang. visited link),:hover
(hiperłącze, na którym jest kursor ang. mouse over link),:active
(hiperłącze, na który właśnie klikamy ang. selected link).
Zobaczmy te zapisy w akcji, czyli w przykładowym arkuszu stylów:
a.styl1:link
{
color: green;
text-decoration: underline;
}
a.styl1:visited
{
color: green;
}
a.styl1:hover
{
color: blue;
}
a.styl1:active
{
color: red;
}
Dlaczego są to pseudoklasy? Dlatego, iż same w sobie nie są jeszcze pełnowartościowej klasy - weźmy taki przykład :hover
:hover
{
color: blue;
}
Mówimy przeglądarce: zaaplikuj takie style, kiedy ktoś najedzie kursorem... lecz właśnie: najedzie kursorem na co? Brakuje tej informacji, prawda - i dlatego dopiero kiedy dwukropkiem przyczepię taką pseudoklasę do jakiegoś selektora (na przykład znacznika a
):
a:hover
{
color: blue;
}
...to cały zapis zyskuje sens. I dlatego to jest pseudoklasa, gdyż sama w sobie nie stanowi jeszcze pełnoprawnego, działającego zapisu.
Polecamy: Sekurak Academy 2024
Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp do materiałów z edycji Sekurak Academy z roku 2023! Przy zakupie możecie skorzystać z kodu: pasja-akademia w koszyku, uzyskując rabat -30% na bilety w wersji "Standard" - warto korzystać! Więcej szczegółów znajdziecie tutaj.
Książka: Wprowadzenie do bezpieczeństwa IT
Niedawno wystartował dodruk świetnej, rozchwytywanej książki pt. "Wprowadzenie do bezpieczeństwa IT, Tom I" (około 940 stron). Mamy dla Was kod: pasja (wpisz go w koszyku), dzięki któremu otrzymacie 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla naszych Widzów! Jest to pierwszy tom serii o ITsec, który wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!
Pomóż dzieciom
Polska Akcja Humanitarna od wielu lat dożywia dzieci. Prosimy, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękujemy!
Komentarze
Czy macie jakieś pytania, sugestie, uwagi? A może zauważyliście literówkę albo błąd? Dajcie koniecznie znać w komentarzach! Dziękujemy Wam za poświęcony na to czas!
Disqus