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; text-decoration: none; } a:visited { color: #666666; text-decoration: none; } a:active { color: #000099; text-decoration: none; } a:hover { color: #333333; text-decoration:underline; }
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
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.
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; }
In de HTML-code met een class De hyperlinks die nu de anders-class moeten volgen, krijgen class="anders" in HTML- codering. Bijvoorbeeld: Google De hyperlinks die de gewone CSS-regel voor hyperlinks moeten volgen, blijven: Google