CSS3 oferuje różnorodne pseudoklasy do stylizacji linków, które pozwalają na zmianę wyglądu linków w zależności od ich stanu: nieodwiedzony (:link
), odwiedzony (:visited
), po najechaniu kursorem (:hover
) oraz aktywny (kliknięty, :active
). Dzięki temu możemy poprawić użyteczność i estetykę stron internetowych, podkreślając różne stany linków.
Przykład użycia
Poniżej znajduje się kompletny przykład kodu HTML z CSS, ilustrujący różne style dla linków w zależności od ich stanu. W kodzie CSS użyjemy różnych właściwości, takich jak color
, text-decoration
, oraz font-weight
do zilustrowania różnic między stanami linków.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Stylizacja linków w CSS3</title>
<style>
/* Styl dla nieodwiedzonych linków */
a:link {
color: blue; /* Ustaw kolor tekstu na niebieski */
text-decoration: none; /* Usuń podkreślenie */
}
/* Styl dla odwiedzonych linków */
a:visited {
color: purple; /* Ustaw kolor tekstu na fioletowy */
text-decoration: underline; /* Dodaj podkreślenie */
}
/* Styl dla linków po najechaniu kursorem */
a:hover {
color: red; /* Zmień kolor tekstu na czerwony */
font-weight: bold; /* Pogrub tekst */
}
/* Styl dla aktywnych linków */
a:active {
color: green; /* Zmień kolor tekstu na zielony */
background-color: yellow; /* Dodaj żółte tło */
}
</style>
</head>
<body>
<h3>Przykładowe linki z różnymi stylami CSS3</h3>
<p><a href="#" target="_blank">Przykładowy link</a> - Najedź kursorem, aby zobaczyć efekt.</p>
</body>
</html>
W tym przykładzie:
a:link
stylizuje linki, które nie zostały jeszcze odwiedzone. Ustawiamy kolor tekstu na niebieski i usuwamy podkreślenie.a:visited
dotyczy linków, które zostały już odwiedzone przez użytkownika. Fioletowy kolor tekstu i podkreślenie sygnalizują, że link został już kliknięty.a:hover
zmienia styl linku, gdy użytkownik najedzie na niego kursorem. Czerwony kolor i pogrubienie tekstu zwracają uwagę na link.a:active
aplikuje styl w momencie kliknięcia na link, zanim zostanie on zwolniony. Zielony kolor tekstu i żółte tło podkreślają akcję użytkownika.
Podsumowanie
Stylizowanie linków przy użyciu pseudoklas CSS3 jest prostym, ale skutecznym sposobem na poprawienie nawigacji i estetyki strony internetowej. Dzięki różnym stanom linków, użytkownicy łatwiej rozpoznają, które linki już odwiedzili, a które są dla nich nowe. Wykorzystanie różnych efektów, takich jak zmiana koloru, dodawanie podkreślenia czy zmiana tła, pozwala na tworzenie bardziej interaktywnego i przyjaznego dla użytkownika interfejsu.
Jeżeli chcesz przyśpieszyć swoją naukę tworzenia stron chciałbym polecić mój kurs WebDevelopera od podstaw w którym nauczysz się tego języka od podstaw do zaawansowanych jego aspektów.