Hieronder vindt u de stappen voor het wijzigen van de kleur van de links op uw webpagina met HTML en CSS. Hoewel de koppelingskleuren kunnen worden gedaan met de HTML BODY-tag, raden we altijd aan eventuele styling-instellingen in CSS uit te voeren, zoals hieronder wordt weergegeven.

Tip: wanneer u de kleur van een webpagina-element definieert, moet u mogelijk HTML-kleurcodes gebruiken. Voor hoofdkleuren kunt u ook de namen van die kleuren opgeven in plaats van de kleurcodes te gebruiken, bijvoorbeeld rood, blauw, groen en zwart in plaats van de respectieve kleurcodewaarden te gebruiken.

De verschillende soorten hyperlinks begrijpen

Hyperlinks zijn speciale elementen op uw pagina, omdat ze interactief zijn. Om aan te geven dat ze interactief zijn, zijn ze verschillend gekleurd afhankelijk van hun staat. Een hyperlink heeft drie speciale kleuren, naast de oorspronkelijke kleur, die drie verschillende statussen vertegenwoordigen:

1. Bezochte link - De kleur zodra een link is bezocht. Als een hyperlink deze kleur is, kan de gebruiker verwachten dat klikken op de koppeling hem naar een pagina brengt die ze al hebben gezien.
2. Hover link - De kleur wanneer de muis over een link zweeft. Als een hyperlink deze kleur is, kan de gebruiker verwachten dat het indrukken van de linkermuisknop (klikken) en het loslaten van de knop ervoor zorgen dat de link wordt bezocht. Aanwijskleur is hetzelfde voor zowel actieve als bezochte koppelingen.
3. Actieve koppeling - De kleur van de koppeling wanneer erop wordt geklikt. Wanneer de gebruiker deze kleur ziet, kunnen ze verwachten dat het loslaten van de muis ervoor zorgt dat de browser de link bezoekt.

Tip: Zie onze hyperlinkdefinitie voor meer informatie en gerelateerde vragen aan hyperlinks.

CSS-linkkleurvoorbeeld

In het onderstaande CSS-voorbeeld stellen we de hyperlinkkleuren in op wat op deze pagina wordt weergegeven. Eerst worden alle ankers ingesteld op # 2c87f0 (blauwtint), # 636 paars en alle zwevende en actieve koppelingen kleuren: # c33 (rood). De onderstaande code kan worden toegevoegd aan het CSS-stijlelement of in uw .css-bestand.

 een {color: # 2c87f0; } a: bezocht {color: # 636; } a: hover, a: active, a: focus {color: # c33; } 

Als uw pagina geen CSS gebruikt of u niet naar CSS wilt converteren, vindt u hieronder de stappen voor het uitvoeren van de BODY-tag in de HTML-code. Zoals eerder vermeld, raden we ten zeerste aan de bovenstaande CSS-code te gebruiken in plaats van de body-tag. U kunt de bovenstaande code toevoegen aan een CSS-bestand en al uw webpagina's koppelen aan dat CSS-bestand. Vervolgens kunt u de achtergrondkleurwaarden in dat ene CSS-bestand wijzigen om de achtergrondkleur van alle pagina's die ernaar verwijzen rechtstreeks te wijzigen.

HTML body-tag voorbeeld

In sommige zeer zeldzame situaties is het misschien niet mogelijk om CSS te gebruiken. Voor die situaties kunt u ook de achtergrondkleur, tekstkleur, verbindingskleur en andere waarden in de HTML-body-tag definiëren, zoals hieronder wordt weergegeven.

Hieronder staan ​​de beschrijvingen van elk van de HTML-kenmerken in de body-tag.

TEXT = De kleur van tekst.

LINK = de kleur van links.

VLINK = bezochte linkkleur .

ALINK = Kleur van de actieve koppeling of de kleur waarnaar de koppeling wordt gewijzigd wanneer erop wordt geklikt.

BGCOLOR = De achtergrondkleur van de pagina.