Odkazy

Odkazy je možné nastýlovať podľa toho, v akom stave sa nachádzajú.

/* odkaz ako taký */
a{
    color: yellow;
}

/* nenavštívený odkaz */
a:link {
    color: red;
}

/* navštívený odkaz */
a:visited {
    color: green;
}

/* nadídenie myšou nad odkaz */
a:hover {
    color: hotpink;
}

/* zakliknutý odkaz */
a:active {
    color: blue;
}

Všetky vlastnosti, ktoré sa aplikujú na odkaz ako taký, sa aplikujú aj na jeho ďalšie stavy, až kým ich neprepíšeme. Čiže ak máme nasledovný kód:

/* odkaz ako taký */
a{
    color: yellow;
    display: inline-block;
    background-color: black;
}

/* nenavštívený odkaz */
a:link {
    color: red;
}

/* navštívený odkaz */
a:visited {
    color: green;
}

/* nadídenie myšou nad odkaz */
a:hover {
    color: hotpink;
}

/* zakliknutý odkaz */
a:active {
    color: blue;
}

tak spôsob zobrazenia a čierne pozadie sa aplikujú aj na nenavštívený odkaz, navštívený odkaz, odkaz nad ktorý sme nadišli myšou a aj zakliknutý odkaz. Keďže ale prepisujeme hodnotu pre zmenu farby textu, tak farba textu pre každý z týchto stavov odkazov je iná.


Testové otázky

  • Ako upravíme dizajn odkazu?
  • Ako upravíme dizajn odkazu, nad ktorý nadídeme myšou?
  • Ako upravíme zakliknutý odkaz?