Stylizowanie hiperłączy z użyciem pseudoklas
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
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.
Komentarze