22.5. fejezet: CSS alapismeretek – Linkek
A CSS számos lehetőséget ad a linkek megjelölésére, illetve díszítésére.
A négy alapvető link-állapot a következő:
- a:link – sima, nem látogatott link
- a:visited – már meglátogatott link
- a:hover – a link megjelenése, ha az egér fölötte van
- a:active – a link megjelenése ha éppen aktív (kattintáskor!)
Példa:
a:link {
color: red;
}
a:visited {
color: green;
}
a:hover {
color: hotpink;
}
a:active {
color: blue;
}
Megjegyzés: az a:hover csak az a:link és az a:visited után következhet.; továbbá az a:activa csak az a:hover után jöhet. Összegezve: a fenti sorrendet érdemes tartani!
text-decoration: szövegdíszítés. Ez a leggyakrabban használt díszítő elem a linkeknél. Általában ez az alapeset:
a:link {
text-decoration: none;
}
a:visited {
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
a:active {
text-decoration: underline;
}
background-color: háttérszín. Ez már ritkábban használt. Példa:
a:link {
background-color: yellow;
}
a:visited {
background-color: cyan;
}
a:hover {
background-color: lightgreen;
}
a:active {
background-color: hotpink;
}
A fenti lehetőségeket persze egyesíthetjük, de bele is tehetünk más megoldásokat is. Példa:
a:link, a:visited {
background-color: #f44336;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
a:hover, a:active {
background-color: red;
}
A fejezet leghitelesebb forrása: https://www.w3schools.com/css/css_link.asp