Hyperlinks met CSS opmaken Koen Van Cauwenberge. In de CSS-code Hier is een voorbeeld van een CSS-codering voor een hyperlink: a:link { color: #8B0000;

Presentatie over: "Hyperlinks met CSS opmaken Koen Van Cauwenberge. In de CSS-code Hier is een voorbeeld van een CSS-codering voor een hyperlink: a:link { color: #8B0000;"— Transcript van de presentatie:

1 Hyperlinks met CSS opmaken Koen Van Cauwenberge

2 In de CSS-code Hier is een voorbeeld van een CSS-codering voor een hyperlink: a:link { color: #8B0000; text-decoration: none; } a:visited { color: #666666; text-decoration: none; } a:active { color: #000099; text-decoration: none; } a:hover { color: #333333; text-decoration:underline; }

3 Uitleg bij codes a:link is voor als je de hyperlink ziet a:visited is de opmaak van een hyperlink nadat je hem bezocht hebt a:active is de opmaak van de hyperlink als je erop klikt a:hover is de opmaak van de hyperlink als je er met de muis overgaat. color: #333333; geeft een kleur aan (in code met cijfers) text-decoration:none; neemt de lijn onder hyperlink weg

4 Meerdere opmaken voor Het kan zijn dat je hyperlinks een andere opmaak moeten krijgen op verschillende webpagina’s. Je werkt hiervoor met classes. Na de te definiëren HTML-tag plaats je een punt gevolgd door een naam die jij kiest.

5 In de CSS-code met een class Hier is een voorbeeld van een CSS-codering voor een hyperlink: a.anders:link { color: #666666; text-decoration: none; } a.anders:visited { color: #8B0000; text-decoration: none; } a.anders:active { color: #333333; text-decoration: none; } a.anders:hover { color: #000099; text-decoration:underline; }

6 In de HTML-code met een class De hyperlinks die nu de anders-class moeten volgen, krijgen class="anders" in HTML- codering. Bijvoorbeeld: Google http://www.google.be De hyperlinks die de gewone CSS-regel voor hyperlinks moeten volgen, blijven: Google http://www.google.be