CSS Ancore linkuri si pseudo clase

Mai jos, gasiti cateva metode prin care puteti utiliza CSS-ul pentru a stiliza linkurile:

  • a:link {color: #009900;}
  • a:visited {color: #999999;}
  • a:hover {color: #333333;}
  • a:focus {color: #333333;}
  • a:active {color: #009900;}

Acum, hai sa aruncam o privire la fiecare linie din exemplu, sa vedem "cu ce se ocupa" fiecare:

a:link {color: #009900;}

Prima linie, seteaza culoare unui link implicit, cand nu are loc nici un eveniment.

a:visited {color: #999999;}

Cea de-a doua linie, ne arata ce culoare are linkul, cand vizitatorul a vizitat deja pagina respectiva, mai exact a executat click anterior pe acel link.

a:hover {color: #333333;}

Linia numarul trei, seteaza culoarea linkului atunci cand mouseul este deasupra lui. Este evenimentul cunoscut ca si "mouse-over" (mouse deasupra).

a:focus {color: #333333;}

Aceasta linie, este asemanatoare cu cea anterioara, insa are efect cand utilizatorul foloseste tastatura pentru navigare (tasta "Tab") si nu mouseul.

a:active {color: #009900;}

Ultima linie specifica culoarea unui link atunci cand acesta este apasat. La click pe link, culoarea se va schimba cu cea specificata in aceasta linie.

NOTA:

Trebuie sa declarati "a:link" si "a:visited" inainte de "a:hover". mai mult, trebuie sa declarati "a:hover" inaintea lui "a:active".Folosind regula generala de mai sus, toate linkurile din pagina dvs vor fi afectate, si vor folosi aceasta regula. Puteti seta stiluri de linkuri separate pentru anumite portiuni din pagina, daca doriti acest lucru.

Pseudo Clasele

Este posibil sa setati culori diferite pentru linkurile din pagina (de exemplu meniul de o culoare, linkurile din text de o alta culoare, etc ) folosind pseudo-clasele. De exemplu, sa spunem ca doriti ca linkurile din text sa fie diferite de cele din coloana din stanga sau dreapta. Puteti obtine acest lucru astfel:

#content a:link {color: #009900;}
#content a:visited {color: #999999;}
#content a:hover {color: #333333;}
#content a:focus {color: #333333;}
#content a:active {color: #009900;}

Presupunand ca aveti continutul principal intr-un div numit "content", toate linkurile din acest div vor fi stilizate de acest selector. Daca div-ul dvs are alt nume este de ajuns sa schimbati numele in foaia de stil din "#content" in unul potrivit.

Apoi, linkurile dintr-o coloana le stilizam asa:

#column a:link {color: #009900;}
#column a:visited {color: #999999;}
#column a:hover {color: #333333;}
#column a:focus {color: #333333;}
#column a:active {color: #009900;}

Inca odata, presupunem ca div-ul coloanei se numeste "column". Aceeasi metoda se aplica si pentru a declara o clasa in loc de un id.

a.column:link {color: #009900;}
a.column:visited {color: #999999;}
a.column:hover {color: #333333;}
a.column:focus {color: #333333;}
a.column:active {color: #009900;}

In acest caz insa, va trebui sa atribuiti fiecarui link clasa potrivita:

<a class="column" href="#" title="textul linkului">textul linkului</a>

Exista totusi o cale ma usoara:

.column a:link {color: #009900;}
.column a:visited {color: #999999;}
.column a:hover {color: #333333;}
.column a:focus {color: #333333;}
.column a:active {color: #009900;}

... urmand ca in fisierul (X)HTML sa avem:

<div class="column">
	<a href="#" title="textul linkului"> textul linkului </a>
  < /div>

Sunt si alte proprietati care pot fi aplicate linkurilor, insa in acest articol ne-am propus sa ne referim doar la culori. Aproape orice proprietate folosita la stilizarea textului poate fi aplicata si la linkuri.