Как да премахнем подчертаването на връзките? CSS свойство за декориране на текст
Връзките са неразделна част от всяка уеб страница. Те могат да бъдат както текстови, така и под формата на бутони. Тази статия ще включва само текстови връзки.
Не е тайна, че в HTML всички елементи не изглеждат много спретнати, а дизайнът, честно казано, е лош.
Най-важната част от "връзката", която пречи на създаването на връзки, е подчертанието. Сега ще разберем как да премахнем подчертаващите връзки в CSS.
Създаване на връзка
За да демонстрирате действието на този метод, трябва да създадете връзка. Това ще помогне на стандартния HTML 5.
За да създадете връзка, трябва да използвате маркер за двойка "а", който не е блок. Следователно, за да се поставят линкове на отделни редове, е необходимо да ги заградите в тагове на абзаци (p). Алтернативно можете да използвате свойството display: block за всяка връзка.
Започнете да създавате връзки. Въвеждаме няколко маркера в нашия HTML документ. Между началните и затварящите маркери пишем името на нашата връзка, която ще бъде показана на нашата страница.
В допълнение, етикетът “а” има редица атрибути. Атрибутът href е задължителен, без който връзката няма да се спазва. Той указва пътя до страницата или файла, към който ще води нашата връзка.
В представения пример няма да се използват други връзки, затова можете да зададете стандартна стойност #.
Връзката е създадена, сега трябва да бъде стилизирана. Има няколко начина за премахване на подчертаните връзки в CSS:
- Атрибутът на стила (разположен вътре в маркера).
- Етикет със стил (разположен в главата).
- Стилове за външна връзка, използващи маркера за връзка.
За да отмените подчертаването на връзка в CSS, можете да използвате всеки един от тези методи, но свързването на външни стилове се счита за най-подходящо.
Съвет: когато създавате уеб страница, предпочитайте външни връзки.
Стайлинг връзки в CSS
В представения пример ще се използва външно свързване. Отворете CSS файла, в който ще променим дизайна на връзките.
В допълнение към линковете на тази страница няма нищо. Затова ще използваме маркера „а” като селектор. Ако предпочитате, можете да добавяте класове за всяка връзка, но това не е задължително.
Напишете селектора "а", в който ще бъде записано свойството за декориране на текст: няма;
Едно просто свойство за декориране на текст се използва за премахване на подчертаването чрез използване на CSS.
Текст-декорация съдържа редица други стойности. С него можете да направите горното подчертаване, но то рядко се използва.
За да премахнете подчертаването на връзката, в CSS документа въведете следния код:
За да се опрости кода, можете да използвате прост стил атрибут. В примера пълната страница не е представена в пълноценния дизайн, така че можете да използвате този метод.
Основното нещо е да не се рисува цялата HTML страница по такъв начин. В този код можете много лесно да се объркате.
Промяна на индуцираната връзка в CSS
Да предположим, че искате да оставите връзките в нормалното състояние на долната черта и да изчезнат, когато задържите. За да премахнете или зададете подчертаване за връзка при задържане, CSS използва псевдо-клас ": hover". Ето един пример:
Стиловете могат да се приложат не само към индуцираната връзка, но и към активираните или посетените. За да направите това, използвайте псевдокласите ": active" и ": visited".