Etape de a elimina sublinierea de la link-urile de text și de problemele pe care trebuie să le cunoașteți
Implicit, conținutul de text care este conectat la HTML utilizând elementul sau "anchor" este desenat cu o subliniere. Deseori, designerii web aleg să elimine acest stil implicit eliminând sublinierea.
Mulți designeri nu au grijă de aspectul textului subliniat, în special în blocuri de conținut dense cu multe linkuri. Toate aceste cuvinte subliniate pot sparge într-adevăr fluxul de citire al unui document. Mulți au susținut că aceste subliniază face cuvintele greu de distins și de citit rapid datorită modului în care sublinierea schimba foile de scris naturale.
Cu toate acestea, există beneficii legitime pentru menținerea acestor subliniază în legăturile text. De exemplu, când navigați prin blocuri mari de text, linkurile subliniate, împreună cu contrastul adecvat al culorilor, fac cititorii mai ușor să scaneze imediat o pagină și să vadă unde sunt legăturile. Dacă te uiți la articole de web design aici pe About.com, precum și alte articole de pe site-ul, veți vedea acest stil de link-uri subliniate în loc.
Dacă decideți să eliminați linkurile din text (un proces simplu pe care îl vom acoperi în scurt timp), asigurați-vă că găsiți modalități de a modela acel text pentru a diferenția în continuare ce este un link din ceea ce este textul simplu. Acest lucru se face cel mai adesea cu acel contrast de culoare menționat anterior, dar culoarea în sine poate reprezenta o problemă pentru vizitatorii cu deficiențe de vedere cum ar fi orbirea colorată. În funcție de forma lor specifică de orbire a culorilor, contrastul poate fi total pierdut pe ele, împiedicându-le să vadă diferența dintre textul legat și cel nelegat. Acesta este motivul pentru care textul subliniat este considerat încă cel mai bun mod de a afișa legături.
Deci, cum se oprește o subliniere dacă vreți să faceți acest lucru? Deoarece aceasta este o caracteristică vizuală cu care suntem preocupați, ne vom îndrepta către partea din site-ul nostru care gestionează toate aspectele vizuale - CSS.
Utilizați coli de stil cascadă pentru a dezactiva linia de subliniere a legăturilor
În cele mai multe cazuri, nu căutați să transformați o subliniere pe un singur link text. În schimb, stilul dvs. de design necesită probabil eliminarea subliniază din toate legăturile. Ați face acest lucru adăugând stiluri la foaia de stil externă.
a {text-decoration: none; }Asta e! O linie simplă de CSS ar dezactiva sublinierea (care utilizează de fapt proprietatea CSS pentru "decorarea textului") pe toate linkurile.
De asemenea, puteți obține mai multe detalii cu acest stil. De exemplu, dacă doriți doar să dezactivați sublinierea sau legăturile din interiorul elementului "nav", puteți scrie:
nav {text-decoration: nimic; }Acum, legăturile de text de pe pagină ar primi sublinierea implicită, dar cele din nav ar fi eliminat.
Un lucru pe care mulți designeri web îl aleg să-l facă este să întoarcă legătura "pe" atunci când cineva se așează peste text. Acest lucru se va face folosind: pseudo-clasa CSS hover, astfel:
a {text-decoration: none; } a: hover {text-decorare: subliniere; }Utilizarea CSS inline
Ca alternativă la modificarea unei foi de stiluri externe, puteți adăuga stilurile direct la elementul în sine în HTML, cum ar fi:
acest link nu are subliniereProblema cu această metodă este aceea că plasează informații despre stil în interiorul structurii dvs. HTML, care nu este o bună practică. Stilul (CSS) și structura (HTML) ar trebui păstrate separat.
Dacă doriți ca toate linkurile de text ale unui site să aibă subliniat eliminat, adăugarea acestor informații de stil fiecărui link pe o bază individuală ar însemna adăugarea unei valori corecte de marcare suplimentară pe codul site-ului dvs. Această pagină bloat poate încetini timpul de încărcare a unui site și poate face mult mai dificilă gestionarea globală a paginilor. Din aceste motive, este preferabil să vă întoarceți întotdeauna la o foaie de stil externă pentru toate nevoile de styling ale paginilor.
În încheiere
Atât de ușor este eliminarea sublinierii de pe link-urile de text ale unei pagini web, trebuie să țineți minte de consecințele acestei acțiuni. Deși poate într-adevăr să curețe aspectul unei pagini, poate face acest lucru în detrimentul utilizării globale. Luați acest lucru în considerare data viitoare când vă gândiți să modificați proprietățile de "decorare text" ale unei pagini.
Articolul original de Jennifer Krynin. Editat pe 9/19/16 de către Jeremy Girard