Predmetová komisia ELT a INF

Učebnica CSS - Odkazy

CSS Basic - CSS Links

« Predchádzajúca Ďalšia kapitola »

Odkazy môžu byť štylované rôznymi spôsobmi.

Styling Odkazy

Odkazy môžu byť štylizovaný s CSS vlastnosťou (napr. farba, font - family, pozadia, atď).

Špeciál pre odkazy sú, že môžu byť štylizovaný rôzne v závislosti na tom stave, v akom sú v.

Štyri stavy odkazov sú:

  • a:link - znamená nenavštívený odkaz
  • a:visited - je navštívený odkaz
  • a:hover - který označuje odkaz, cez ktorý sa teraz prechádza myšou
  • a:active - odkaz, na ktorý sa práve kliklo

Príklad

a:link {color:#FF0000;}      /* unvisited link */
a:visited {color:#00FF00;}  /* visited link */
a:hover {color:#FF00FF;}  /* mouse over link */
a:active {color:#0000FF;}  /* selected link */

Vyskúšajte si to »

Pri nastavení štýlu pre niekoľko odkazov štátov, tam sú niektoré, aby pravidlá:

*:hover musí byť po a:link a a:visited
*:active musí byť skôr ako :hover

Spoločné Štýly pre Odkazy - Text Decoration

Text - decoration vlastnosť sa použíba na odstránenie podčiarknutia odkazov.

Príklad

a:link {text-decoration:none;}
a:visited {text-decoration:none;}
a:hover {text-decoration:underline;}
a:active {text-decoration:underline;}

Vyskúšajte si to »

Farba pozadia

Background - color vlastnosť určuje farbu pozadia pre odkazy

Príklad

a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover {background-color:#FF704D;}
a:active {background-color:#FF704D;}

Vyskúšajte si to »

Ďalšie príklady

Ako pridať rôzne štýly na hypertextové odkazy
Tento príklad ukazuje, ako pridať ďalšie štýly na hypertextové odkazy.

Pokročilé - Vytvorenie odkazových boxov
Tento príklad ukazuje pokročilejšie príklady, kde sme skombinovali niekoľko vlastnosti CSS pre zobrazenie odkazov ako celok.

« Predchádzajúca Ďalšia kapitola »