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.
Homepage-Maken Tip
De makkelijkste manier om je eigen website te maken?
Dat is via een website bouwer als Weebly. Hiermee kun je eenvoudig via je browser door middel van drag-en-drop een website bouwen. Je kunt volledig gratis beginnen met 500MB webruimte voor je site. Zo nodig kun je een betaald pakket nemen met eigen domeinnaam, "onbeperkte" opslag (fair use policy) en e-commerce mogelijkheden.
Weebly is daarom een prima optie als je snel een website in elkaar wilt zetten. Kennis van HTML of het installeren van een eigen content management systeem is niet nodig bij Weebly.
