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:
- a:link, de standaard link
- a:visited, een link waar een keer op geklikt is
- a:hover, de bezoeker gaat met de cursor over de link heen
- a:active, het moment dat de bezoeker op de link klikt
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>
Als je bij het bovenstaande voorbeeld de link bekijkt en gebruikt kun je een paar dingen zien gebeuren.
- het standaard linkje heeft z'n eigen opmaak en is niet underlined (text-decoration: none;)
- als je er met je muis overheen gaat veranderd de tekst kleur en de achtergrond kleur
- als je op de link klikt en je muisknop ingedrukt houdt krijg je de 'active' link te zien
- als je op de link geklikt hebt krijg je de 'visited' link te zien. Eén van de stijl eigenschappen hiervan is bijvoorbeeld dat hij wel 'underlined' is.
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>
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>
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