Les 7
Pseudo-Classes
Met Pseudo-Classes kun je de linkkleur instellen. Ook kun je verschillende linkkleuren instellen voor een pagina, dus bijvoorbeeld groene en blauwe links.
Er zijn vier verschillende Pseudo-Classes voor links:
- a:link (normale link)
- a:visited (bezochte link)
- a:hover (de muis staat op de link)
- a:active (als je op de link klikt)
Voorbeeld:
<html>
<head>
<title>Voorbeeld van classes</title>
<style type="text/css">
<!--
a:link { color: red }
a:visited { color: yellow }
a:hover { color: purple }
a:active { color: green }
-->
</style>
</head>
<body>
<a href="http://www.jouwnaam.nl/">Bezoek jouwnaam.nl!</a>
</body>
</html>
Resultaat:
Link zonder streep eronder
Wil je de links zonder streep eronder? Dan moet je een eigenschap gebruiken die we al eerder gezien hebben: text-decoration, met als waarde: none.
Voorbeeld:
a:link { color: red; text-decoration: none }
a:visited { color: yellow; text-decoration: none }
a:hover { color: purple; text-decoration: none }
a:active { color: green; text-decoration: none }
Resultaat:
Achtergrond voor links
Ook kun je een achtergrondkleur instellen voor je links, met: background-color.
Voorbeeld:
a:link { color: red; background-color: black }
a:visited { color: yellow; background-color: black }
a:hover { color: purple; background-color: black }
a:active { color: green; background-color: black }
Resultaat:
Twee kleuren links
Soms kan het handig zijn om meerdere kleuren links op een pagina te hebben, bijvoorbeeld voor interne en externe links. Ook dat kan. Stel je wilt blauwe en paarse links op je pagina.
Dat doe je dan als volgt:
<html>
<head>
<title>Twee kleuren links</title>
<style type="text/css">
<!--
a.blauw:link { color: blue }
a.blauw:visited { color: yellow }
a.blauw:hover { color: lime }
a.blauw:active { color: green }
a.paars:link { color: purple }
a.paars:visited { color: yellow }
a.paars:hover { color: lime }
a.paars:active { color: green }
-->
</style>
</head>
<body>
<a class="blauw" href="http://www.jouwnaam.nl/">Een blauwe link!</a>
<a class="paars" href="http://www.jouwnaam.nl/">Een paarse link!</a>
</body>
</html>
Resultaat:
Een blauwe link!
En hier een paarse link!!
Einde les 7
Ok, dit is het einde van deze les. Nu weet je hoe je verschillende kleuren links maakt, hoe je de achtergrondkleur van links instelt en hoe je links zonder onderstreping kunt maken. Nu is het tijd voor de laatste les, die gaat over lijsten.
MijnHomepage Tip
Heb je genoeg van je hostingprovider?
Neem dan een host die wel de kwaliteit kan bieden die je zoekt. Breng je site bijvoorbeeld onder bij Alphamega Hosting. Hun klanten zijn over het algemeen erg tevreden waardoor er maar weinig mensen overstappen naar een andere webhost. En dat is altijd een goede graadmeter voor de kwaliteit van een host. Alphamega biedt zelfs een niet-tevreden-geld-terug-garantie van 100 dagen.
Het First-class hostingpakket is voor veel mensen het meest geschikte pakket. Je krijgt het volgende:
100 MB» nu 512 MB schijfruimte2 GB» nu 10 GB dataverkeer- een eigen domeinnaam
- 1000 (pop)mailboxen
- 100 MySQL databases
- hoge kwaliteit techniek en prima support (helpdesk ook telefonisch bereikbaar)
Al met al is dit een prima pakket voor nog geen tientje per maand. Bekijk de site van Alphamega Hosting voor meer informatie!
