În mod implicit, conținut text care este legat de HTML folosind elementul sau „ancoră” este stilat cu un subliniat. Adesea, designerii web aleg să elimine acest stil implicit prin eliminarea sublinierii.
Motive pentru și împotriva sublinierii
Mulți designeri nu au grijă de aspectul textului subliniat, mai ales în blocuri dense de conținut cu o mulțime de linkuri. Toate aceste cuvinte subliniate pot întrerupe cu adevărat fluxul de lectură al unui document. Mulți au susținut că aceste sublinieri fac de fapt cuvintele mai greu de distins și citit rapid din cauza modului în care sublinierea modifică formele de litere naturale.
Cu toate acestea, există beneficii legitime în păstrarea acestor sublinieri pe linkurile text. De exemplu, atunci când navigați prin blocuri mari de text, linkurile subliniate, combinate cu un contrast de culoare adecvat, fac ușor pentru cititori să scaneze imediat o pagină și să vadă unde sunt linkurile.
Dacă decideți să eliminați link-uri din text (un proces simplu pe care îl vom acoperi în scurt timp), asigurați-vă că găsiți modalități de stilizare a textului pentru a diferenția în continuare ceea ce este un link de ceea ce este text simplu. Acest lucru se face cel mai adesea cu
contrast de culoare, dar culoarea singură poate pune o problemă vizitatorilor cu deficiențe de vedere, cum ar fi orbirea culorii. În funcție de forma lor particulară de daltonism, contrastul se poate pierde total asupra lor, împiedicându-i să vadă diferența dintre textul legat și cel nelegat. Acesta este motivul pentru care textul subliniat este considerat în continuare cel mai bun mod de a afișa linkuri.Deci, cum dezactivați un subliniat dacă totuși doriți să faceți acest lucru? Deoarece aceasta este o caracteristică vizuală de care ne preocupăm, vom trece la partea site-ului nostru web care se ocupă de toate aspectele vizuale - CSS.
Utilizați Foi de stil în cascadă pentru a dezactiva sublinierile pe linkuri
În majoritatea cazurilor, nu căutați să dezactivați un subliniat pe un singur link text. În schimb, stilul dvs. de design necesită probabil eliminarea sublinierilor de pe toate linkurile. Ați face acest lucru adăugând stiluri la foaie de stil externă.
A {
decor-text: nici unul;
}
Asta este! Acea linie simplă de CSS ar dezactiva sublinierea (care utilizează de fapt proprietatea CSS pentru „decorarea textului”) pe toate linkurile.
De asemenea, ați putea fi mai specific cu acest stil. De exemplu, dacă doriți doar să dezactivați sublinierea sau legăturile din interiorul elementului „nav”, puteți scrie:
nav a {
decor-text: nici unul;
}
Acum, legăturile text de pe pagină vor primi subliniatul implicit, dar cei din nav ar fi eliminat.
Un lucru pe care mulți designeri de web aleg să îl facă este să readucă linkul „pe” atunci când cineva trece peste text. Acest lucru se va face folosind: hover CSS pseudo-clasă, ca aceasta:
A {
decor-text: nici unul;
}
a: hover {
decorare text: subliniat;
}
Folosind Inline CSS
Ca alternativă la modificarea unei foi de stil externe, puteți adăuga stilurile direct la elementul în sine HTML.
Problema cu această metodă este că plasează informații despre stil în structura HTML, ceea ce nu este o bună practică. Stilul (CSS) și structura (HTML) trebuie păstrate separat.
Dacă doriți ca toate linkurile text ale unui site să fie eliminate subliniatul, adăugând aceste informații despre stil fiecare link pe bază individuală ar însemna o cantitate echitabilă de adăugare suplimentară la site-ul dvs. cod. Această umflare a paginii poate încetini timpul de încărcare al unui site și poate face gestionarea generală a paginii mult mai dificilă. Din aceste motive, este de preferat să apelați întotdeauna la o foaie de stil externă pentru toate nevoile de stilare a paginii.
În încheiere
Pe cât de ușor este să eliminați sublinierea de pe linkurile text ale unei pagini web, ar trebui să fiți conștienți de consecințele acestui lucru. Deși poate curăța într-adevăr aspectul unei pagini, poate face acest lucru în detrimentul utilizării generale. Luați în considerare acest lucru data viitoare când luați în considerare modificarea proprietăților „decorare text” a unei pagini.