Linkuri – stilizarea linkurilor cu css

Stilizarea linkurilor este un element de design foarte important. Dupa cum ati observat, linkurile pot fi stilizate in f unctie de comportamentul lor, adica putem aplica un stil diferit daca linkul respectiv a fost deja vizitat, sau daca punem deasupra linkului mouse-ul etc.

a:link – Stilizarea linkurilor default cu css

Stilizarea unui link la care inca nu s-a dat click se face cu a:link. Linkurile nu se pot stiliza cu Inline CSS, ca sa definim stilul linkurilor trebuie sa cream stilurile in partea de head a documentului, sau intr-un fisier extern.

<style type=”text/css”>
a:link {

font-family:Arial; font-size:14px;
background-color:#003366; color:#CCCCCC;
padding:2px 5px 2px 5px;
text-align:center;
text-decoration:none; }

</style>
<a href=”http://it.webdesign-galaxy.ro”>Tutoriale it</a>

Cu acest stil practic am creat un buton, care are background si are si latime mai mare decat textul, pentru ca am adaugat padding. Codul de mai sus va rezulta intr-un buton, link precum -> vedeti mai jos:

a:hover – Cand punem mouse-ul deasupra

Efectele cand punem mouse-ul deasupra unui link, si clipeste, sau se observa orice modificare la design-ul linkului, se fac cu a:hover.

<style type=”text/css”>
a:hover {
font-family:Arial; font-size:14px;
background-color:#000000; color:#ffffff;
padding:2px 5px 2px 5px;
text-align:center;
text-decoration:none; }
</style>
<a href=”http://it.webdesign-galaxy.ro”>Tutoriale it</a>

Puneti mousul deasupra linkului, butonului de mai jos, si observati ca backgroundul se va schimba in negru, iar textul in alb:

a:visited – Cand a fost deja vizitat linkul resp.

Cand pagina respectiva unde duce linkul respectiv a fost vizitata deja, putem specifica ca linkul sa arate iarasi altfel. Acest lucru se face cu a:visited. Este recomandat ca sa cream un stil pentru fiecare tip de link, pentru ca browserele au deja incorporate in stilul lor default un stil pentru fiecare situatea aparte.

<style type=”text/css”>
a:visited {
etc stil stil…
}
</style>

a:active – Cand ne aflam pe pagina resp.

Cand suntem pe pagina unde duce linkul respectiv iarasi putem aplica un alt stil cu a:active .

<style type=”text/css”>
a:active {
etc stil stil…
}
</style>

Alte situatii pentru linkuri

Este posibil si stilizarea comportamentul linkurilor deja vizitate, insa nu toate browserele suporta aceste directive. De obicei preiau directivele definite anterior. Ca sa intelegeti mai bine, sa zicem ca avem un link la care am definit, a:link, a:active, a:hover si a:visited. In acest caz majoritatea browserelor se vor comporta in felul urmator. Cand vom pune mouse-ul deasupra unui link deja vizitat, iarasi se va aplica stilul definit pentru a:hover, insa nu in toate cazurile. De exemplu, browserul GoogleChrome, va astepta un stil diferit si pentru acest lucru. Daca vrem sa definim stiluri si pentru asemenea situatii, atunci trebuie sa facem asa:

<style type=”text/css”>
a:visited:hover {
font-family:Arial; font-size:14px;
stil etc…
</style>

Atentie!

Trebuie sa avem grija si la ordinea in care definim aceste stiluri pentru linkuri!
a:hover trebuie sa fie precedat de a:link si a:visited ca acesta sa functioneze bine
a:active trebuie sa urmeze stilul a:hover
Ordinea corecta este: a:link, a:visited, a:hover, a:active !