CSS beschrijving eigenschap outline


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


outline


CSS 2
IE -
NN -
MOZ -
FF -
OP 7.0
De outline eigenschap bepaalt in één keer de breedte, stijl en kleur van een outline om een element.

Waarden: <'outline-width'> || <'outline-style'> || <'outline-color'> | inherit
Beginwaarde: none
Heeft betrekking op: alle elementen
Wordt geërfd: nee
Mediagroep(en): visual, interactive

Een outline is een rand, die bedoeld is om een element in bepaalde situaties meer te laten opvallen. Je gebruikt een outline bijvoorbeeld om te laten zien dat een onderdeel van een formulier (zoals een tekstveld of een knop) de focus heeft (actief is).

Het grote verschil met een gewone rand is, dat een outline geen eigen ruimte inneemt en de positie en afmetingen van de box van het element en van andere elementen niet beïnvloedt. Het weergeven of laten verdwijnen van de outline heeft daardoor niet tot gevolg, dat de opmaak van het document opnieuw bepaald moet worden.
Een outline wordt juist buiten de gewone rand van het element geplaatst. Als er voor het element geen rand wordt weergegeven, dan wordt de outline juist buiten de padding geplaatst. Omdat de outline altijd bovenop de box van het element wordt geplaatst, kan hij naastgelegen elementen overlappen. In het algemeen zal dat geen probleem zijn, omdat de outline slechts een beperkte tijd zichtbaar is (als de outline bijvoorbeeld wordt weergegeven als een element de focus heeft, dan verdwijnt hij weer als het element de focus verliest aan een ander element).

Een outline kan een andere vorm dan een rechthoek hebben. Als een element gebroken is over meerdere regels, dan is de outline de minimale outline die alle boxen van het element omsluit. Anders dan bij een gewone rand, is de outline aan het begin of het eind van de box op een regel gesloten.

De outline heeft aan alle zijden dezelfde breedte, stijl en kleur.

Voorbeeld:

outline: 3px dashed #FF0000;
<'outline-width'>
CSS: 2 IE: - NN: - MOZ: - FF: - OP: 7.0

De waarde bepaalt de breedte van de outline aan alle zijden van het element.
Zie voor een toelichting de beschrijving van de outline-width eigenschap.
<'outline-style'>
CSS: 2 IE: - NN: - MOZ: - FF: - OP: 7.0

De waarde bepaalt de stijl van de outline aan alle zijden van het element.
Zie voor een toelichting de beschrijving van de outline-style eigenschap.
<'outline-color'>
CSS: 2 IE: - NN: - MOZ: - FF: - OP: 7.0

De waarde bepaalt de kleur van de outline aan alle zijden van het element.
Zie voor een toelichting de beschrijving van de outline-color eigenschap.
inherit
CSS: 2 IE: - NN: - MOZ: - FF: - OP: 7.0

De waarde van het parent element wordt aangehouden.


Bijzonderheden ondersteuning

Opera 7.0 en hoger
- De eigenschap wordt niet ondersteund voor de elementen TR, THEAD, TBODY en TFOOT.
- De eigenschap wordt niet ondersteund voor het OPTION element.



Legenda | Voorbeelden | Gebruikersinterface | CSS eigenschappen | Begin

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