Link-urile pot fi stilizate cu orice proprietate CSS, cum ar fi color, font-family, font-size, și padding. Iată un exemplu ușor:

a {
    color: hotpink;
}

În plus, linkurile pot fi stilate diferit în funcție de starea în care se află.

Link-urile au, de asemenea, 4 stări, iar mulți programatori stilizează fiecare stare diferit. Cele patru state sunt:

  • a:link: o legătură nevizitată, neclicată
  • a:visited: un link vizitat, făcut clic
  • a:hover: un link când mouse-ul utilizatorului este deasupra acestuia
  • a:active: un link când se face clic pe acesta

<a href=""> proprietatea este responsabilă pentru crearea adreselor URL și poate fi modificată folosind o serie de proprietăți de stil CSS, deși are câteva în mod implicit:

  1. Subliniați
  2. Culoarea albastra

Puteți să le schimbați adăugând modificarea color și text-decoration proprietăți.

   color: black;
   text-decoration: none;

De asemenea, puteți stiliza linkul pe baza interacțiunii folosind aceste proprietăți, cunoscute și sub denumirea de stări de link:

  • a: link – un link normal, nevizitat
  • a: vizitat – un link vizitat de utilizator
  • a: hover – un link când utilizatorul trece peste acesta
  • a: activ – un link în momentul în care este făcut clic

Iată câteva exemple de CSS folosind cele 4 stări:

a:link { color: red; }
a:visited { color: blue; }
a:hover { color: green; }
a:active { color: blue; }

Notă că există unele ordonarea regulilor pentru când setați stilul pentru stările de legătură.

  • a:hover TREBUIE să vină după a:link și a:visited

a:active TREBUIE să vină după a:hover

a: link – un link normal, nevizitat a: visitat – un link pe care utilizatorul l-a vizitat a: hover – un link când utilizatorul trece peste acesta a: activ – un link în momentul în care este făcut clic

/* unvisited link */
a:link {
    color: red;
}

/* visited link */
a:visited {
    color: green;
}

/* mouse over link */
a:hover {
    color: hotpink;
}

/* selected link */
a:active {
    color: blue;
}

Mai multe despre stilizare în CSS:

  • Cum să stilizați o etichetă HTML direct în CSS
  • Cum se stilează listele cu CSS
  • Cum să stilezi butoanele cu CSS