Научете лесен начин за премахване на подчертанията от връзки в HTML

Стъпки за премахване на подчертаването от текстовите връзки и проблемите, за които е известно

По подразбиране текстовото съдържание, свързано с HTML посредством елемента или "anchor", е оформено с подчертана линия. Много пъти уеб дизайнерите избират да премахнат този стандартен стил, като премахнат подчертаната линия.

Много дизайнери не се интересуват от външния вид на подчертания текст, особено в гъсти блокове със съдържание с много връзки. Всички тези подчертани думи наистина могат да нарушат потока от четене на документ. Мнозина твърдят, че тези подчертавания всъщност правят думи по-трудни за разграничаване и четене бързо поради начина, по който подчертават промените на естествените букви.

Има обаче легитимни ползи от запазването на тези подчертавания в текстовите връзки. Например, когато преглеждате големи блокове от текстове, подчертаните връзки, съчетани с подходящ цветен контраст, улесняват читателите незабавно да сканират страница и да видят къде са връзките. Ако се вгледате в статиите за уеб дизайнерство тук, както и в други статии на сайта, ще видите този стил на подчертани връзки.

Ако решите да премахнете връзки от текста (прост процес, който ще покрием скоро), не забравяйте да намерите начини за оформяне на този текст, за да различавате какво представлява връзка от обикновен текст. Това най-често се прави с гореспоменатия цветен контраст, но само цветът може да създаде проблем за посетителите със зрителни увреждания като цветна слепота. В зависимост от конкретната им форма на цветна слепота, контрастът може да бъде напълно изгубен върху тях, което им пречи да видят разликата между свързания и несвързания текст. Ето защо подчертаният текст все още се смята за най-добрият начин за показване на връзки.

Е, как изключвате подчертаването, ако все още искате да го направите? Тъй като това е визуална характеристика, за която сме загрижени, ще се обърнем към частта от нашия уебсайт, който се занимава с всички визуални - CSS.

Използвайте листовете за каскадни стилове, за да изключите подчертанията на връзките

В повечето случаи не искате да превърнете подчертаването на само една текстова връзка. Вместо това, вашият дизайн стил вероятно изисква от вас да премахнете подчертава от всички linkss.You ще направите това, като добавите стилове към вашия външен стил лист.

a {текст-декорация: няма; }

Това е! Това, че една проста линия на CSS ще изключи подсветката (която всъщност използва CSS свойството за "текстова декорация") на всички връзки.

Можете също да получите по-конкретни с този стил. Например, ако искате да изключите подсветката или връзките вътре в елемента "nav", можете да напишете:

nav {текст-украса: няма; }

Сега текстовите линкове на страницата ще получат подразбиране по подразбиране, но тези в кораба ще го премахнат.

Едно нещо, което много уеб дизайнери избират да направят, е да включат връзката "на", когато някой се нахвърли върху текста. Това би било направено с помощта на: hover pseudo-класа CSS, както следва:

a {текст-декорация: няма; } a: задръжте {text-decoration: underline; }

Използване на Inline CSS

Като алтернатива на извършването на промени в външен стилообразен лист, можете също така да добавите стиловете директно към самия елемент в HTML, като следното:

тази връзка няма подчертаване

Проблемът с този метод е, че поставя информация за стила във вашата HTML структура, което не е най-добрата практика. Стилът (CSS) и структурата (HTML) трябва да се пазят отделно.

Ако искате всички текстови връзки на даден сайт да имат премахнато подчертаване, добавянето на тази информация за стила към всяка линка на индивидуална основа би означавало, че към кода на сайта Ви ще бъде добавена справедлива сума на допълнителни маркировки. Тази страница може да забави времето за зареждане на сайта и да направи цялостното управление на страницата много по-голямо предизвикателство. Поради тези причини е за предпочитане винаги да се обръщате към външен стилов лист за всички потребности от стил на страница.

В заключителната

Също толкова лесно, колкото да премахнете подчертаването от текстовите връзки на уеб страницата, трябва също така да имате предвид последиците от това. Макар че наистина може да изчисти външния вид на дадена страница, може да направи това за сметка на общата използваемост. Вземете това предвид следващия път, когато помислите за промяна на свойствата на "декорацията на текст" на страницата.

Оригинална статия на Дженифър Кринин. Променено на 9/19/16 от Джереми Жирар