Как да променя подчертаването на HTML връзки на уеб страница

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

Как да премахнете подчертаването на текстовите връзки

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

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

За да премахнете подчертаванията от текстовите връзки, използвате CSS свойството text-decoration. Ето CSS, който пишете, за да направите това:

a {текстова украса: няма; }

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

Предупреждение за премахване на подчертаванията

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

Не подчертавайте не-връзките

Друго предупреждение за връзки и подчертавания, не подчертавайте текст, който не е връзка, като начин за подчертаването му. Хората са очаквали, че подчертаният текст ще бъде връзка, така че ако подчертаете съдържанието, за да добавите акцент (вместо да го правите удебелен или курсив), изпращате грешно съобщение и ще объркате сайта потребители.

Как да промените подчертаването на точки или тирета

Ако искате да запазите подчертаването на текстовата си връзка, но да промените стила на това подчертаване от облика по подразбиране, който е "плътен" ред, можете да направите и това. Вместо тази плътна линия можете да използвате точки, за да подчертаете връзките си. За да направите това, все още ще премахнете подчертаването, но ще го замените със свойството style-border-bottom:

a {текстова украса: няма; граница-дъно: 1px пунктирана; }

Тъй като сте премахнали стандартното подчертаване, единственото, което се появява, е пунктирано.

Можете да направите същото, за да получите тирета. Просто променете стила на границата отдолу на пунктиран:

a {текстова украса: няма; граница-дъно: 1px пунктирана; }

Как да промените цвета на подчертаването

Друг начин да привлечете вниманието към вашите връзки е да промените цвета на подчертаването. Просто се уверете, че цветът отговаря на вашия цветова схема.

a {текстова украса: няма; граница-дъно: 1px плътно червено; }

Двойни подчертавания

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

a {текстова украса: няма; граница-дъно: 3px двойно; }

Можете също да използвате съществуващото подчертаване, за да направите двойно подчертаване с други функции, като например един от редовете, които са пунктирани:

a {border-bottom: 1px double; }

Не забравяйте състоянията на връзката

Можете да добавите стил на границата отдолу към вашите връзки в различни състояния, като например: hover,: active или: posetila. Това може да създаде приятно изживяване в стил "преобръщане" за посетителите, когато използвате този псевдоклас "навъртане". За да се появи второ подчертано подчертаване, когато задържите курсора на мишката върху връзката:

a {текстова украса: няма; }
a: hover {border-bottom: 1px пунктиран; }