Siden er opdateret 5. 12. 2011
Vil du styre udseende på links med hensyn til farve, baggrund og eventuelle under- eller overstregninger, skal definitionen af de forskellige linkfunktioner falde i denne rækkefølge:
Når du vælger at bruge pseudoklasserne til elementet a, bør du i css erklære dem i den herover viste rækkefølge - ellers vil du opleve, at det ikke helt virker som du havde tænkt sig.
Eksempel på definition af udseende på tekstlinks:
a:link, a:visited, a:active
{
text-decoration: none;
color: #3333bb;
background: inherit; /* arver baggrundens farve */
}
a:hover, a:focus
{
color: #cc0055;
background: inherit; /* arver baggrundens farve */
text-decoration: underline overline
}
Her fastlægger vi, at alle links, både 'ikke besøgte', 'besøgte' og 'aktive' skal have farven hex#3333bb uden egen baggrundsfarve og at der IKKE skal være en streg under links.
Sidst bestemmes (med a:hover), at et link, som musen kommer ind over skal skifte til farven hex#cc0055 uden egen baggrundsfarve og at der skal komme en streg under og over linket, indtil musen fjernes fra linket. I samme gruppe defineres med a:focus, at hvis man manøvrerer sig frem til linket med tastaturet (brug af [Tab]), skal det markeres på samme måde som ved hover.
Hvis a:active skal have samme farve som a:link og a:visited, kan den noteres sammen med disse. Så er det kun a:hover og a:focus, der får en anden farve.
1):
Disse forskelle behøver du dog ikke spekulere på, når du udvikler menu til din hjemmeside. Det er noget, den enkelte bruger skal vide om sin browser.