43 Lingid

Linkide tekst on vaikimisi allajoonitud, külastamata lingid on sinised, külastatud lillakad. Selline kujundus ei sobi väga paljude veebilehtede kujundusega.

Linkide kujunduse määramiseks tuleb stiil kirjutada HTML elemendile <a>. Kuna vajame erinevaid kujundusi samatüübilisele elemendile (külastamata, külastatud jne), siis on selektoriteks nn pseudoelemendid:

• a:link – külastamata link;
• a:visited – külastatud link;
• a:hover – hiirekursor on liikunud lingi peale;
• a:active – hiire vasak nupp on lingil alla vajutatud (klõpsamine).

Linkide kujundamiseks saab kasutada kõiki teksti kujundamiseks mõeldud omadusi (font, suurus, värv, taustavärv jms). Sellisel moel saab lingid muuta atraktiivsemaks, huvitavamaks, luua midagi animatsioonide sarnast.

Näiteks loome linkidele kujunduse, kus külastamata lingi värvus on must, külastatud lingil tumehall, aktiivne link on valge ja paksu kirjaga ning kui hiire kursoriga lingile liigutakse on link paksu tekstiga valgel taustal:

a:link {
  color:black; background: none; font-weight: normal;
}
a:visited {
  color:#808080; background: none; font-weight: normal;
}
a:hover {
  color:black; background-color: white; font-weight: bold;
}
a:active {
  color:white; background: none; font-weight: bold;
}