Stylizowanie hiperłączy z użyciem pseudoklas

MZ | 12-06-2017 | 22:49:06

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.

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