CSS Links
Met CSS kunnen links op verschillende manieren worden opgemaakt.Links opmaken met CSS
Links of hyperlinks zijn een essentieel onderdeel van een website. Links zijn te vinden in bijna alle webpagina's. Gebruikers kunnen op links klikken en hun weg vinden van pagina naar pagina. Het goed stijlen of opmaken van de links is daarom belangrijk bij het bouwen van een gebruiks vriendelijke website.Een link kan opgemaakt worden met elke CSS-eigenschap, zoals color, font-family, font-size en padding. Hieronder is een eenvoudig voorbeeld van een link.
Bovendien kunnen links anders worden weergegeven, afhankelijk van de staat waarin ze zich bevinden. Een link heeft vier verschillende statussen: link, visited, active en hover. Veel programmeurs geven elke status een andere stijl. De vier statussen zijn:
| a:link - een onbezochte, niet-aangeklikte link. |
| a:visited - een bezochte, aangeklikte link. |
| a:hover - een link als de gebruiker er met de muis overheen gaat. |
| a:active - een link wanneer erop wordt geklikt. |
Voorbeeld:
/* niet-bezochte link */
a:link {
color: red;
}
/* bezochte link */
a:visited {
color: green;
}
/* muis over link */
a:hover {
color: purple;
}
/* Geklikte link */
a:active {
color: blue;
}
| a:hover moet na a:link en a:visited komen. |
| a:active moet na a:hover komen. |
 |
Merk op dat er enkele ordeningsregels zijn voor wanneer je de stijl voor linkstatussen instelt. |
Link tekst decoratie
Als je de standaardonderstreping op links niet leuk vindt, kun je eenvoudig de CSS eigenschap text-decoration gebruiken om er vanaf te komen. De eigenschap text-decoration wordt meestal gebruikt om onderstrepingen uit links te verwijderen. Om de links iets beter te laten opvallen tussen de normale tekst kun je als alternatief andere stijlen toepassen, zoals achtergrondkleur, onderrand, vetgedrukt lettertype, enz.
Voorbeeld:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
Link achtergrond kleur
De eigenschap background-color kan worden gebruikt om een achtergrondkleur voor links op te geven. Je kunt voor iedere status een ander achtergrondkleur voor een link instellen. Maar zorg er bij het kiezen van de kleuren voor dat de gebruiker duidelijk onderscheid kan maken tussen normale tekst en links.
Voorbeeld:
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: tomato;
}
a:active {
background-color: lightgreen;
}
Link als een knop
Je kunt met behulp van CSS gewone tekstlinks uit laten zien als een knop. Om dit te doen, moeten we nog een paar CSS-eigenschappen gebruiken, zoals background-color, border, display, padding, enz. Het onderstaande voorbeeld demonstreert een meer geavanceerd voorbeeld waarbij we verschillende CSS-eigenschappen combineren om links als knoppen weer te geven.
Voorbeeld:
a:link, a:visited {
background-color: #1ebba3;
border: 2px solid #099983;
color: white;
padding: 12px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: #9c6ae1;
border-color: #7443b6;
}
Soorten link stijlen
Dit voorbeeld laat zien hoe je soorten stijlen aan hyperlinks kunt toevoegen.
Voorbeeld:
a.een:link {color:#0000ff;}
a.een:visited {color:#0000ff;}
a.een:hover {color:#ff0000;}
a.twee:link {color:#0000ff;}
a.twee:visited {color:#0000ff;}
a.twee:hover {background:#66ff66;}
a.drie:link {color:#0000ff;}
a.drie:visited {color:#0000ff;}
a.drie:hover {font-family:monospace;}
a.vier:link {color:#0000ff;text-decoration:none;}
a.vier:visited {color:#0000ff;text-decoration:none;}
a.vier:hover {text-decoration:underline;}
a.vijf:link {color:#0000ff;}
a.vijf:visited {color:#0000ff;}
a.vijf:hover {font-size:125%;}
CSS Knop of button
Dit voorbeeld laat zien hoe je een knop maakt ook wel genoemd een button.
Voorbeeld:
a:link, a:visited {
background-color: white;
color: black;
border: 2px solid green;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: green;
color: white;
}
CSS Cursor veranderen
Standaard heb je de gewone muis en zodra je over een link gaat dan zal de muis veranderen in een handje. Je kunt met CSS wijzigingen aan brengen hoe de muis wordt getoond als je over een link beweegt zodat deze veranderd in een andere cursor. Het onderstaande voorbeeld demonstreert verschillende soorten cursors deze kunnen soms handig zijn voor links.
Voorbeeld:
<span style="cursor: auto">auto</span><br>
<span style="cursor: crosshair">crosshair</span><br>
<span style="cursor: default">default</span><br>
<span style="cursor: e-resize">e-resize</span><br>
<span style="cursor: help">help</span><br>
<span style="cursor: move">move</span><br>
<span style="cursor: n-resize">n-resize</span><br>
<span style="cursor: ne-resize">ne-resize</span><br>
<span style="cursor: nw-resize">nw-resize</span><br>
<span style="cursor: pointer">pointer</span><br>
<span style="cursor: progress">progress</span><br>
<span style="cursor: s-resize">s-resize</span><br>
<span style="cursor: se-resize">se-resize</span><br>
<span style="cursor: sw-resize">sw-resize</span><br>
<span style="cursor: text">text</span><br>
<span style="cursor: w-resize">w-resize</span><br>
<span style="cursor: wait">wait</span><br>
