11 - CSS - hyperlinks

• ICT
• MBO
• Studiejaar 1,2

Hyperlinks en CSS

Leerdoelen

Aan het einde van de les kun je hyperlinks mooier maken door middel van CSS.

Wat weet je al over het stijlen van hyperlinks met CSS?

Wat zijn CSS Hyperlink Selectoren?

Je kan verschillende stijlen toe te passen op hyperlinks op basis van hun status.

a:link	niet bezochte links
a:visited	geselecteerd links
a:hover	als de muis erover zweeft
a:active	wanneer ze worden ingedrukt

De a:link Selector

De a:link selector wordt gebruikt om stijlen toe te passen op niet-bezochte hyperlinks

 

a:link { 

    color: blue; 

    text-decoration: underline; }

Dit maakt niet bezochte hyperlinks blauw en onderstreept

De a:visited Selector

De a:visited selector wordt gebruikt om stijlen toe te passen op bezochte hyperlinks

a:visited { 

    color: purple;

}

Dit maakt bezochte hyperlinks paars

De a:hover Selector

De a:hover selector wordt gebruikt om stijlen toe te passen op hyperlinks wanneer de muis erover zweeft

 Dit maakt hyperlinks rood wanneer de muis erover zweeft

a:hover { 

    color: red;

}

Dit maakt hyperlinks rood wanneer de muis erover zweeft

De a:active Selector

De a:active selector wordt gebruikt om stijlen toe te passen op hyperlinks wanneer ze worden ingedrukt

a:active {

    font-weight: bold;

}

Dit maakt hyperlinks vetgedrukt wanneer ze worden ingedrukt

Oefening

Maak een menu waarin links horizontaal naast elkaar staan en eruit zien als buttons.

Tips voor het Stijlen van Hyperlinks

1. Gebruik verschillende kleuren en tekstdecoraties om hyperlinks op te laten vallen
   
2. Zorg ervoor dat de stijlen consistent zijn op de hele website
3. Test de stijlen op verschillende browsers en apparaten

Samenvatting

Je kan verschillende stylen toepassen op hyperlinks, daarbij onderscheiden we de volgende states:

a:link	niet bezochte links
a:visited	geselecteerd links
a:hover	als de muis erover zweeft
a:active	wanneer ze worden ingedrukt

Stel 1 vraag over iets dat je nog niet zo goed hebt begrepen.

De leerlingen geven hier (in vraagvorm) aan met welk onderdeel van de stof ze nog moeite. Voor de docent biedt dit niet alleen inzicht in de mate waarin de stof de leerlingen begrijpen/beheersen, maar ook een goed startpunt voor een volgende les.