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