3

kurs

css

Lekcja 16: Pseudo-klasy

css

Stosowanie pseudo-klas daje możliwość zbudowania logicznej struktury odnośników. Poprzez właściwości takie jak :link, :visited, :hover, :active, :focus możemy nadać formatowanie linkom w zależności od wykonanej akcji.

Pseudo-klasa :link

Dotyczy linków, które nie zostały jeszcze odwiedzone.

W HTML przygotujemy link.

<a href="http://www.link_do_strony.pl">Link do strony</a>

W CSS zdefiniujemy formatowanie dla :link.

a:link { color: blue; }
Przykład

Link do strony

Pseudo-klasa :visited

Dotyczy linków, które zostały już odwiedzone.

a:visited { color: green; }
Przykład

Link do strony

Pseudo-klasa :hover

Nadaje formatowanie odnośnikowi, nad którym znajdzie się kursor.

a:hover { color: red; }
Przykład

Link do strony

Pseudo-klasa :active

Nadaje formatowanie dla linka, na którym w danym momencie wykonywana jest akcja.

a:active { background: orange; }
Przykład

Link do strony

Pseudo-klasa :focus

Formatuje link, który po wybraniu nadal jest aktywny.

a:focus { color: aqua; }
Przykład

Link do strony

comments powered by Disqus

Do góry