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

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


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

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

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


a {text-decoration: none; } Тази малка линия премахва всички елементи, написани с етикет "а" изцяло в сайта. Но какво, ако нямате достъп до CSS файла? В този случай е целесъобразно да се използва етикетът Style в началото на документа. Работи по същия начин като CSS файла. За да приложите стилове, е необходимо в самото начало на документа (или HTML страницата) да добавите дизайн, който има обичайните правила на CSS стилове. Тези стилове се отнасят само за определена страница. Те няма да работят в други раздели или документи на сайта.

Изтриване на подчертаващите връзки при зависване

Но какво, ако трябва да премахнете подчертаването на връзката, когато се движите? CSS може да ни помогне в този случай. Кодът ще изглежда така: a: hover {text-decoration: none; } Псевдокласът ": hover" е отговорен за декорирането на елементите при задържане на курсора. Чрез комбиниране на тези две опции, можем да направим подчертаването на връзката да се появява само при зависване, в противен случай всичко ще изглежда като обикновен текст: a {text-decoration: none; } a: hover {text-decoration: underline; }

Прилагане на идентификатори и класове

Както може да се види от горното, лесно е да се промени стилизацията на даден елемент на сайт или html документ. Недостатъците на такива варианти са невъзможността за селективно прилагане на стилове: не на целия сайт илидокумент, но към конкретна връзка.
Има няколко възможности за решаване на този проблем. Можете да премахнете подчертаванията на връзките по неактивен начин. Въпреки че категорично не се препоръчва да се прави по отношение на оптимизиране на сайта. За да направите това, трябва да посочите опцията Стил директно в маркера за връзка: Втората опция е по-приемлива. Въведете елемент в допълнителен клас или идентификатор и вече тези селектори присвояваме стила, от който се нуждаем: След това всичко се прави на навитото. В CSS файла можем да премахнем долната черта на връзките, като приложим стила, който ни е известен за класа или идентификатора, в зависимост от вашия избор. Класът се пише с точка пред името: .none_decoration {text-decoration: none; } Идентификаторът е маркиран със знак #: #none_decoration {text-decoration: none; } Това правило се прилага както към CSS файла, така и към стиловия етикет

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

Освен възможността за премахване на долната черта на връзката, CSS ви позволява да приложите други видове стайлинг. Често уеб дизайнерите или графичните дизайнери използват цвета на основния текст, за да различат референтния текст. Направете го съвсем просто: и {color: * посочете желания цвят във всеки формат (* червен, # c2c2c2 rgb (1323365) *) *; } Подобна стилизация се използва съгласно същите правила, както е описано за отмяна на връзката. Правилата за CSS са идентични в този случай. Промяната на цвета на връзката и отмяната на долната черта може да се приложи като отделна стилизация (след това връзката ще остане подчертана, но ще промени цвета от стандартното синьо наза вас).

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

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

Ако имате нужда от плътна линия, задайте стойността solid.

За вълнообразна линия с вълнообразна форма.

Двойната линия е съответно двойна.

Линията може да бъде заменена с пунктирана последователност от точки.

Подчертайте думата под формата на инсулт - прекъсната

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

Стандарт (подчертайте по-долу) - подчертайте.

Препишете думата (фразата) - чрез.

Линията е над - линия.

Известни ни никой - без стил.

И цвят (да не се бърка с цвета на текста!): Текст-декорация-линия: (всеки цвят във всеки формат * червен, # c2c2c2 rgb (1323365) *). За удобство, всички три позиции могат да бъдат написани заедно в дизайна: text-decoration: червено, line-through, вълнообразно.