Video: Double Your Computer Graphics for Free 2024
In het algemeen geven browsers koppelingen weer als blauwe onderstreepte tekst. Oorspronkelijk heeft dit standaardgedrag de verwarring tussen de inhoud op de pagina en een interactieve link geminimaliseerd. Tegenwoordig stijlen bijna elke website links op zijn eigen manier. Sommige websites onderstrepen geen links; anderen behouden de onderstrepende stijllinks in andere kleuren dan blauw; enzovoort.
Het HTML-ankerelement (
a
) wordt gebruikt om koppelingen te maken. De tekst tussen de ankertag openen en sluiten is de beschrijving van de koppeling en de URL die is ingesteld in het kenmerk
href
is het adres dat de browser bezoekt wanneer op de koppeling wordt geklikt.
De ankertag is in de loop van de tijd geëvolueerd en heeft tegenwoordig vier toestanden:
-
koppeling: een koppeling waar een gebruiker niet op geklikt of bezocht heeft -
bezocht: A link dat een gebruiker heeft geklikt of bezocht -
hover: een koppeling waarmee de gebruiker de muiscursor beweegt zonder te klikken op -
actief: een link waarop de gebruiker klikt maar nog niet is uitgebracht de muisknop
CSS kan elk van deze vier toestanden opmaken, meestal door deze eigenschappen en waarden te gebruiken.
| Property Name | Mogelijke waarden | Beschrijving |
kleur
|
naam
|
verbindingskleur opgegeven met namen (
kleur: blauw;
), hexadecimale code (
kleur: # 0000FF;
) of RGB-waarde (
kleur: rgb (0, 0, 255); >).
text-decoration |
none
|
onderstrepen
|
De volgende voorbeeldstijlen zijn koppelingen op een manier die vergelijkbaar is met de manier waarop ze zijn gestileerd in artikelen op Wikipedia, waar koppelingen standaard blauw lijken, onderstreept met de muisaanwijzer en oranje als ze actief zijn. Zoals hieronder te zien is, lijkt de eerste link naar Chief Technology Officer van de Verenigde Staten onderstreept te zijn zoals zou zijn als er een muis boven zweefde. De koppeling naar Google wordt ook oranje weergegeven, net als wanneer deze actief zou zijn en de muis erop zou klikken. |
a: link {
kleur: rgb (6, 69, 173);
tekstdecoratie: geen;
}
a: bezocht {
kleur: rgb (11, 0, 128)
}
a: hover {
tekstdecoratie: onderstrepen
}
a: actieve {
kleur: rgb (250, 167, 0)
}
Wikipedia. org-pagina met link, bezocht, zweef en actieve statussen.
a
selector en de linkstatus op te nemen.
Hoewel het uitleggen waarom dit buiten het bestek van dit boek valt, vereisen CSS-specificaties dat u de verschillende linkstatussen definieert in de hier getoonde volgorde: link, bezocht, zweeft en vervolgens actief.Het is echter acceptabel om een linkstatus niet te definiëren, zolang deze volgorde behouden blijft.
De verschillende koppelingsstatussen staan bekend als
pseudo-klasse selectors. Pseudo-klasse selectors voegen een sleutelwoord toe aan CSS selectors en staan je toe om een speciale staat van het geselecteerde element te stylen.
