Eliminați sublinierea liniei sau creați link-uri Dashed Dotted sau Double Underlined
În mod implicit, browserele web au anumite stiluri CSS pe care le aplică anumitor elemente HTML. Dacă nu înlocuiți aceste valori implicite cu foile de stil proprii ale site-ului dvs., atunci se vor aplica valorile implicite. Pentru hyperlink-uri, stilul implicit de afișare este că orice text legat va fi albastru și subliniat. Browserul face acest lucru astfel încât vizitatorii unui site să poată vedea cu ușurință ce text este legat. Mulți designeri web nu le pasă de aceste stiluri implicite, în special de cele subliniate. Din fericire, CSS ușurează schimbarea aspectului subliniază sau eliminarea completă a acestora.
Eliminarea sublinierii legăturilor text
Textul subliniat poate fi mai dificil de citit textul care nu este subliniat. În plus, mulți designeri pur și simplu nu le pasă de aspectul legăturilor text subliniate. În aceste cazuri, probabil că veți dori să eliminați aceste subliniază cu totul.
Pentru a elimina sublinierea din legăturile text, veți folosi decorarea textului proprietății CSS. Aici este CSS pe care l-ați scrie pentru a face acest lucru:
a {text-decoration: none; }
Cu acea linie de CSS, eliminați sublinierea din toate linkurile de text. Chiar dacă acesta este un stil foarte general (folosește un selector de elemente), acesta are încă o specificitate mai mare decât stilurile implicite ale browserelor. Deoarece acele stiluri implicite sunt ceea ce creează sublinierea pentru început, este necesar să suprascrieți.
Atenție la eliminarea sublinierilor
Din punct de vedere vizual, îndepărtarea subliniază poate fi exact ceea ce doriți să faceți, dar trebuie să fiți precauți și când faceți acest lucru. Indiferent dacă vă place aspectul de link-uri subliniate sau nu, nu puteți susține că ei fac clar ce text este legat și care nu este. Dacă scoateți subliniază sau schimbați culoarea implicită a link-ului albastru, ar trebui să vă asigurați că le înlocuiți cu stiluri care încă permit ca textul legat să iasă în evidență. Acest lucru va face pentru o experiență mai intuitivă pentru vizitatorii site-ului dvs.
Nu subliniați ne-legăturile
O altă prudență privind legăturile și subliniază nu subliniază textul care nu este o legătură ca o modalitate de a accentua acest lucru. Oamenii au ajuns să aștepte ca textul subliniat să fie un link, așadar dacă subliniați conținutul pentru a adăuga accent (în loc să-l boldizați sau să-l aliniați), trimiteți un mesaj greșit și veți confunda utilizatorii site-ului.
Modificați sublinierea la puncte sau liniuțe
Dacă doriți să mențineți sublinierea linkului dvs. text, dar schimbați stilul subliniat din aspectul implicit, care este o linie "soldi", puteți face acest lucru și dumneavoastră. În loc de acea linie solidă, poți folosi puncte pentru a sublinia legăturile tale. Pentru a face acest lucru, veți elimina în continuare sublinierea, dar o veți înlocui cu proprietatea stilului de jos a frontierei:
a {text-decoration: none; frontală de fund: 1px punctată; }Deoarece ați eliminat sublinierea standard, punctul punctat este singurul care apare.
Puteți face același lucru pentru a obține liniuțe. Doar schimbați stilul de margine de jos la punct:
a {text-decoration: none; frontieră-jos: 1px întreruptă; }Modificați culoarea subliniată
O altă modalitate de a atrage atenția asupra legăturilor dvs. este schimbarea culorii sublinierii. Doar asigurați-vă că culoarea se potrivește cu schema de culori .
a {text-decoration: none; margine de fund: 1px roșu roșu; }Dublu subliniază
Trucul de a folosi dublu subliniază este că trebuie să schimbați lățimea frontierei. Dacă creați o margine de 1px lățime, veți sfârși cu o dublă subliniere care arată ca o singură subliniere.
a {text-decoration: none; marginea inferioară: 3px dublă; }De asemenea, puteți utiliza sublinierea existentă pentru a face o dublă subliniere cu alte caracteristici, cum ar fi una dintre liniile punctate:
a {border-bottom: 1px dublu; }Nu uitați statele de legătură
Puteți adăuga stilul inferior de fund la linkurile dvs. în diferite stări, cum ar fi: hover,: active sau: visited. Acest lucru poate crea o experiență de tip "rollover" frumos pentru vizitatori atunci când utilizați pseudo-clasa "hover". Pentru a face oa doua subliniere punctată apare atunci când plasați cursorul peste link:
a {text-decoration: none; } a: plasați cursorul {border-bottom: 1px punctat; }Articolul original de Jennifer Krynin. Editat de Jeremy Girard