Het kenmerk Cascading Style Sheets (CSS) wordt meestal gebruikt om de kleur van hyperlinks op webpagina's te wijzigen. Minder functionele oplossingen voor dit probleem zijn in de HTML-taal (HyperText Markup Language - "hypertext markup language").
Het is nodig
Basiskennis van HTML- en CSS-talen
instructies:
Stap 1
Maak een stijlblok voor hyperlinks. In zijn eenvoudigste vorm kan het er als volgt uitzien: a {color: Green} Hier wordt "a" een "selector" genoemd, wat aangeeft dat de stijlbeschrijving tussen haakjes moet worden toegepast op alle link-tags in het document. Groen definieert de kleur van de link; dit is een zeer ruwe definitie van kleur en wordt zelden gebruikt. Veel vaker wordt een "pseudo-klasse" toegevoegd aan de "a" selector - het is een label waarmee u de stijl van de link in drie verschillende toestanden kunt specificeren.
Stap 2
Gebruik de link pseudo-class om de normale (inactieve) status van de link te stylen. Het kan er bijvoorbeeld zo uitzien: a: link {kleur: Groen}
Stap 3
Gebruik de pseudo-class hover om aan te geven hoe de link moet verschijnen bij hover. Bijvoorbeeld: a: hover {color: Lime}
Stap 4
Gebruik de bezochte pseudo-klasse om de stijl van een reeds bezochte link te beschrijven. Bijvoorbeeld: a: bezocht {kleur: Donkergroen}
Stap 5
Combineer alle drie toestanden in één stijlbeschrijvingsblok. Het uiterlijk van HTML-code met CSS-beschrijvingen van stijlen kan er bijvoorbeeld als volgt uitzien:
a: link {kleur: groen}
a: bezocht {kleur: Donkergroen}
a: zweef {kleur: limoen}
Hier vertellen de openende en sluitende HTML-stijltags de browser waar stijlbeschrijvingen beginnen en eindigen, en daartussen is een beschrijving van het linkgedrag in drie toestanden.
Stap 6
Het hierboven gebruikte voorbeeld toont alleen de kleurkenmerken, maar andere attributen kunnen in de beschrijving worden opgenomen. Als het pagina-ontwerp bijvoorbeeld vereist dat de link niet onderstreept is in de normale (inactieve) staat, maar onderstreept wanneer de cursor erover beweegt, dan kan de code als volgt worden gewijzigd:
a: link {kleur: groen; tekstdecoratie: geen;}
a: bezocht {kleur: Donkergroen; tekstdecoratie: geen;}
a: hover {kleur: limoen; tekstdecoratie: onderstrepen;}
Stap 7
Als u de kleur van slechts enkele links op de pagina wilt wijzigen en de rest met de standaardinstellingen wilt laten, voeg dan het class-attribuut toe aan de tag van elke link die wordt gewijzigd. Noem deze hyperlinkklasse bijvoorbeeld newLinks. Dan kan de link-tag er als volgt uitzien: tekst link Dezelfde klassenaam moet worden toegevoegd aan de stijlbeschrijving:
a.newLinks: link {kleur: Groen; tekstdecoratie: geen;}
a.newLinks: bezocht {kleur: Donkergroen; tekstdecoratie: geen;}
a.newLinks: hover {color: Lime; tekstdecoratie: onderstrepen;}
Stap 8
Plaats de stijlbeschrijvingscode die is opgesteld op basis van de hierboven beschreven voorbeelden in de kop van de pagina - tussen de en tags. Voeg indien nodig een class-attribuut toe aan de link-tags met de naam die wordt gebruikt in de stijlbeschrijvingen. Sla vervolgens de gewijzigde pagina op en de procedure voor het wijzigen van de kleur van de hyperlinks zal worden voltooid.
