Stilizarea link-urilor cu ajutorul CSS
Atunci când stilizăm link-urile, este important să înțelegem cum se folosesc pseudo-clasele pentru stilizarea diferitelor stări în care se pot afla link-urile.
- link (nevizitat) - este starea implicită în care se află un link,
- visited (vizitat) - acest link se află deja în istoricul browserului,
- hover (acoperit) - atunci când cursorul mouse-ului se află deasupra unui link,
- focus - este un link selectat de utilizator când navighează cu tasta
Tab sau focalizat programatic folosind
HTMLElement.focus(), - active - este un link în stare activă, utilizatorul a făcut click pe link.
Observații privind starea implicită a link-urilor:
- este subliniat,
- link-ul nevizitat are culoarea albastră,
- link-ul vizitat devine violet,
- trecerea cu indicatorul mouse-ului peste link transformă cursorul într-o pictogramă,
- dacă este selectat cu tasta Tab, are un contur (outline) vizibil,
- link-urile active au culoarea roșie - acest lucru se poate observa dacă faceți click pe link fără să eliberați butonul mouse-ului.
Aceste caracteristici sunt aproape aceleași ca cele din primele zile ale browserelor din anii '90 și au fost păstrate tocmai pentru a nu crea confuzie printre utilizatori. Din acest motiv, stilizarea link-urilor nu ar trebui să se îndepărteze foarte mult de comportamentul cunoscut.
În acest sens, folosiți sublinierea pentru link-uri și nu pentru altceva. Dacă nu doriți să folosiți sublinierea, evidențiați link-urile altfel. Oferiți utilizatorilor un feedback în stările hover și focus, care să difere ușor de starea active.
Stilizarea implicită poate fi eliminată sau modificată folosind următoarele proprietăți:
- color
- cursor
- outline
Pentru a stiliza link-urile putem utiliza proprietățile de mai sus, plus multe altele, așa cum vom vedea în exemplele care urmează.
Pentru a începe, vom scrie o serie de reguli goale în ordinea corectă:
a {
}
a:link {
}
a:visited {
}
a:focus {
}
a:hover {
}
a:active {
}
Această ordine este importantă, pentru că stările sunt construite una peste cealaltă. Declarațiile din prima regulă se vor aplica tuturor celor ulterioare, iar activarea unui link presupune în primul rând ca indicatorul mouse-ului să fie deasupra acestuia.
Link-uri cu pictograme
Includerea pictogramelor alături de link-uri este o practică obișnuită, iar acestea au rolul de a sugera către ce tip de conținut fac trimitere acele link-uri.
Link-uri de tip buton
Instrumentele explorate până acum pot fi utilizate și în alte moduri. De exemplu, starea hover poate fi utilizată pentru a stiliza multe alte elemente diferite, nu doar link-uri.
De multe ori, link-urile sunt concepute pentru a arăta și a se comporta ca niște butoane - un meniu de navigare pentru site, creat cu ajutorul unei liste care conține link-uri și care oferă utilizatorului acces la alte pagini din site, altfel inaccesibile.
🧠 Quiz - CSS Stilizarea Link-urilor