CSS - Arkusze stylów | Artykuł

Stylizowanie linków z użyciem pseudoklas

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.