CSS - Arkusze stylów | Artykuł

Stylizowanie hiperłączy 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 podkreślony tekst koloru fioletowego (w przypadku adresu, który już odwiedziliśmy):

Nieodwiedzony link wygląda tak

Odwiedzony link wygląda tak

I to jest ważna obserwacja: hiperłącza posiadają swój własny, niezależny styl, który jest nakładany na tekst (tzw. anchor) znajdujący się 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. Najpierw wymieńmy te pseudoklasy:

• :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).

A teraz zobaczmy te pseudoklasy w akcji:

a:link

{

   color: green;

   text-decoration: none;

}


a:visited

{

   color: green;

}


a:hover

{

   color: blue;

}


a:active

{

   color: red;

}

Dlaczego to są pseudoklasy? Dlatego, iż same w sobie nie są jeszcze pełnoprawną klasą - na przykład :hover. Mówimy przeglądarce: zaaplikuj takie style, kiedy ktoś najedzie kursorem. Ale właśnie: najedzie kursorem na co? Brakuje tej informacji! I dlatego dopiero kiedy tym dwukropkiem "przyczepimy" pseudoklasę do jakiegoś selektora: a:hover, dopiero wówczas cały zapis zyskuje sens. I stąd jest to pseudoklasa, jako że sama nie stanowi jeszcze pełnoprawnego, działającego zapisu.

Uwaga: w powyższym kodzie wystylizowaliśmy każdy link na stronie, gdyż selektorem jest po prostu znacznik <a>. Jeżeli jednak w naszej witrynie zechcemy dysponować kilkoma różnymi wyglądami linków, to pamiętajmy, iż również znaczniki <a> mogą posiadać klasy. Czyli możemy sobie przygotować np. klasę o nazwie mojaklasa - za selektorem a, ale przed pseudoklasą, dopisujemy klasę:

a.mojaklasa:link

{

   color: green;

   text-decoration: none;

}


a.mojaklasa:visited

{

   color: green;

}


a.mojaklasa:hover

{

   color: blue;

}


a.mojaklasa:active

{

   color: red;

}

Oczywiście w praktyce możemy wystylizować tyle klas, ile tylko sobie wymarzymy, wymyślając dla każdej z nich inną nazwę. Natomiast jeżeli masz wątpliwości co do wstawiania znaczników w HTML oraz masz ochotę poznać ważne atrybuty linków, to zajrzyj koniecznie do tego artykułu.