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

Оформлението на всеки информативен текст предполага включването на смислени хипервръзки или котви. Тези елементи се добавят чрез маркера "a" (котва). По подразбиране модерните браузъри показват подобен елемент с по-ниско подчертание. Често уеб дизайнерите или уеб дизайнерите предпочитат или да променят този стил, или да го изтрият напълно.

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

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

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

За човек, който е добре запознат с уеб дизайна, и по-специално в CSS, премахването на долната част на връзките няма да бъде много трудно. За да направите това, просто трябва да намерите и отворите файл в файловете на сайта, които отговарят за дизайна на стила. Обикновено то се намира в основната директория и има разширение .css. Премахването на долни връзки може да се направи с прост код:

a {

текстова декорация: няма;

}

Тази малка линия ще премахне целия сайт, подчертавайки всички елементи, които са регистрирани с маркера "a".

Ами ако нямате достъп до CSS файл?

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

Тези стилове се отнасят само за конкретна страница. В други секции или документи на сайта те няма да действат.

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

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

a: задържи {

текстова декорация: няма;

}

Това е псевдокласът "hover", който е отговорен за декорирането на елементите, когато се движите над курсора.

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

и {

текстова декорация: няма;

}

a: задържи {

текст-украса: подчертаване;

}

Използване на идентификатори и класове

Както можете да видите от горепосоченото, промяната на стила на елемент в сайт или HTML документ е доста лесна. Недостатъците на такива опции са невъзможността за селективно прилагане на стилове: не към целия сайт или документ, а към конкретна връзка.

Има няколко решения на този проблем.

Можете да премахнете редовете за подчертаване. Въпреки че това не е строго препоръчително да се направи по отношение на оптимизиране на сайта.

За да направите това, трябва да посочите параметъра Стил директно в референтния маркер:

Вторият вариант е по-приемлив.

Въвеждаме в елемента допълнителен клас или id и приписваме тези стилове на вече избраните селектори:

След това всички се търкалят. В CSS файла можем да премахнем подчертаването на връзките, като приложим познатия стил в класа или идентификатора, в зависимост от избора ви.

Класът е регистриран с точка преди името му:

.none_ декорация {

текстова декорация: няма;

}

Идентификаторът е обозначен с #:

#none_ decoration {

текстова декорация: няма;

}

Това правило важи както за CSS файла, така и за маркера Style

Променете стил на показване на връзката в текста

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

За да направите това е доста просто:

и {

цвят: * задайте желания цвят във всеки формат (* червен, # c2c2c2, rgb (132, 33, 65) *) *;

}

Тази стилизация се прилага по същите правила, както е описано за отменяне на връзката. Правилата за CSS са идентични в този случай. Променете цвета на връзката и отменете връщането може да се приложи като отделен стил (тогава връзката ще остане подчертана, но ще промени цвета от стандартното синьо до това, от което се нуждаете).

Подмяна на стандартен стил

Друга забележка в края на краищата. Вместо да отмените долната част на връзката CSS, тя дава възможност за замяна на стандартните проектни стойности. За да направите това, заменете следните стойности в дизайна на текста:

текст-украса в стил:

• Ако имате нужда от солидна линия, укажете стойността на твърдия.
• За вълнообразни линии - вълнисти.
• Двойна линия - съответно двойна.
• Линията може да бъде заменена от последователност от точки - пунктирана.
• Подчертайте думата като пунктирана линия - прекъсната

Също така можете да промените позицията на линията по отношение на текста:

Дизайнът на линия-текст-декорация-линия може да има стойности:

• Стандарт (подчертава се отдолу) - подчертава се.
• Прекоси думата - през нея.
• Линията е отгоре - над линията.
• Ние не знаем никой - без стил.

И цвят (да не се бърка с цвета на текста!):

текст-декорация-линия: (всеки цвят във всеки формат *червено, # c2c2c2, rgb (132, 33, 65) *).

За удобство и трите позиции могат да бъдат написани заедно в дизайна:

текстова декорация: червена, линейна, вълнообразна.