CSS voorbeelden eigenschap outline-width


Handleiding HTML Legenda | Beschrijving | Gebruikersinterface | CSS eigenschappen | Begin


De outline-width eigenschap kun je gebruiken om vast te leggen met welke de breedte de browser een outline moet weergeven.

In het volgende voorbeeld moet de browser een outline om een hyperlink plaatsen op het moment dat er met de muis op wordt geklikt.

<P><A HREF="#klik">Klik met de muis op de link</A> en de outline verschijnt. Als je de muistoets weer los laat, dan verdwijnt de outline weer.</P>

In een stijlblok in de head van het document is een stijlregel opgenomen voor het A element, waarbij gebruik gemaakt is van de pseudo-class selector active. Voor de outline-width eigenschap is de waarde thin opgenomen en dat moet een dunne outline opleveren. Hoe breed dun precies is, hangt af van de browser. Omdat de outline-color eigenschap niet is opgenomen, moet de browser de beginwaarde gebruiken voor de kleur van de outline. Dat is de kleur van de tekst. De outline-style eigenschap moet altijd worden opgenomen, omdat de browser anders de beginwaarde none moet aanhouden en dus geen outline mag weergeven.

A:active { outline-width: thin; outline-style: solid; }

Voorbeeld outline-width

De waarde medium is de beginwaarde van de outline-width eigenschap. Als je de eigenschap weglaat, krijg je dus hetzelfde resultaat te zien.

A:active { outline-width: medium; outline-style: solid; }

Voorbeeld outline-width

De waarde thick zorgt voor een dikke lijn.

A:active { outline-width: thick; outline-style: solid; }

Voorbeeld outline-width

Naast de sleutelwoorden thin, medium en thick kun je ook zelf een breedte opgeven.

<P><A HREF="#klik">Schuif de muisaanwijzer boven de link</A> en de outline verschijnt. Als je de muisaanwijzer van de link afschuift, dan verdwijnt de outline weer.</P>

Het stijlblok bevat weer een stijlregel voor het A element. In plaats van de pseudo-class selector active is nu echter de pseudo-class selector hover gebruikt.

A:hover { outline-width: 2px; outline-style: solid; }

Voorbeeld outline-width



Legenda | Beschrijving | Gebruikersinterface | CSS eigenschappen | Begin

Handleiding HTML (https://www.handleidinghtml.nl/)
Copyright © 1995-2021 Hans de Jong
Laatste wijziging: 16 januari 2005