Programowanie webowe | 04. CSS potrzebny do egzaminu

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.