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

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 innych kategorii blogowych aniżeli ta, którą właśnie przeglądasz:

Polecamy: Sekurak Academy 2024

Sekurak Academy 2024

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp do materiałów z edycji Sekurak Academy z roku 2023! Przy zakupie możecie skorzystać z kodu: pasja-akademia w koszyku, uzyskując rabat -30% na bilety w wersji "Standard" - warto korzystać! Więcej szczegółów znajdziecie tutaj.

Książka: Wprowadzenie do bezpieczeństwa IT

Wprowadzenie do bezpieczeństwa IT

Niedawno wystartował dodruk świetnej, rozchwytywanej książki pt. "Wprowadzenie do bezpieczeństwa IT, Tom I" (około 940 stron). Mamy dla Was kod: pasja (wpisz go w koszyku), dzięki któremu otrzymacie 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla naszych Widzów! Jest to pierwszy tom serii o ITsec, który wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

Pomóż dzieciom

Polska Akcja Humanitarna od wielu lat dożywia dzieci. Proszę, poświęć teraz dosłownie chwilę i pomóż klikając w oznaczony strzałką zielony brzuszek Pajacyka. Dziękuję!

Komentarze

Disqus

Kategorie wpisów

Oto polecana książka warta Waszej uwagi.
Pełna lista polecanych książek jest tutaj.

Uwaga - w dniach od 02.12 do 08.12 trwają Mikołajki (książki drukowane mają rabat -35%, zaś ebooki do -45%). Zaś dodatkowy, specjalny kod zniżkowy: HELMIKOLAJ-10 dla naszych Widzów zapewni Wam oszczędność -10zł dla zamówień powyżej 70zł! Warto korzystać!

Bądź na bieżąco
Pasja informatyki