Stylizowanie linków z użyciem pseudoklas

MZ | 19-07-2017 | 12:48:30

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.

Zobacz także

Daj się zaskoczyć! Poniżej wylosowałem dla Ciebie pięć wpisów z całego archiwum bloga:

Komentarze

Disqus
Facebook
Pasja informatyki