Terug naar beginpagina Homepage-Maken.nl
Vimexx Webhosting   

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:

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:

Bezoek jouwnaam.nl!

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:

Link zonder streep eronder

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:

Link met zwarte achtergrond

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.

Klik hier om te starten met je Weebly website!

Zoekfunctie en Overige Info


Copyright © Homepage-Maken.nl 2000-2018 · Privacybeleid

Deze pagina voldoet aan de XHTML 1.0 richtlijnen     Deze pagina voldoet aan de CSS richtlijnen

[Naar boven]  [Home]