Cum să particularizați legăturile cu CSS-dummies

În general, browserele afișează linkuri ca text albastru subliniat. Inițial, acest comportament implicit a minimizat confuzia dintre conținutul paginii și un link interactiv. Astăzi, aproape fiecare site web leagă legăturile în felul său. Unele site-uri nu subliniază legăturile; altele păstrează legăturile de subliniere, dar elegante în alte culori decât albastru; si asa mai departe.

Elementul de ancorare HTML ( a ) este utilizat pentru a crea link-uri. Textul dintre eticheta de ancorare de deschidere și închidere este descrierea legăturii, iar adresa URL setată în atributul href este adresa pe care browserul o vizitează atunci când se face clic pe link.

Eticheta de ancorare a evoluat în timp și astăzi are patru stări:

• link : O legătură pe care un utilizator nu a făcut-o sau nu a vizitat
• a vizitat link-ul pe care un utilizator a dat clic sau a vizitat
• hover : Un link pe care utilizatorul îl deplasează fără să dați clic pe
• activ : o legătură pe care utilizatorul a început să o facă, butonul mouse-ului

CSS poate personaliza fiecare dintre aceste patru stări, cel mai adesea prin utilizarea acestor proprietăți și valori.

Proprietăți și Valori CSS comune pentru legăturile de stil

Denumire	Valori posibile	Descriere
culoare	nume ( culoare: albastru,	), cod hexazecimal ( culoare: # 0000FF; ) sau valoare RGB ( culoare: rgb (0, 255) >). text-decorare none
subliniază	Setează linkul pentru a avea o subliniere (sau nu). Următoarele stiluri de exemple leagă într-un mod asemănător cu modul în care sunt redactate în articole din Wikipedia, unde legăturile sunt în mod albastru în mod implicit, subliniate cu mouse-ul și cu portocaliu atunci când sunt active. Așa cum se arată mai jos, primul link către Chief Technology Officer al Statelor Unite apare subliniat ca și cum ar fi dacă un mouse-ul ar fi plutind peste el. De asemenea, legătura cu Google apare în culoarea portocalie așa cum ar fi dacă ar fi activă și mouse-ul ar fi făcut clic pe el. a: link {	culoare: rgb (6, 69, 173);

decorare text: nici unul;

a: a vizitat {

culoare: rgb (11, 0, 128)

}

a: activa {

culoare: rgb (250, 167, 0)

}

Wikipedia. org pagina care afișează link-ul, vizita, hover și stările active.

Nu uitați să includeți colonul între selectorul

a

și starea legăturii.

Deși explicăm de ce este dincolo de sfera acestei cărți, specificațiile CSS insistă să definiți diferitele stări de legătură în ordinea prezentată aici - link, vizitate, hover și apoi activă.Cu toate acestea, este acceptabil să nu definim o stare de legătură, atât timp cât această ordine este păstrată.

Diferitele stări de legătură sunt cunoscute sub numele de

selectori de pseudo-clasă

. Selectorii de clase pseudo adaugă un cuvânt cheie selectorilor CSS și vă permit să modelați o stare specială a elementului selectat.