Linki

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.

Poprzedni
Następny
Scroll to Top