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

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

Създаване на връзка

За да демонстрирате работата на този метод, трябва да създадете връзка. Това ще помогне със стандартен HTML 5. За да създадете връзка, трябва да използвате маркер "a", който не е блок. Следователно, за да поставите връзки на отделни редове, трябва да ги поставите в маркери на параграф (p). Алтернативно можете да използвате свойството display: block за всяка връзка.


Започваме да създаваме връзка. Напишете няколко маркера в нашия HTML документ. Между началните и затварящите маркери пишем името за нашата връзка, която ще бъде показана на страницата. В допълнение, етикетът "а" има редица атрибути. Изисква се атрибутът href, без който референцията няма да бъде изпълнена. Той указва пътя до страницата или файла, към който ще се обработва нашата връзка. В горния пример няма да има преход от други връзки, така че можете да укажете стойност по подразбиране на #. Връзката е създадена, сега трябва да я стилизирате. Има няколконачини за премахване на подчертаване на връзката в CSS:
  • стил атрибут (намиращ се вътре в маркера).
  • Етикет със стил (разположен в заглавния блок).
  • Външна връзка на стилове с помощта на маркер за връзка.
  • Можете да използвате някой от тези методи, за да отмените позоваването в CSS, но най-доброто е свързването на външни стилове.

    Съвет: Когато създавате уеб страница, дайте предпочитание на външни връзки.

    Оформяне на връзка в CSS

    В примера по-горе ще се използва външна връзка за връзка. Отворете CSS файл, в който ще променим дизайна на връзките. В допълнение към връзките на тази страница няма нищо. Затова ще използваме маркера като селектор като "a". Ако желаете, можете да добавите класове за всяка връзка, но това не е задължително. Записваме селектора "а", който ще напише собствеността текст-декорация: няма; Едно просто свойство на text-decoration се използва за премахване на подчертаването на връзката чрез CSS. Текст-декорация съдържа редица други стойности. Той също така ви позволява да направите горен удар, но той рядко се използва. За да премахнете долната черта на връзката, въведете следния код за CSS документа:
    За да се опрости кода, можете да използвате простия стил на атрибута. В примера пълният дизайн на цялата страница не е представен, така че можете да използвате този метод. Основното нещо - не боя по такива начини цялата HTML страница. В такъв код лесно можете да се объркате.

    Промяна на цитираната връзка в CSS

    Да предположим, че искате да направите това, така че в нормалното състояние на връзката да е запазена долната черта, и когато hover изчезна. За да премахнете или подчертаете хипервръзката при задържане, CSS използва псевдокласата ": hover". Ето един пример:
    Стиловете могат да се прилагат не само към дадена връзка, но и към активираната или посетената. За да направите това, използвайте псевдокласовете ": active" и ": visited".

    Свързани публикации