Het opmaken van een link in css.

Bron: http://www.sceneone.nl/navigatie/a.php

Titel: HTML en CSS tutorials

Auteur: Wybe Weysters

Een link (in de html een <a href>) heeft standaard al zijn eigen opmaak. Het is underlined en heeft een vies blauw kleurtje. Wanneer er een keer op geklikt is (de link is dan visited) heeft het een vies paars-achtig kleurtje.
Dat willen we niet. Wij willen zelf uitmaken hoe onze links eruit zien. En via je css kan dat.

In je css kent een link vier mogelijke verschijningsvormen:

Je kunt voor ieder van de verschijningsvormen een aparte opmaak definiëren in je css. Het is daarbij wel belangrijk dat je de bovenstaande volgorde aanhoudt. Dus eerst a:link, dan a:visited, dan a:hover en als laatste a:active.
Bijvoorbeeld zo:

CSS: a:link{
background-color: #FF8080;
color: #B30700;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}

a:visited{
background-color: transparent;
color: #B30700;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}

a:hover{
background-color: #B30700;
color: #FFFFFF;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}

a:active{
background-color: transparent;
color: #B30700;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}
HTML: <a href="http://www.csszengarden.com/">linkje naar de zengarden</a>

bekijk het resultaat

Als je bij het bovenstaande voorbeeld de link bekijkt en gebruikt kun je een paar dingen zien gebeuren.

Als je na het klikken op een link toch weer de standaard opmaak van de link te zien wilt krijgen is daar maar 1 manier voor: het leeggooien van de history van je browser. Zolang je dat niet doet blijf je de 'visited' link zien.

Ik ben persoonlijk niet zo'n fan van die aparte opmaak voor 'visited'. Ook die 'active' link vind ik overbodig.
Toch ben ik verplicht om een opmaak voor die twee verschijningsvormen van de link te definiéren. de oplossing ligt voor de hand. Geef visited dezelfde opmaak als link en geef active dezelfde opmaak als hover.
Dit geeft me meteen de mogelijkheid om de stijldeclaraties wat in te korten:

CSS: a:link, a:visited{
background-color: #FF8080;
color: #B30700;
text-decoration: none;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}

a:hover, a:active{
background-color: #B30700;
color: #FFFFFF;
text-decoration: underline;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}

En dat kan nog wat korter. Je ziet dat font-family en font-weight in beide gevallen hetzelfde zijn.
Die kunnen we als volgt bij elkaar pakken:

CSS: a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}

a:link, a:visited{
background-color: #FF8080;
color: #B30700;
text-decoration: none;
}

a:hover, a:active{
background-color: #B30700;
color: #FFFFFF;
text-decoration: underline;
}
HTML: <a href="http://www.alistapart.com/">linkje naar a list apart</a>

bekijk het resultaat

Vanzelfsprekend heb je ook de mogelijkheid om aan een link een aparte class te hangen:

CSS: a{
font-family: Verdana, Arial, Helvetica, sans-serif;
font-weight: bold;
}

a:link, a:visited{
background-color: #FF8080;
color: #B30700;
text-decoration: none;
}

a:hover, a:active{
background-color: #B30700;
color: #FFFFFF;
text-decoration: underline;
}

a.speciaal{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
font-weight: normal;
text-decoration: none;
background-color: transparent;
}

a.speciaal:link, a.speciaal:visited{
color: #24006B;
border-bottom: 1px dashed #24006B;
}

a.speciaal:hover, a.speciaal:active{
color: #AA80FF;
border-bottom: 1px dashed #AA80FF;
}
HTML: <p><a href="http://www.alistapart.com/">linkje naar a list apart</a></p>
<p><a href="http://www.csszengarden.com/" class="speciaal">linkje naar de zengarden</a></p>

bekijk het resultaat

Ik ga er vanuit dat je begrijpt wat in het bovenstaande voorbeeld gebeurd.
Gaat het toch een beetje snel voor je dan moet je misschien het onderdeel over het schrijven van css (nog) eens bekijken.

Wat je ook nog eens door zou kunnen lezen zijn de ongeschreven regels over het wel of niet openen van een nieuw venster

naar het begin van de pagina