• Artykuł

          

Encyklopedia: Jak formatować odnośniki w CSS - Kurs HTML i CSS  Udostępnij na: Facebook

Autor: Norbert Blandzi

Opublikowano: 2011-09-22

Odnośniki formatujemy ze względu na stany, w jakich się znajdują. Odwołujemy się do nich, wykorzystując konstrukcję:

a:stan {atrybut: wartość}

Stany:

  • podstawowy (link) – stan odnośnika, który nie został jeszcze odwiedzony,
  • odwiedzony (visited) – stan odnośnika, który został wcześniej kliknięty, a informacja o tym znajduję się w pamięci przeglądarki,
  • aktywny (active) – stan odnośnika w momencie wciśnięcia przycisku myszy,
  • wskazany kursorem myszki (hover) – stan odnośnika w momencie najechania na niego kursorem myszki.

Podstawowe atrybuty , które można wykorzystać do formatowania odnośników w CSS to:

  • color – kolor elementu,
  • font-size – rozmiar czcionki,
  • font-weight – grubość czcionki,
  • font-style – styl czcionki,
  • font-family – rodzaj oraz rodzina czcionki,
  • text-decoration – wygląd tekstu,
  • background – tło napisu.

Przykład

Przykład formatowania odnośnika w stanie podstawowym.

<html> 
    <head> 
        <meta charset="utf-8" /> 
        <title>Formatowanie list</title> 
        <style type="text/css">
        a:link {
            color: green;
            font-size: 20px;
            font-weight: bold; }
        </style>
    </head> 
    <body> 
        <a href="http://www.microsoft.pl">Odnośnik</a>
    </body> 
</html>

W przeglądarce przykład wygląda tak, jak na Rys. 1.

Rys. 1. Odnośnik z zastosowanym formatowaniem.

Sprawdź

Praktyczne przykłady

Zobacz, jak praktycznie formatować odnośniki w samouczku: