Kroky na odstránenie podčiarknutia z textových odkazov a problémov, ktoré si musíte byť vedomí
V predvolenom nastavení je textový text, ktorý je prepojený s HTML pomocou elementu alebo "anchor", vytvorený v podobe podčiarknutia. Často sa webové dizajnéri rozhodnú odstrániť tento predvolený styl odstránením podčiarknutia.
Mnoho návrhárov sa nestará o vzhľad podčiarknutého textu, najmä v hustých blokoch obsahu s množstvom odkazov. Všetky tieto podčiarknuté slová môžu naozaj narušiť tok čítania dokumentu. Mnohí tvrdili, že tieto zdôrazňuje skutočne, že slová ťažšie rozlišovať a čítať rýchlo, pretože spôsob, akým podčiarknutie mení prirodzené písmená.
Existujú však legitímne výhody pre zachovanie týchto podčiarknutých textových odkazov. Napríklad, keď prehľadávate veľké bloky textu, podčiarknuté odkazy spolu s vhodným farebným kontrasom umožňujú čitateľom okamžite prehľadávať stránku a zistiť, kde sú odkazy. Ak sa pozriete na články o web dizajne tu na About.com, rovnako ako ďalšie články na webe, uvidíte tento styling podčiarknuté odkazy na mieste.
Ak sa rozhodnete odstrániť odkazy z textu (jednoduchý proces, ktorý budeme v krátkom čase pokryť), nezabudnite nájsť spôsoby, ako tento text napísať, aby ste ešte rozlíšili to, čo je odkazom od toho, čo je obyčajný text. Najčastejšie sa to robí s uvedeným farebným kontrastom, ale samotná farba môže predstavovať problém pre návštevníkov so zrakovým postihnutím, ako je farebná slepota. V závislosti od ich konkrétnej formy farebnej slepoty môže byť na nich úplne stratený kontrast, ktorý im zabraňuje vidieť rozdiel medzi prepojeným a neviazaným textom. To je dôvod, prečo je zdôraznený text stále považovaný za najlepší spôsob, ako zobraziť odkazy.
Takže ako vypnete podčiarknutie, ak to ešte chcete urobiť? Keďže ide o vizuálnu charakteristiku, ktorej sa zaujímame, obrátime sa na časť našej webovej stránky, ktorá spracováva všetky vizuálne - CSS.
Použite kaskádové štýly na vypnutie podčiarknutia odkazov
Vo väčšine prípadov nechcete, aby ste podčiarkli len jeden textový odkaz. Namiesto toho váš štýl dizajnu pravdepodobne vyžaduje, aby ste odstránili podčiarknutia zo všetkých odkazov. Urobíte to tak, že pridáte štýly do vášho externého štýlu.
a {text-decoration: none; }To je ono! Jedna jednoduchá čiarka CSS vypne podčiarknutie (ktoré v skutočnosti používa vlastnosť CSS pre "dekoráciu textu") na všetkých odkazoch.
S týmto štýlom by ste sa tiež mohli podrobnejšie oboznámiť. Ak chcete napríklad vypnúť podčiarknutie alebo odkazy vnútri elementu "nav", môžete napísať:
Nav {text-decoration: none; }Teraz textové odkazy na stránke získajú predvolené podčiarknutie, ale tie v navigačnej jednotke by ju odstránili.
Jedna vec, ktorú sa mnohí web dizajnéri rozhodnú urobiť, je prepnúť prepojenie späť "na", keď sa niekto vznáša nad textom. Toto by sa vykonalo pomocou: pseudo-triedy CSS, ako je toto:
a {text-decoration: none; } a: vznáša sa {text-decoration: underline; }Použitie Inline CSS
Ako alternatívu k vykonaniu zmien v externom štýle šablón môžete tiež pridať štýly priamo do samotného elementu v HTML, napríklad:
tento odkaz nemá podčiarknutéProblém s touto metódou spočíva v tom, že umiestňuje informácie o štýle do štruktúry HTML, čo nie je najlepšou praxou. Štýl (CSS) a štruktúra (HTML) by mali byť oddelené.
Ak ste chceli, aby všetky textové odkazy lokality odstránili podčiarknutie, pridanie týchto informácií o štýle ku každému prepojeniu na individuálnom základe by znamenalo, že do kódu vášho webu bude pridaná značná suma ďalších značiek. Táto strata stránky môže spomaliť čas načítania stránky a celkovo zvládnuť celkovú správu stránok. Z týchto dôvodov je lepšie, aby ste sa vždy obrátili na externú šablónu štýlov pre všetky potreby stránkového štýlu.
V závere
Rovnako jednoduché, ako odstrániť podčiarknutie z textových odkazov webovej stránky, mali by ste mať na pamäti aj dôsledky takejto činnosti. Hoci môže skutočne vyčistiť vzhľad stránky, môže to urobiť na úkor celkovej použiteľnosti. Zoberte to do úvahy pri ďalšom zvážení zmeny vlastností textovej dekorácie.
Originálny článok od Jennifer Krynin. Editoval dňa 19.9.19 Jeremy Girard