Kroky k odstranění podtržení z textových odkazů a problémů, které si musíte být vědomi
Ve výchozím nastavení je textový text, který je propojen s kódem HTML pomocí prvku nebo "anchor", stylizovaný podtržením. Často se weboví návrháři rozhodnou odstranit tento výchozí styl odstraněním podtržení.
Mnoho designérů se nestará o vzhled podtrženého textu, obzvláště v hustých blocích obsahu se spoustou odkazů. Všechny tyto podtržené slova mohou skutečně narušit čtecí tok dokumentu. Mnozí argumentovali, že tato zdůraznění skutečně dělají slova těžší rozlišovat a číst rychle, protože způsob, jakým podtrhování mění přirozené formáty dopisů.
Existují však oprávněné výhody pro zachování těchto podtržení na textových linkách. Když například procházíte velké bloky textu, podtržené odkazy spolu s vhodným barevným kontrastem usnadňují čtenářům okamžitě skenovat stránku a zjistit, kde jsou odkazy. Pokud se podíváte na články o web designu zde na About.com, stejně jako další články na webu, uvidíte tento stylování podtržených odkazů na místě.
Pokud se rozhodnete odstranit odkazy z textu (jednoduchý proces, který budeme brzy pokrývat), ujistěte se, že najdete způsoby, jak tento text stylovat, abyste ještě rozlišovali, co je odkaz z toho, co je prostý text. To je nejčastěji prováděno s výše uvedeným barevným kontrastem, ale samotná barva může představovat problém pro návštěvníky se zrakovým postižením, jako je barevná slepota. V závislosti na konkrétní formě barevné slepoty může být na nich zcela ztracen kontrast, což jim brání v tom, aby viděli rozdíly mezi propojeným a nepřipojeným textem. Proto je zdůrazněný text stále považován za nejlepší způsob, jak zobrazit odkazy.
Takže jak vypnete podtržení, pokud to chcete ještě udělat? Vzhledem k tomu, že se jedná o vizuální charakteristiku, která nás zajímá, se obrátíme na část našich webových stránek, která zpracovává všechny vizuální - CSS.
Pomocí kaskádových stylů můžete vypnout podtržení odkazů
Ve většině případů nechcete, aby se podtržení změnilo pouze na jeden textový odkaz. Místo toho váš styl designu pravděpodobně vyžaduje, abyste odstranili podtržení ze všech odkazů. To byste udělali přidáním stylů do vašeho externího stylu.
a {text-decoration: none; }}A je to! Jeden jednoduchý řádek CSS by vypnul podtržení (který vlastně používá vlastnost CSS pro "textovou výzdobu") na všech linkách.
Také byste se s tímto stylem mohli lépe seznámit. Pokud například chcete vypnout podtržení nebo odkazy uvnitř prvku "nav", můžete napsat:
nav a {text-dekorace: žádná; }}Nyní by textové odkazy na stránce získaly výchozí podtržení, ale ty, které se nacházejí ve vlaku, by ji odstranily.
Jedna věc, kterou si mnoho webových návrhářů zvolí, je vrátit odkaz "na", když se někdo pohybuje nad textem. Toto by bylo provedeno pomocí: pseudo-třídy CSS, jako je tato:
a {text-decoration: none; } a: vznášet se {text-decoration: underline; }}Použití Inline CSS
Jako alternativu ke změně externího stylu, můžete také přidat styly přímo do samotného prvku v HTML, například:
tento odkaz nemá podtrženíProblém s touto metodou spočívá v umístění informací o stylu do struktury HTML, což není nejlepší postup. Styl (CSS) a struktura (HTML) by měly být odděleny.
Pokud jste chtěli, aby všechny textové odkazy webu byly odstraněny, přidání těchto informací o stylu jednotlivým odkazům na individuální bázi by znamenalo, že do kódu vašeho webu bude přidáno dostatečné množství dalších značek. Tato stránka může mít za následek zpomalení času načítání webu a celkový zvládnutí stránky je mnohem náročnější. Z těchto důvodů je vhodné vždy se obrátit na externí stylový list pro všechny potřeby stylingu stránky.
V závěru
Jak snadné je odstranit podtržení z textových odkazů webové stránky, měli byste mít také na vědomí důsledky takového jednání. Zatímco to může skutečně vyčistit vzhled stránky, může to udělat na úkor celkové použitelnosti. Vezměte to v úvahu při příštím uvažování o změně vlastností "text-dekorace" stránky.
Původní článek Jennifer Krynin. Upraveno 19/19/16 Jeremy Girard