Cum se modifică sublinierile linkurilor HTML pe o pagină web

Acest articol explică mai multe moduri în care puteți utiliza CSS pentru a schimba aspectul implicit al legăturilor text de pe pagina dvs. web, eliminând subliniatul, schimbându-l într-o linie punctată sau schimbându-i culoarea. Informații suplimentare sunt incluse pentru schimbarea sublinierii într-o linie punctată sau subliniere dublă.

Cum să eliminați sublinierea de pe linkurile text

În mod implicit, browserele web au anumite Stiluri CSS că se aplică anumitor elemente HTML. Dacă nu suprascrieți aceste valori implicite cu propriile foi de stil ale site-ului dvs., se aplică valorile implicite. Pentru

hyperlinkuri, stilul de afișare implicit este că orice text legat este albastru și subliniat. Dacă doriți, puteți schimba aspectul acestor sublinieri sau le puteți elimina complet de pe pagina dvs. web.

Pentru a elimina sublinierile de pe linkurile text, utilizați proprietatea CSS text-decor. Iată CSS pe care îl scrieți pentru a face acest lucru:

a {text-decoration: none; }

Cu acea linie CSS, eliminați sublinierea de pe toate linkurile text de pe pagina dvs. web. Chiar dacă acesta este un stil foarte general (folosește un selector de elemente), are totuși mai multă specificitate decât stilurile implicite ale browserelor. Deoarece aceste stiluri implicite sunt cele care creează sublinierile pentru început, acesta este ceea ce trebuie să suprascrieți.

O atenție la eliminarea sublinierilor

Vizual, eliminarea sublinierilor poate fi exact ceea ce doriți să realizați, dar ar trebui să fiți precaut și atunci când faceți acest lucru. Indiferent dacă vă place sau nu aspectul linkurilor subliniate, nu puteți susține că acestea fac evident ceea ce text este legat și care nu. Dacă eliminați sublinierile sau modificați culoarea implicită a linkului albastru, ar trebui să vă asigurați că le înlocuiți cu stiluri care permit în continuare să se evidențieze textul legat. Acest lucru va face pentru o experiență mai intuitivă pentru vizitatorii site-ului dvs.

Nu subliniați non-linkurile

O altă precauție cu privire la linkuri și sublinieri, nu subliniați textul care nu este un link ca modalitate de a-l sublinia. Oamenii s-au așteptat ca textul subliniat să fie un link, deci dacă subliniați conținutul pentru a adăuga accentul (în loc să îl faceți îndrăzneț sau să îl faceți cursiv), trimiteți un mesaj greșit și veți deruta site-ul utilizatori.

Cum să schimbați sublinierea în puncte sau liniuțe

Dacă doriți să păstrați sublinierea linkului text, dar să schimbați stilul respectivului subliniat de la aspectul implicit, care este o linie „solidă”, puteți face și acest lucru. În loc de acea linie solidă, puteți utiliza puncte pentru a vă sublinia linkurile. Pentru a face acest lucru, veți șterge în continuare subliniatul, dar îl veți înlocui cu proprietatea stilului de la marginea de jos:

a {text-decoration: none; marginea de jos: 1px punctat; }

Deoarece ați eliminat subliniul standard, cel punctat este singurul care apare.

Puteți face același lucru pentru a obține liniuțe. Pur și simplu schimbați stilul de la marginea de jos la punctat:

a {text-decoration: none; marginea de jos: 1px întrerupt; }

Cum să schimbați culoarea subliniată

O altă modalitate de a atrage atenția asupra link-urilor dvs. este schimbarea culorii sublinierii. Asigurați-vă că culoarea se potrivește cu cea a dvs. schema de culori.

a {text-decoration: none; margine-fund: 1 px roșu continuu; }

Subliniere duble

Trucul pentru a utiliza subliniere duble este că trebuie să modificați lățimea chenarului. Dacă creați o margine lată de 1 px, veți ajunge cu o subliniere dublă care arată ca o singură subliniere.

a {text-decoration: none; marginea de jos: 3px dublu; }

De asemenea, puteți utiliza sublinierea existentă pentru a face o subliniere dublă cu alte caracteristici, cum ar fi una dintre liniile punctate:

a {border-bottom: 1px double; }

Nu uitați de stările de legătură

Puteți adăuga stilul marginii de fund la linkurile dvs. în diferite stări, cum ar fi: hover,: activ sau: vizitat. Acest lucru poate crea o experiență plăcută de stil „rollover” pentru vizitatori atunci când utilizați acea pseudo-clasă „hover”. Pentru a face să apară un al doilea punct subliniat atunci când treceți cu mouse-ul peste link:

a {text-decoration: none; }
a: hover {border-bottom: 1px punctat; }