Премахване на подсмърчаването на връзката или създаване на Dashed Dotted или Double Underlined Links
По подразбиране уеб браузърите имат определени стилове на CSS, които прилагат за конкретни HTML елементи. Ако не презапишете тези стойности по подразбиране със собствените листове стил на сайта си, ще се прилагат по подразбиране. За хипервръзките стандартният стил на показване е, че всеки свързан текст ще бъде синьо и подчертано. Браузърът прави това така, че посетителите на сайта лесно могат да видят какъв е текстът. Много уеб дизайнери не се интересуват от тези стилове по подразбиране, особено тези, които подчертават. За щастие CSS улеснява промяната на външния вид на тези подчертавания или ги премахва напълно.
Премахване на подчертанията на текстовите връзки
Подчертаният текст може да бъде по-трудно да прочетете този не-подчертан текст. Освен това много дизайнери просто не се интересуват от външния вид на подчертаните текстови връзки. В тези случаи, най-вероятно ще искате да премахнете тези подчертавания напълно.
За да премахнете подчертанията от текстовите връзки, ще използвате CSS собственост текст декорация. Ето CSS, който ще напишете, за да направите това:
a {текст-декорация: няма; }
С този един ред от CSS ще премахнете подсветката от всички текстови връзки. Въпреки че това е един много общ стил (използва селектор на елементи), той все още има по-специфичност, отколкото стандартните стилове на браузъри. Тъй като тези стилове по подразбиране са онова, което създава подчертанията, за да започнете, това е, което трябва да презапишете.
Внимание при премахване на поднини
Визуално премахването на подчертава може да бъде точно това, което искате да постигнете, но трябва да бъдете предпазливи и когато правите това. Независимо дали ви харесва видът на подчертани линкове или не, не можете да твърдите, че те правят очевидно кой текст е свързан и кой не е. Ако отстраните подчертава или променя този цвят на син цвят по подразбиране, трябва да сте сигурни, че го замествате със стилове, които все още позволяват на свързания текст да се откроява. Това ще направи по-интуитивно преживяване за посетителите на сайта Ви.
Не подчертавайте връзките, които не са свързани
Друго внимание към връзките и подчертава, не подчертават текст, който не е линк като начин да го подчертаеш. Хората са очаквали подчертаният текст да бъде връзка, така че ако подчертаете съдържанието, за да добавите акцент (вместо да го направите смели или да го направите курсив), изпращате грешното съобщение и ще объркате потребителите на сайта.
Променете подчертанията на точки или тирета
Ако искате да запазите текстовата си връзка, подчертава, но променете стила на това подчертаване от изгледа по подразбиране, който е "soldi" линия, можете да направите това също. Вместо тази твърда линия можете да използвате точки, за да подчертаете връзките си. За да направите това, пак ще премахнете подчертанието, но ще го замените със собствеността на стил на край на дъното:
a {текст-декорация: няма; крайно дъно: 1px пунктирано; }Тъй като премахнахте стандартната подчертана линия, то тя е единствената, която се появява.
Можете да направите същото, за да получите тирета. Трябва само да промените стила на дъното до чертане:
a {текст-декорация: няма; крайно крайно: 1px пунктирано; }Променете цвета на подчертаване
Друг начин да привлечете вниманието към вашите връзки е да промените цвета на подчертаването. Просто се уверете, че цветът отговаря на цветовата схема .
a {текст-декорация: няма; крайно дъно: 1px плътно червено; }Двойни подчертавания
Трикът за използване на двойно подчертава е, че трябва да промените ширината на границата. Ако създадете 1px широка граница, ще завършите с двойно подчертаване, което прилича на единично подчертание.
a {текст-декорация: няма; крайно дъно: 3px двойно; }Можете също така да използвате съществуващата линия, за да направите двойно подчертаване с други функции, като например една от линиите, които са пунктирани:
{border-bottom: 1px двойно; }Не забравяйте държавите на връзката
Можете да добавите стила на долния край на връзките си в различни състояния като: задръжте курсора на мишката,: активен или: посетихте. Това може да създаде приятно преживяване "с преобръщане" за посетителите, когато използвате тази псевдо класа. За да направите втора подчертана линия, се появява, когато задържите курсора на мишката върху връзката:
a {текст-декорация: няма; } a: задръжте курсора на мишката {border-bottom: 1px dotted; }Оригинална статия на Дженифър Кринин. Редактиран от Джеръми Жирар