По подразбиране текстовото съдържание, което е свързан с HTML с помощта на елемента или "anchor" се стилизира с подчертаване. Често уеб дизайнерите избират да премахнат този стил по подразбиране, като премахнат подчертаването.
Причини за и против подчертаването
Много дизайнери не се интересуват от вида на подчертания текст, особено в плътни блокове съдържание с много връзки. Всички тези подчертани думи наистина могат да нарушат процеса на четене на документ. Мнозина твърдят, че тези подчертавания всъщност правят думите по-трудни за разграничаване и четене бързо поради начина, по който подчертаването променя естествените буквени форми.
Съществуването на законни ползи от запазването на тези подчертавания на текстовите връзки обаче. Например, когато разглеждате големи блокове текст, подчертаните връзки, съчетани с подходящ цветен контраст, улесняват читателите незабавно да сканират страница и да видят къде са връзките.
Ако решите да премахнете връзки от текста (прост процес, който ще разгледаме скоро), не забравяйте да намерите начини за стилизиране на този текст, за да разграничите това, което е връзка, от това, което е обикновен текст. Най-често това се прави с
цветен контраст, но самият цвят може да създаде проблем за посетителите със зрителни увреждания като цветна слепота. В зависимост от конкретната им форма на цветна слепота, контрастът може да бъде напълно загубен върху тях, което им пречи да видят разликата между свързания и несвързания текст. Ето защо подчертаният текст все още се счита за най-добрият начин за показване на връзки.И така, как да изключите подчертаването, ако все пак искате да го направите? Тъй като това е визуална характеристика, с която се занимаваме, ще се обърнем към частта от нашия уебсайт, която обработва всички визуални неща - CSS.
Използвайте каскадни таблици със стилове, за да изключите подчертаванията на връзките
В повечето случаи не искате да изключите подчертаването само на една текстова връзка. Вместо това вашият стил на дизайн вероятно изисква да премахнете подчертаванията от всички връзки. Можете да направите това, като добавите стилове към вашия външен лист със стилове.
а {
декорация на текст: няма;
}
Това е! Тази една проста линия на CSS ще изключи подчертаването (което всъщност използва свойството CSS за "декорация на текст") на всички връзки.
Можете също така да получите по-конкретни с този стил. Например, ако искате да изключите само подчертаването или връзките вътре в елемента "nav", можете да напишете:
nav a {
декорация на текст: няма;
}
Сега текстовите връзки на страницата ще получат подчертаването по подразбиране, но тези в навигацията ще го премахнат.
Едно нещо, което много уеб дизайнери решават да направят, е да включат връзката отново „включена“, когато някой задържи курсора на мишката над текста. Това ще бъде направено с помощта на: hover CSS псевдоклас, като този:
а {
декорация на текст: няма;
}
a: hover {
декорация на текст: подчертаване;
}
Използване на вграден CSS
Като алтернатива на извършване на промени във външен лист със стилове, можете също да добавите стиловете директно към самия елемент в HTML.
Проблемът с този метод е, че той поставя информация за стила във вашата HTML структура, което не е най-добрата практика. Стил (CSS) и структура (HTML) трябва да се държат отделно.
Ако искате всички текстови връзки на даден сайт да премахнат подчертаването, добавете тази информация за стила към всяка връзка поотделно би означавала справедлива сума допълнителна надценка, добавена към сайта на вашия сайт код. Раздуването на тази страница може да забави времето за зареждане на даден сайт и да направи цялостното управление на страниците много по-предизвикателно. Поради тези причини е за предпочитане винаги да се обръщате към външен лист със стилове за всички нужди за стилизиране на страници.
В заключителната
Колкото и да е лесно да премахнете подчертаването от текстовите връзки на уеб страница, вие също трябва да имате предвид последиците от това. Въпреки че наистина може да изчисти вида на страницата, може да го направи за сметка на цялостната използваемост. Вземете това предвид следващия път, когато помислите за промяна на свойствата на страницата за „декорация на текст“.