Jag bloggar numera på http://blog.dileno.com ».

Formatera stilen på länkar och LoVe/HAte

en CSS-artikel av Martin S., publicerad den 3 maj 2005
När jag utvecklade en webbplats för några veckor sedan så fick jag problem med att stilen på mina länkar inte fungerade som jag ville. Jag tyckte att jag hade gjort allt rätt, men så var ej fallet. Här kommer ett tips som kan spara dig tid när du vill formatera stilen på dina länkar.
Det vanligaste är att man lägger till en stil liknande denna i sin stilmall:

a:link { color: #666; text-decoration: none; }
a: hover { color: #000; text-decoration: none; }

Två rader, mer behövs inte. Så långt, allt fint. Alla länkar är gråa och när man hovrar dem så blir de svarta. Men vad händer om man har klickat på en länk och sedan ser länken igen? Då är den länken helt plötsligt inte formaterad. Detta kan man avhjälpa med att lägga till en stil för besökta länkar, a:visited:

a:link { color: #666; text-decoration: none; }
a:visited { color: #999; text-decoration: none; }
a:hover { color: #000; text-decoration: none; }

Vill man sedan så kan man också lägga till a:active för att ge länken en besökare klickar på ett speciellt utseende exakt när besökaren just klickar på länken.

När man ska formatera stilen på sina länkar så kan man ordna dem på sådant sätt att det bli rätt eller inte rätt. Det finns en enkel regel man i så fall kan följa för att det ska bli rätt: LoVe/HAte. Den går ut på att man skriver sina länkstilar i följande ordning:

  • a:link (L)
  • a:visited (V)
  • a:hover (H)
  • a:active (A)


En korrekt “uppsättning” länkstilar skulle alltså kunna se ut så här:

a:link { color: #666; }
a:visited { color: #999; }
a:hover { color: #000; }
a:active { color: #966; }

Problemet man kan stöta på om man inte följer LoVe/HAte är att man till exempel anger a:hover innan man anger a:visited. I så fall tolkas inte regeln för a:visited och formateringen du angett för besökta länkar fungerar inte. Om man däremot kommer ihåg LoVe/HAte-regeln så slipper man dessa problem.