Načrtovanje in razvoj spletnih aplikacij

Oblikovanje povezav s CSS

Povezave lahko oblikujemo na različne načine. Pri tem lahko uporabimo katerokoli slogovno oblikovno lastnost kot npr. barvo, pisavo, ozadje...

Pri povezavah (elemnt a) ločimo več stanj, ki jih opišemo s posebnimi psevdorazredi. Psevdorazredi so že v naprej določeni razredi in jih ne moremo sami definirati:

  • a:link - neobiskana povezava
  • a:visited - obiskana povezava
  • a:hover - nad povezavo je miškin kurzor
  • a:active - povezava je aktivna (uporabnik je pritisnil tipko na miški in je še ni spustil)

Če določamo oblikovne sloge več stanjem povezave, moramo pri tem upoštevati določena pravila vrstnega reda uporabe:

  • oblikovne lastnosti stanja a:hover priredimo za stanjema a:link in a:visited
  • oblikovne lastnosti stanja a:active priredimo za stanjem a:hover

Primer:

<p>To je <a href="#">povezava</a>.</p>
a:link { 
   color: #5755F5;
   text-decoration: none;
}
a:visited {
   color: #006C09;
   text-decoration: none;
}
a:hover {
   color: #F94E51;
   text-decoration: underline;
}
a:active {
   color: #FF191D;
   text-decoration: underline;
   background-color: #FCB0B1;
}

To je povezava.