Как убрать подчеркивание ссылки в html: Как убрать подчеркивание у ссылок?
24.07.1970 Разное
text-decoration | htmlbook.ru
Internet Explorer | Chrome | Opera | Safari | Firefox | Android | iOS |
6.0+ | 1.0+ | 4.0+ | 1.0+ | 1.0+ | 1.0+ | 1.0+ |
Краткая информация
Версии CSS
Описание
Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.
Синтаксис
text-decoration: [ blink || line-through || overline || underline ] | none | inherit
Значения
- blink
- Устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3, взамен рекомендуется использовать анимацию.
- line-through
- Создает перечеркнутый текст (пример).
- overline
- Линия проходит над текстом (пример).
- underline
- Устанавливает подчеркнутый текст (пример).
- none
- Отменяет все эффекты, в том числе и подчеркивания у ссылок, которое задано по умолчанию.
- inherit
- Значение наследуется у родителя.
Пример
HTML5CSS2.1IECrOpSaFx
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>text-decoration</title> <style> a { text-decoration: none; /* Убираем подчеркивание у ссылок */ } a:hover { text-decoration: underline; /* Добавляем подчеркивание при наведении курсора мыши на ссылку */ } </style> </head> <body> <p><a href="1.html">Стратегическое нападение</a></p> </body> </html>
Объектная модель
[window.]document.getElementById(«elementID»).style.textDecoration
[window.]document.getElementById(«elementID»).style.textDecorationBlink
[window.]document.getElementById(«elementID»).style.textDecorationLineThrough
[window.]document.getElementById(«elementID»).style.textDecorationNone
[window.]document.getElementById(«elementID»).style.textDecorationOverLine
[window.]document.getElementById(«elementID»).style.textDecorationUnderline
Браузеры
Internet Explorer до версии 7.0 включительно не поддерживает значение inherit. Линия полученная с помощью значения line-through в IE7 располагается выше, чем в других браузерах; в IE8 эта ошибка исправлена.
Как убрать подчеркивание ссылки в HTML
Все ссылки в html по умолчанию подчеркнутые, и отображаются так во всех современных браузерах. Но реалии современного веб дизайна таковы, что нам приходиться убирать подчеркивание у ссылки почти в каждой новой работе.
Например ссылки которые необходимо стилизовать как кнопки в 99% случаев не имеют подчеркиваний, даже в основном тексте ссылки выделят только цветом. И полоска внизу появляется только при ховере. Если вы желаете узнать как сделать анимацию при наведении на ссылку читайте нашу статью на блоге.
Как убрать нижнее подчеркивание у ссылок html?
За нижнее подчеркивание отвечает свойство text-decoration, его можно применять не только к ссылкам, но и другим элементам на странице к примеру h2-h6. Поддерживается всеми браузерами с первой версии. Далее предлагаю взглянуть значения свойства:
- line-through — перечеркивает ссылку
- overline — добавляет верхнее подчеркивание
- underline — добавляет нижнее подчеркивание
- none — убирает подчеркивание
- initial — устанавливает значение по умолчанию
- inherit — наследует это свойство от родительского элемента
Для того чтобы убрать underline (подчеркивание) пишем в css text-decoration : none
. Если мы собираемся применить правило ко всем ссылкам на странице пишем:
a { text-decoration: none; }
Для конкретной ссылки мы можем использовать строчные (inline) стили. Такие стили обычно добавляют javascript скрипты.
<a href='google.com'>Google</a>
А так же явно указать правило ссылке через селектор класса, идентификатора или дочерний селектор.
.link { text-decoration: none; } #link { text-decoration: none; } .some-block a { text-decoration: none; }
После того как вы убрали подчеркивание для состояния по умолчанию, вам необходимо позаботиться о пользователе и показать изменение состояния ссылки при наведении и фокусе, обычно это нижнее подчеркивание и изменение цвета ссылки.
В случае с фокус состоянием также может быть обводка, которая совмещается с подчеркиванием. Ее можно убрать, но я не рекомендую этого делать. И так пример.
.link:hover, .link:focus { text-decoration: underline; color: red; } .link:focus { outline: none; //убираем обводку color: red; } .link:focus { outline-color: brown; //меняем цвет обводки color: red; }
На этом у меня все, я надеюсь у вас не осталось вопросов по работе с свойством text-decoration. До встречи в новых статьях.
Оформление ссылок | WebReference
Хотя для оформления текстовых ссылок традиционно применяется подчёркивание, допустимо использование и других способов изменения вида ссылок. Вот некоторые из них:- ссылки без подчёркивания;
- декоративное подчёркивание;
- выделение фоновым цветом;
- рамки;
- рисунок возле ссылки.
Далее указанные методы оформления ссылок рассматриваются более подробно.
Ссылки без подчёркивания
Подчёркивание текстовых ссылок уже стало определённым стандартом и сигналом о том, что это не просто текст, а именно ссылка. Это, кстати, является одной из причин, по которой не следует применять подчёркивание к обычному тексту, — пользователи будут считать, что имеют дело со ссылкой. Наряду с использованием подчёркивания благодаря CSS у разработчиков сайтов появился и альтернативный вариант — создание ссылок без подчёркивания. При правильном применении такое оформление ссылок даже может придать сайту определённый эффект. Только надо обязательно дать понять пользователю, что является ссылкой, а что обычным текстом, разграничивая их, например, цветом. Ещё можно сделать так что при наведении курсора ссылка становится подчёркнутой, меняет свой цвет или используется и тот, и другой эффект одновременно.
Чтобы убрать подчёркивание у ссылки, следует в стилях для селектора a добавить text-decoration со значение none (пример 1).
Пример 1. Отсутствие подчёркивания у ссылок
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Ссылки</title> <style> a { text-decoration: none; /* Убираем подчёркивание */ } </style> </head> <body> <p><a href=»link.html»>Ссылка без подчёркивания</a> </body> </html>Для псевдоклассов :hover и :visited нет необходимости добавлять text-decoration, они наследуют свойства селектора a.
Подчёркивание ссылок при наведении на них курсора мыши
Чтобы добавить подчёркивание для ссылок, у которых установлено text-decoration: none, следует воспользоваться псевдоклассом :hover. Он определяет стиль ссылки, когда на неё наводится курсор мыши. Остаётся только добавить для псевдокласса свойство text-decoration со значением underline (пример 2).Пример 2. Подчёркивание ссылок
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Ссылки</title> <style> a { text-decoration: none; } a:hover { text-decoration: underline; } </style> </head> <body> <p><a href=»link.html»>Ссылка без подчёркивания</a> </body> </html>Декоративное подчёркивание ссылок
Подчёркивание у ссылок можно задать не просто сплошной линией, а, например, пунктирной. Для этого надо воспользоваться свойством border-bottom, которое создаёт линию внизу элемента. Указав один из аргументов этого свойства dashed, получим пунктирное подчёркивание. В примере 3 показано задание синего пунктира у ссылок красного цвета при наведении на них курсора мыши.
Пример 3. Пунктирное подчёркивание для ссылок
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Ссылки</title> <style> a { color: blue; /* Цвет ссылок */ text-decoration: none; /* Убираем подчёркивание */ } a:hover { border-bottom: 1px dashed blue; /* Добавляем синее пунктирное подчёркивание */ } </style> </head> <body> <p><a href=»link.html»>Ссылка без подчёркивания</a> </body> </html>При использовании приведённого способа пунктирная линия появляется чуть ниже обычного подчёркивания текста. Поэтому к стилю ссылки следует добавить text-decoration со значением none, чтобы одновременно не получилось две линии (рис. 1).
Рис. 1. Использование пунктира для выделения ссылки
Не обязательно использовать пунктир, например, для создания двойной линии следует указать значение, как показано в примере 4.
Пример 4. Двойное подчёркивание ссылок
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Ссылки</title> <style> a { color: blue; text-decoration: none; } a:hover { border-bottom: 4px double red; } </style> </head> <body> <p><a href=»link.html»>Ссылка без подчёркивания</a> </body> </html>Изменяя толщину линии, её тип и цвет, можно получить множество разнообразных эффектов.
Использование фонового цвета
Чтобы добавить к ссылке цветной фон, достаточно воспользоваться свойством background, присвоив ему цвет в любом доступном формате. Аналогично можно использовать псевдокласс :hover, тогда цвет фона под ссылкой будет изменяться при наведении на неё курсора мыши (пример 5).
Пример 5. Фон под ссылкой
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Ссылки</title> <style> a { padding: 2px; /* Поля вокруг текста ссылки */ text-decoration: none; /* Убираем подчёркивание */ } a:hover { background: #f73; /* Цвет фона при наведении на ссылку курсора */ color: yellow; /* Новый цвет текста */ } </style> </head> <body> <p><a href=»link.html»>Ссылка без подчёркивания</a> </body> </html>Фон под ссылкой точно соответствует области текста, поэтому в примере для селектора a добавлено свойство padding, создающее поля вокруг текста (рис. 2).
Рис. 2. Изменение цвета фона при наведении на ссылку курсора
Рамка вокруг ссылки
При использовании рамок со ссылками возможны два варианта. Первый — рамка вокруг ссылок устанавливается заранее и при наведении на неё курсора меняет свой цвет. И второй — рамка отображается, только когда на ссылку наводится курсор.
В примере 6 показано, как изменять цвет рамки, используя свойство border. Подчёркивание текста через text-decoration можно убрать или оставить без изменения.
Пример 6. Изменение цвета рамки у ссылок
<!DOCTYPE html> <html> <head> <meta charset=»utf-8″> <title>Ссылки</title> <style> a { border: 1px solid blue; /* Синяя рамка вокруг ссылок */ padding: 2px; /* Поля вокруг текста */ text-decoration: none; /* Скрываем подчёркивание */ } a:hover { border: 1px solid red; /* Красная рамка при наведении курсора на ссылку */ } </style> </head> <body> <p><a href=»link.html»>Ссылка без подчёркивания</a> </body> </html>Если требуется добавить рамку к ссылкам при наведении на них курсора, то следует позаботиться о том, чтобы текст в этом случае не сдвигался. Достичь этого проще всего добавлением невидимой рамки вокруг ссылки и последующего изменения цвета рамки с помощью псевдокласса :hover. Прозрачный цвет указывается с помощью ключевого слова transparent, в остальном стиль не поменяется.
a {
border: 1px solid transparent; /* Прозрачная рамка вокруг ссылок */
}
a:hover {
border: 1px solid red; /* Красная рамка при наведении курсора на ссылку */
}
Рисунки возле внешних ссылок
Внешней называется такая ссылка, которая указывает на другой сайт. Подобная ссылка никак не отличается от локальных ссылок внутри сайта, определить, куда она ведёт, можно только посмотрев строку состояния браузера. Но в эту строку заглядывают не все и не всегда.=»http://»] { background: url(/example/image/blank.png) 100% 5px no-repeat; /* Рисунок */ padding-right: 18px; /* Отступ справа */ } </style> </head> <body> <p><a href=»1.html»>Обычная ссылка</a></p> <p><a href=»http://htmlbook.ru»>Ссылка на сайт htmlbook.ru</a></p> </body> </html>
Фоновая картинка располагается справа от ссылки, а чтобы текст не накладывался поверх рисунка добавлено поле справа через свойство padding-right. Если потребуется добавить рисунок слева, то 100% заменяем на 0, а padding-right на padding-left.
Протокол может быть не только http, но и ftp и https, для них данный рецепт перестаёт работать. Так что для универсальности лучше изменить селектор на a[href*=»//»], он сообщает что стиль надо применять ко всем ссылкам, в адресе которых встречается //.
Автор и редакторы
Автор: Влад Мержевич
Последнее изменение: 11.03.2020
Редакторы: Влад Мержевич
Как убрать подчеркивание ссылки в HTML и CSS
По умолчанию, браузеры применяют определенные наборы стилей CSS к конкретным HTML-элементам. Для гиперссылок эти стили по умолчанию определяют, что любой текст ссылки отображается синим цветом с CSS underline. Это делается для того, чтобы посетители сайта могли легко определить, что данный текст представляет собой ссылку. Многие веб-дизайнеры не уделяют внимания этим стилям по умолчанию, особенно это касается подчеркивания. К счастью, CSS позволяет легко изменить внешний вид гиперссылок.
Подчеркнутый текст может сложнее читаться, чем обычный. Многие дизайнеры просто не уделяют этому должного внимания. Но можно полностью удалить подчеркивание. Для этого мы будем использовать свойство CSS text-decoration. Вот CSS-код, с помощью которого это можно сделать:
a { text-decoration: none; }
С помощью этой строки кода можно удалить CSS underline style всех ссылок.
Нравится вам подчеркивание или нет, нельзя отрицать того, что оно позволяет указать на связь текста со ссылкой. Если убрать подчеркивание или изменить синий цвет ссылок, то нужно предоставить взамен стили, которые позволяют выделить текст ссылок. Это сделает взаимодействие посетителей с сайтом интуитивным.
Не подчеркивайте текст, который не является ссылкой. Люди привыкли к тому, что подчеркнутый текст (с помощью CSS underline color) является ссылкой. Если вы подчеркиваете контент, чтобы акцентировать на нем внимание (вместо того, чтобы вывести его полужирным шрифтом или курсивом), вы вводите пользователей сайта в заблуждение.
Если хотите сохранить подчёркивание ссылок, но при этом изменить стиль по умолчанию (линия «solid«), это можно сделать следующим образом. Вместо сплошной линии используйте точки. Для этого нужно удалить подчеркивание и заменить его свойством border-bottom:
a { text-decoration: none; border-bottom:1px dotted; }
Так как стандартное CSS text decoration underline мы удалили, будет отображаться только линия из точек:
То же самое можно сделать, чтобы получить пунктирное подчеркивание. Просто измените значение border-bottom на dashed:
a { text-decoration: none; border-bottom:1px dashed; }
Еще один способ обратить внимание пользователей на ссылки — изменить цвет подчеркивания. Н забудьте, что цвет text underline CSS должен соответствовать используемой цветовой схеме:
a { text-decoration: none; border-bottom:1px solid red; }
Хитрость в создании двойного подчеркивания заключается в изменении ширины рамки. Если создать рамку шириной в 1 пиксель, в результате получится два подчеркивания, которые выглядят как одно:
a { text-decoration: none; border-bottom:3px double; }
Также можно использовать подчеркивание по умолчанию, чтобы создать альтернативное двойное подчеркивание. Например, чтобы одна из линий была двойной:
a { border-bottom:1px double; }
Также можно использовать border-bottom для различных состояний ссылок. Использование псевдокласса :hover поможет улучшить опыт взаимодействия пользователей. Чтобы создать второе точечное подчеркивание, выводимое при наведении на ссылку курсора мыши, используйте следующий код и деактивацию CSS text decoration underline:
a { text-decoration: none; } a:hover { border-bottom:1px dotted; }
Пожалуйста, опубликуйте ваши мнения по текущей теме статьи. Мы крайне благодарны вам за ваши комментарии, лайки, отклики, дизлайки, подписки!
Данная публикация является переводом статьи «How to Change Link Underlines on a Webpage» , подготовленная редакцией проекта.
Как удалить подчеркивание из ссылки в HTML?
На своей странице Я поместил несколько ссылок, под которыми мне не нужна ни одна строка, так как же я могу удалить ее с помощью HTML?
htmlПоделиться Источник Paic Ten 01 июня 2012 в 16:15
8 ответов
- Как удалить подчеркивание для ссылки в html
Как убрать подчеркивание из ссылки? Это мой код Я пытаюсь ввести там какой-то код, но все равно не получается @charset utf-8; /* CSS Document */ .top { color:black; font-family:Calibri; text-decoration:none; } table { } <table> <tr> <td><a href=Home.html><p…
- как удалить подчеркивание из метки ссылки в compact framework (windows ce)
Как удалить подчеркивание из метки ссылки в compact framework? Поскольку для label и textbox нет события click, я должен использовать linklabel в качестве его вспомогательного события click. Попробовал это решение, но оно не работает, показывая ошибку Error: Operator ‘! ‘не может быть применен к…
200
Встроенная версия:
<a href="http://yoursite.com/">yoursite</a>
Однако помните, что вы должны , как правило, отделять содержимое вашего веб-сайта (которое составляет HTML) от презентации (которая составляет CSS ).), поэтому вам следует избегать встроенных стилей .
См . Ответ Джона , чтобы увидеть эквивалентный ответ с использованием CSS.
Поделиться patryk.beza 01 июня 2012 в 16:19
58
Это удалит все подчеркивания со всех ссылок:
a {text-decoration: none; }
Если у вас есть конкретные ссылки, к которым вы хотите применить это, дайте им имя класса, например nounderline
, и сделайте это:
a.nounderline {text-decoration: none; }
Это будет применяться только к этим ссылкам и не повлияет на все остальные.
Этот код находится в <head>
вашего документа или в таблице стилей:
<head>
<style type="text/css">
a.nounderline {text-decoration: none; }
</style>
</head>
И в теле:
<a href="#">Link</a>
Поделиться John Conde 01 июня 2012 в 16:16
15
Я предлагаю использовать :наведите курсор, чтобы избежать подчеркивания, если указатель мыши находится над якорем
a:hover {
text-decoration:none;
}
Поделиться Roman 09 февраля 2014 в 13:08
- Невозможно удалить HTML подчеркивание ссылки
Я изо всех сил пытаюсь избавиться от ссылки подчеркивания, которая появляется при наведении курсора мыши на элемент a в HTML. Я добавил атрибут style=text-decoration: none к ссылке a , но когда я навожу курсор мыши на текст, появляется подчеркивание. Я также пробовал использовать этот CSS:…
- Как удалить подчеркивание из ссылки?
Я пытаюсь удалить подчеркивание из ссылок на веб-сайте. Я попытался использовать text-decoration: none;, но это не сработало. Какой синтаксис я сделал неправильно? или есть лучший способ убрать подчеркивание? <head> <style> font { color: #ff9600; text-decoration: none; } </style>…
6
Добавьте это во внешнюю таблицу стилей ( предпочтительно ):
a {text-decoration:none;}
Или добавьте это в
<head>
вашего HTML документа:<style type="text/css"> a {text-decoration:none;} </style>
Или добавьте его к самому элементу
a
( не рекомендуется ):<!-- Add [] --> <a href="http://example.com">Text</a>
Поделиться 0b10011 01 июня 2012 в 16:18
5
В других ответах все упоминают текстовое оформление. Иногда вы используете тему WordPress или чужую CSS, где ссылки подчеркиваются другими методами, так что текстовое оформление: нет не отключит подчеркивание.
Граница и тень-это два других метода, о которых я знаю для подчеркивания ссылок. Чтобы отключить их:
border: none;
и
box-shadow: none;
Поделиться Joe Golton 11 декабря 2015 в 17:27
2
Следующее не является лучшей практикой, но иногда может оказаться полезным
Лучше использовать решение, предоставленное Джоном Конде, но иногда использование внешнего CSS невозможно. Таким образом, вы можете добавить следующее в свой тег HTML:
<a>My Link</a>
Поделиться nebulousGirl 01 июня 2012 в 16:21
1
<style="text-decoration: none">
Приведенного выше кода будет достаточно. Просто вставьте это в ссылку, из которой вы хотите удалить подчеркивание.
Поделиться sd1990 19 ноября 2013 в 09:20
1
Весь вышеупомянутый код не работал для меня. Когда я углубляюсь в проблему, я понимаю, что она не работала, потому что я поместил стиль после href. Когда я поместил стиль перед href, он работал, как и ожидалось.
<a href="http://yoursite.com/">yoursite</a>
Поделиться Ganesh M S 15 мая 2018 в 12:52
Похожие вопросы:
Удалить упрямое подчеркивание из ссылки
Я пытаюсь сделать так, чтобы ссылка отображалась белым цветом, без подчеркивания. Цвет текста правильно отображается как белый, но синее подчеркивание упорно сохраняется. Я попробовал…
Не удается удалить подчеркивание из ссылки
У меня есть простой div в якорном теге, и я пытаюсь удалить синее подчеркивание из ссылки. .removelinkdefault { color: black; text-decoration: none !important; } <a…
Удалить подчеркивание из строки за исключением ссылки в строке
У меня есть текстовый абзац, который может содержать некоторые ссылки url. Мне нужно удалить подчеркивание _ только из этой строки. Но, как я уже сказал, текст имеет url ссылок и url ссылки также…
Как удалить подчеркивание для ссылки в html
Как убрать подчеркивание из ссылки? Это мой код Я пытаюсь ввести там какой-то код, но все равно не получается @charset utf-8; /* CSS Document */ .top { color:black; font-family:Calibri;…
как удалить подчеркивание из метки ссылки в compact framework (windows ce)
Как удалить подчеркивание из метки ссылки в compact framework? Поскольку для label и textbox нет события click, я должен использовать linklabel в качестве его вспомогательного события click….
Невозможно удалить HTML подчеркивание ссылки
Я изо всех сил пытаюсь избавиться от ссылки подчеркивания, которая появляется при наведении курсора мыши на элемент a в HTML. Я добавил атрибут style=text-decoration: none к ссылке a , но когда я…
Как удалить подчеркивание из ссылки?
Я пытаюсь удалить подчеркивание из ссылок на веб-сайте. Я попытался использовать text-decoration: none;, но это не сработало. Какой синтаксис я сделал неправильно? или есть лучший способ убрать…
Удалить подчеркивание из HTML
Я ищу, как удалить подчеркивание из этого бита HTML Я попробовал это сделать, но понятия не имею, где его разместить в этой строке. (Я не являюсь разработчиком) <a…
Как удалить подчеркивание текста ссылки в htm?
Гугл я хочу удалить подчеркивание текста ссылки
Как удалить подчеркивание из ссылок?
Можно ли удалить подчеркивание при отображении ссылки на странице html? <dt class=center>Value <dt class=center><a href=/test>Details</a>
Убрать подчеркивание ссылки в HTML
Вот казалось бы, что сложного убрать подчеркивание ссылки в html, в css, в общем где бы то ни было. Но бывает что стоят такие тривиальные задачи, как, убрать подчеркивание ссылки, но при наведении оно должно быть, либо наоборот, ссылка не подчеркнута, а при наведении подчеркивание пропадает.
И так, самое простое.
Это убрать подчеркивание в css, или же, если вы пишите стили в прямо код html или php, то вам надо следующее (это убирает подчеркивание полностью):
html
css
.ваш id или class{text-decoration: none;}
html
php
mf_id; ?>">Удалить
- это пример ссылки встроенной в код
- образец кода php "?action=delete&main_form_id== $record->mf_id; ?>"
В общем, убирается подчеркивание в php, так же как и в html.
Убрать подчеркивание ссылки при наведении на нее курсора мыши, это все делается в css, т.к. «признак хорошего тона» все настройки визуальные, а отображение ссылок это тоже визуализация, то делать это используя css.
Ссылка изначально подчеркнута
Но вам надо убрать подчеркивание при наведении на нее:
css
.ваш id или class a:hover{text-decoration: none;}
- a:hover этим вы обозначаете какой стиль использовать при наведении курсора на элемент.
А теперь ссылка не подчеркнута
Но вы хотите выделить ее при наведении курсора.
изначально css код ссылки должен быть такой:
html
css
.ваш id или class{text-decoration: none;}
а такой, при наведении курсора на элемент или ссылку, т.е. вы должны использовать тот же a:hover
:
css
.ваш id или class a:hover{text-decoration: underline;}
- a:hover этим вы обозначаете какой стиль использовать при наведении курсора на элемент.
Данный псевдокласс hover
можно использовать при оформлении различных кнопок, например кнопки назад, изображений, пунктов меню и т.п.
Как в CSS убрать подчеркивание ссылки
Здравствуйте, дорогие друзья!
Давайте сегодня решим такую проблему, как стилизация ссылок на страницах вашего сайта, а именно как в CSS убрать подчеркивание ссылки. Данный вопрос в большинстве случаев возникает у начинающих веб-разработчиков и у тех людей, которые не особо разбираются в CSS, но хотят внести некоторые изменения в оформление своего сайта.
Навигация по статье:
Смотря на какой CMS работает ваш сайт, и какую тему вы используете, могут возникнуть различные варианты оформления ссылок, и соответственно могут возникнуть различные варианты, как вы можете убрать подчеркивание ссылки в CSS. Давайте рассмотрим основные из них.
Отключаем подчеркивание
Чтобы в CSS убрать подчеркивание ссылки нам нужно воспользоваться специальным CSS-свойством text-decoration со значением none, которое нужно прописать в файле стилей нашего сайта для ссылки.
Вот как это будет выглядеть на примере для ссылок размещенных в блоке с классом .link-blok:
.link-blok a{ text-decoration:none; }
.link-blok a{ text-decoration:none; } |
Вместо .link-blok вам нужно указать селектор вашего блока (класс или индентификатор) внутри которого находится ссылка для которой нужно убрать подчёркивание.
Для того чтобы узнать название селектор блока, в котором находится ссылка нужно проинспектировать код при помощи встроенных инструментов браузера. Как это сделать вы можете найти в этой статье с видео инструкцией: Как определить ID и класс элемента на странице?Если вам нужно убрать подчёркивание ссылки для всех ссылок на сайте, то в CSS пишем:
a{ text-decoration:none; }
a{ text-decoration:none; } |
Убираем подчеркивание ссылки CSS при наведении
Если же у вас изначально ссылки не имеют подчеркивания, и это подчеркивание появляется при наведении указателя мышки, то вам нужно указывать немного другой селектор, а именно:
.link-blok a:hover{ text-decoration:none; }
.link-blok a:hover{ text-decoration:none; } |
В этом случае мы дописали к селектору псевдокласс hover, который как раз и позволяет задать стили для элемента при наведении указателя.
Используя показанные в данной статье стили, вы сможете с легкостью убрать или добавить подчеркивание для ссылок на вашем сайте. Если у вас возникнут вопросы, вы всегда можете задать их в комментария.
Если статья была для вас полезной делитесь ей в социальных сетях и подписывайтесь на мою рассылку.
Желаю вам успехов в оформлении вашего сайта! До встречи в следующих статьях!
С уважением Юлия Гусарь
Как удалить подчеркивание в гиперссылках, использующих FrontPage 2003
Сводка
В этой статье описывается предпочтительный метод удаления подчеркивания из гиперссылки в FrontPage 2003.
Microsoft предоставляет примеры программирования только для иллюстрации, без явных или подразумеваемых гарантий. Это включает, но не ограничивается, подразумеваемые гарантии товарной пригодности или пригодности для определенной цели. В этой статье предполагается, что вы знакомы с демонстрируемым языком программирования и инструментами, которые используются для создания и отладки процедур.Инженеры службы поддержки Майкрософт могут помочь объяснить функциональность конкретной процедуры, но они не будут изменять эти примеры для предоставления дополнительных функций или построения процедур в соответствии с вашими конкретными требованиями. вернуться к началу
Как удалить подчеркивание в одной гиперссылкеЕсть два способа удалить подчеркивание одной гиперссылки:
вернуться к вершине
Как удалить подчеркивание во всех гиперссылкахВы можете удалить подчеркивание со всех гиперссылок на странице, добавив на страницу раздел <СТИЛЬ>.
Чтобы удалить подчеркивание со всех гиперссылок на странице, выполните следующие действия:
Откройте страницу, которую вы хотите изменить.
Щелкните вкладку Код .
Поместите следующий HTML-код перед тегом
:Щелкните вкладку Design .
Ваши гиперссылки больше не содержат подчеркивания.
вернуться к вершине
CSS-ссылок для стилизации
С помощью CSS ссылки можно стилизовать по-разному.
Текстовая ссылка Текстовая ссылка Кнопка ссылки Кнопка ссылки
Ссылки для стилизации
Ссылки могут быть стилизованы с любым свойством CSS (например, цвет
, font-family
, фон
и др.).
Кроме того, ссылки могут быть стилизованы по-разному в зависимости от того, в каком состоянии они находятся.
Четыре состояния ссылок:
-
a: link
— нормальная непосещаемая ссылка -
a: посещено
— ссылка, которую посетил пользователь -
a: hover
— ссылка, когда пользователь наводит на нее курсор -
a: active
— ссылка в момент нажатия
Пример
/ * непосещенная ссылка * /a: ссылка {
цвет: красный;
}
/ * посетил
ссылка * /
a: посетил {
цвет: зеленый;
}
/ * наведение указателя мыши на ссылку * /
a: hover {
color: hotpink;
}
/ * выбранная ссылка * /
a: активна {
цвет синий;
}
При настройке стиля для нескольких состояний ссылки существуют некоторые правила порядка:
- a: hover ДОЛЖЕН быть после ссылки: и: visit
- a: active ДОЛЖЕН быть после a: hover
Оформление текста
Свойство text-decoration
в основном используется для удаления подчеркивания в ссылках:
Пример
a: ссылка {text-decoration: none;
}
a: посещено {
text-decoration: none;
}
a: hover {
text-decoration: подчеркивание;
}
a: активно {
оформление текста: подчеркивание;
}
Цвет фона
Свойство background-color
можно использовать для указания цвета фона для ссылок:
Пример
a: ссылка {background-color: желтый;
}
a: посещено {
background-color: cyan;
}
a: hover {
background-color: светло-зеленый;
}
a: active {
background-color: hotpink;
}
Кнопки связи
Этот пример демонстрирует более сложный пример, в котором мы объединяем несколько свойств CSS для отображения ссылок в виде блоков / кнопок:
Пример
a: ссылка, a: посетил {background-color: # f44336;
белый цвет;
отступ: 14px 25px;
выравнивание текста: по центру;
текст-оформление: нет;
дисплей: строчно-блочный;
}
a: hover, a: active {
background-color: red;
}
Другие примеры
Пример
В этом примере показано, как добавить другие стили к гиперссылкам:
а.one: link {color: # ff0000;}a.one:visited {color: # 0000ff;}
a.one:hover {color: # ffcc00;}
a.two: link {color: # ff0000;}
a.two: посещено {color:
# 0000ff;}
a.two: hover {font-size: 150%;}
a.three: link {color:
# ff0000;}
a.three: visit {color: # 0000ff;}
a.three: hover {background:
# 66ff66;}
четыре: ссылка {color: # ff0000;}
четыре: посетили {color:
# 0000ff;}
a.four: hover {font-family: monospace;}
a.five: link {color:
# ff0000; text-decoration: none;}
a.пять: посетили {color: # 0000ff;
text-decoration: none;}
a.five: hover {text-decoration: underline;}
Пример
Другой пример создания полей / кнопок ссылок:
a: ссылка, a: посещение {background-color: white;
цвет: черный;
граница: 2 пикселя сплошного зеленого цвета;
отступ: 10 пикселей 20 пикселей;
выравнивание текста: центр;
текст-оформление: нет;
дисплей: строчно-блочный;
}
a: hover, a: active
{
цвет фона: зеленый;
цвет: белый;
}
Пример
Этот пример демонстрирует различные типы курсоров (может быть полезно для ссылок):
auto
crosshair
default
e-resize
help
move
n-resize
ne-resize
nw-resize
указатель
progress
s-resize
se-resize
sw-resize
text
w-resize
подождите
Проверьте себя упражнениями!
css — удалить синее подчеркивание из ссылки
css — удалить синее подчеркивание из ссылки — qaruПрисоединяйтесь к Stack Overflow , чтобы учиться, делиться знаниями и строить свою карьеру.
Спросил
Просмотрено 1,2 млн раз
Я пытаюсь сделать так, чтобы ссылка отображалась белым без подчеркивания.Цвет текста отображается правильно как белый, но синее подчеркивание упорно сохраняется. Я пробовал text-decoration: none; Оформление текста
и : нет! Важно;
в CSS, чтобы удалить подчеркивание ссылки. Ни то, ни другое не сработало.
.boxhead .otherPage {
цвет: #FFFFFF;
текстовое оформление: нет;
}
Как убрать синее подчеркивание ссылки?
мит10.5,377 золотых знаков4444 серебряных знака7272 бронзовых знака
Создан 07 мая ’10 в 18: 292010-05-07 18:29
dmrdmr19.4k3434 золотых знака9191 серебряный знак136136 бронзовых знаков
2 Вы не применяете text-decoration: none;
к якорю (.boxhead a
), но к элементу пролета (. boxhead
).
Попробуйте это:
.boxhead a {
цвет: #FFFFFF;
текстовое оформление: нет;
}
Создан 07 мая ’10 в 18: 502010-05-07 18:50
Давор Лючич26.7k77 золотых знаков6161 серебряный знак7474 бронзовых знака
9Тег привязки (ссылка) также имеет псевдоклассы, такие как посещенный, наведенный, ссылка и активный.Убедитесь, что ваш стиль применяется к рассматриваемому состоянию (ям), и что никакие другие стили не противоречат друг другу.
Например:
a: наведите указатель мыши, a: посетил, a: ссылка, a: активен
{
текстовое оформление: нет;
}
См. W3.org для получения дополнительной информации о псевдоклассах действий пользователя: hover,: active и: focus.
Создан 07 мая ’10 в 18: 352010-05-07 18:35
JYeltonJYelton33k2525 золотых знаков119119 серебряных знаков184184 бронзовых знака
2 text-decoration: none! Important
следует удалить.. Вы уверены, что не прячется border-bottom: 1px solid
? (Проследить вычисленный стиль в Firebug / F12 в IE)
2,7753 золотых знака2525 серебряных знаков3535 бронзовых знаков
Создан 07 мая ’10 в 18: 352010-05-07 18:35
Алекс К.Алекс К.161k2929 золотых знаков248248 серебряных знаков272272 бронзовых знака
1Просто добавьте этот атрибут в свой тег привязки
style = "украшение текста: нет;"
Пример:
Или используйте метод CSS.
.classname a {
цвет: #FFFFFF;
текстовое оформление: нет;
}
Идрис9122 золотых знака99 серебряных знаков2626 бронзовых знаков
Создан 11 дек.
Нагараджан С. Р. Нагараджан С. Р.1,12211 золотых знаков1818 серебряных знаков2929 бронзовых знаков
0Иногда вы видите тень блока, а не подчеркивание текста.
Попробуйте это (используя любые подходящие вам селекторы CSS):
a: hover, a: visit, a: link, a: active {
текст-украшение: нет! важно;
-webkit-box-shadow: нет! важно;
тень коробки: нет! важно;
}
Создан 11 мар.
Jeffmjackjeffmjack44244 серебряных знака1212 бронзовых знаков
2 Вы пропустили text-decoration: none
для тега привязки .Итак, код должен быть следующим.
.boxhead a {
текстовое оформление: нет;
}
Дополнительные стандартные свойства для оформления текста
Создан 19 янв.
Сантош ХалсеСантош Халсе9,53633 золотых знака3232 серебряных знака3535 бронзовых знаков
0Как правило, если ваше «подчеркивание» не того же цвета, что и ваш текст [и ‘color:’ не переопределяется в строке], это не происходит от «text-decoration:» Оно должно быть «border-bottom: «
Не забудьте также снять границу с ваших псевдоклассов!
a, a: link, a: visit, a: active, a: hover {border: 0! Important;}
Этот фрагмент предполагает, что он привязан, соответственно измените его оболочку… и используйте специфичность вместо «! important» после того, как определите основную причину.
Создан 07 мая 2010, 20:30.
1Не видя страницы, строить догадки сложно.
Но мне кажется, что у вас может быть border-bottom: 1px сплошной синий;
применяется.Возможно добавить border: none;
. text-decoration: none! Important
верен, возможно, у вас есть другой стиль, который все еще отменяет этот CSS.
Вот где использование панели инструментов веб-разработчика Firefox — это круто, вы можете отредактировать CSS прямо здесь и посмотреть, работает ли что-то, по крайней мере, для Firefox. Это под CSS> Изменить CSS
.
Создан 07 мая ’10 в 18: 442010-05-07 18:44
искусство31k1616 золотых знаков6666 серебряных знаков118118 бронзовых знаков
0Хотя другие ответы верны, есть простой способ избавиться от подчеркивания на всех надоедливых ссылках:
а {
текстовое оформление: нет;
}
Это удалит подчеркивание КАЖДОЙ ССЫЛКИ на вашей странице!
Создан 30 июн.
Ярз-Техъярц-тек28622 золотых знака66 серебряных знаков1818 бронзовых знаков
1 Если text-decoration: none
или border: 0
не работает, попробуйте применить встроенный стиль в свой html.
Создан 12 июн.
DekeDeke3,84922 золотых знака3535 серебряных знаков5353 бронзовых знака
а {
цвет: неустановленный;
текст-украшение: не установлено;
}
Создан 25 ноя.
Itzharitzhar11.1,977 золотых знаков5050 серебряных знаков5757 бронзовых знаков
Как указывали другие, похоже, что вы не можете переопределить вложенные стили оформления текста … НО вы можете изменить цвет украшения текста.
Как хакер поменял цвет на прозрачный:
цвет-украшения-текста: прозрачный;
Создан 07 апр.
BenBen1,977711 серебряных знаков1919 бронзовых знаков
Просто используйте недвижимость
граница: 0;
, и вы прикрыты.Отлично работал у меня, когда свойство text-decoration вообще не работало.
Создан 22 сен.
Вы использовали text-decoration none в неправильном селекторе. Вам нужно проверить, какой ярлык вам нужен для украшения.
Вы можете использовать этот код
.boxhead h3 a {text-decoration: none;}
ИЛИ
.boxhead a {text-decoration: none! Important;}
ИЛИ
a {text-decoration: none! Important;}
Создан 22 июн.
Ни один из ответов не помог мне.В моем случае стояла стандартная
a: -webkit-any-link {
оформление текста: подчеркивание;
в моем коде. Как правило, независимо от того, какая это ссылка, цвет текста становится синим, а ссылка остается неизменной.
Итак, я добавил код в конце заголовка, например:
a: -webkit-any-link {
текстовое оформление: нет;
}
и проблем больше нет.
Создан 12 июл.
NeoNeo71011 золотой знак88 серебряных знаков2121 бронзовый знак
Вот пример для asp.net webforms Элемент управления LinkButton:
Код позади:
lbmmr1.Attributes.Add ("style", "text-decoration: none;")
Создан 08 мар.
Джош Ятс, 1980, Джош Йейтс, 19803,19922 золотых знака3333 серебряных знака5353 бронзовых знака
Поместите следующий HTML-код перед
тег:
Создан 26 июн.
qarly_blueqarly_blue187 серебряных знаков55 бронзовых знаков
В моем случае у меня был плохо сформированный HTML.Ссылка находилась в теге
, а не в теге
.
Создан 10 июл.
mwilcoxmwilcox3,7372121 11 серебряный знак2020 бронзовых знаков
набор текстовых украшений: нет; для якорного тега.
Пример HTML.
<тело>
Пример CSS:
.nav-tabs li a {
текстовое оформление: нет;
}
Создан 04 июля ’20 в 18: 032020-07-04 18:03
Лорд Лорд3,26922 золотых знака1414 серебряных знаков1818 бронзовых знаков
Очень активный вопрос .Заработайте 10 репутации (не считая бонуса ассоциации), чтобы ответить на этот вопрос. Требование репутации помогает защитить этот вопрос от спама и отсутствия ответов.по умолчанию
Stack Overflow лучше всего работает с включенным JavaScriptВаша конфиденциальность
Нажимая «Принять все файлы cookie», вы соглашаетесь, что Stack Exchange может хранить файлы cookie на вашем устройстве и раскрывать информацию в соответствии с нашей Политикой в отношении файлов cookie.
Принимать все файлы cookie Настроить параметры
Как изменить подчеркивание HTML-ссылки на веб-странице
Что нужно знать
- Удалите подчеркивание в текстовых ссылках с помощью свойства CSS text-decoration, набрав a {text-decoration: none; } .
- Измените подчеркивание на точки с помощью свойства стиля border-bottom a {text-decoration: none; нижняя граница: 1px с точками; } .
- Измените цвет подчеркивания, набрав a {text-decoration: none; нижняя граница: сплошной красный 1px; } . Замените сплошной красный цвет на другой цвет.
В этой статье объясняется несколько способов использования CSS для изменения внешнего вида текстовых ссылок на вашей веб-странице по умолчанию, удалив подчеркивание, изменив его на пунктирную линию или изменив его цвет.Дополнительная информация включена для замены подчеркивания пунктирной линией или двойным подчеркиванием.
Как удалить подчеркивание в текстовых ссылках
По умолчанию в веб-браузерах есть определенные стили CSS, которые они применяют к определенным элементам HTML. Если вы не перезаписываете эти значения по умолчанию собственными таблицами стилей вашего сайта, то применяются значения по умолчанию. Для гиперссылок стиль отображения по умолчанию заключается в том, что любой связанный текст выделяется синим цветом и подчеркивается. При желании вы можете изменить внешний вид этих подчеркиваний или полностью удалить их со своей веб-страницы.
Чтобы удалить подчеркивание из текстовых ссылок, используйте свойство CSS text-decoration. Вот CSS, который вы пишете для этого:
а {текст-украшение: нет; }class = «ql-syntax»>
С помощью этой единственной строки CSS вы удаляете подчеркивание со всех текстовых ссылок на своей веб-странице. Несмотря на то, что это очень общий стиль (в нем используется селектор элементов), он все же имеет большую специфичность, чем стили браузеров по умолчанию. Поскольку именно эти стили по умолчанию создают подчеркивание с самого начала, это то, что вам нужно перезаписать.
Предупреждение об удалении подчеркивания
Визуально удаление подчеркивания может быть именно тем, чего вы хотите добиться, но вы также должны быть осторожны, когда делаете это. Нравится вам внешний вид подчеркнутых ссылок или нет, вы не можете утверждать, что они делают очевидным, какой текст связан, а какой нет. Если вы уберете подчеркивание или измените синий цвет ссылки по умолчанию, убедитесь, что вы заменили их стилями, которые по-прежнему позволяют выделять связанный текст.Это сделает работу посетителей вашего сайта более интуитивно понятной.
Не подчеркивать не-ссылки
Еще одно предостережение относительно ссылок и подчеркиваний: не подчеркивайте текст, который не является ссылкой, чтобы подчеркнуть его. Люди привыкли ожидать, что подчеркнутый текст будет ссылкой, поэтому, если вы подчеркиваете контент, чтобы добавить акцента (вместо того, чтобы делать его жирным или курсивом), вы отправляете неправильное сообщение и запутаете пользователей сайта.
Как изменить подчеркивание на точки или тире
Если вы хотите, чтобы ваша текстовая ссылка была подчеркнута, но изменила стиль подчеркивания по умолчанию, который является «сплошной» линией, вы тоже можете это сделать.Вместо этой сплошной линии вы можете использовать точки, чтобы подчеркивать ссылки. Для этого вы все равно удалите подчеркивание, но замените его свойством стиля border-bottom:
а {текст-украшение: нет; нижняя граница: 1px с точками; }
Поскольку вы удалили стандартное подчеркивание, появляется только пунктирная линия.
Вы можете сделать то же самое, чтобы получить тире. Просто измените стиль нижней границы на пунктирную:
а {текст-украшение: нет; нижняя граница: пунктирная линия 1px; }
Как изменить цвет подчеркивания
Еще один способ привлечь внимание к своим ссылкам — изменить цвет подчеркивания.Просто убедитесь, что цвет соответствует вашей цветовой гамме.
а {текст-украшение: нет; нижняя граница: сплошной красный 1px; }
Двойное подчеркивание
Уловка использования двойных подчеркиваний заключается в том, что вам нужно изменить ширину границы. Если вы создадите границу шириной 1 пиксель, вы получите двойное подчеркивание, которое выглядит как одинарное подчеркивание.
а {текст-украшение: нет; нижняя граница: 3px двойной; }
Вы также можете использовать существующее подчеркивание, чтобы сделать двойное подчеркивание с другими функциями, такими как одна из пунктирных линий:
{border-bottom: 1px двойной; }
Не забывайте о состояниях связи
Вы можете добавить стиль нижней границы к своим ссылкам в разных состояниях, таких как: hover,: active или: посещено.Это может создать для посетителей приятный стиль «наведения», когда вы используете псевдокласс «hover». Чтобы при наведении курсора на ссылку появлялась вторая пунктирная линия подчеркивания:
а {текст-украшение: нет; }
a: hover {border-bottom: 1px с точками; }
Как создать ссылку без подчеркивания в HTML
Обновлено: 30 декабря 2019 г., компания Computer Hope
Используя CSS, вы можете изменить стиль ваших HTML-ссылок, чтобы они не имели подчеркивания, используя любую из следующих рекомендаций.
ПримечаниеНе создавайте невидимые для людей ссылки с намерением, чтобы по ним продолжали переходить поисковые системы, которые сканируют ваш сайт. Современные поисковые системы обнаруживают это действие и считают его обманом. Если они обнаружат на вашем сайте невидимые для человека ссылки, поисковые системы могут понизить ваш рейтинг в результатах поиска или полностью исключить ваш сайт из списка.
ПримечаниеБольшинство пользователей, просматривающих Интернет, понимают концепцию подчеркивания ссылок и могут не ожидать, что это изменится.Эти пользователи могут предположить, что любой текст, не подчеркнутый, не является ссылкой. По этой причине, если вы удалите подчеркивание, обязательно измените цвет ссылки, чтобы он четко выделялся для пользователя.
Сделать все ссылки не подчеркнутыми
Чтобы все ссылки на вашей веб-странице не имели подчеркивания, настройте стиль text-decoration для элемента a (anchor). Например, вы можете добавить следующий код CSS между тегами
HTML-кода вашей веб-страницы.Здесь элемент ...Приведенный выше код сообщает браузеру, что в каких-либо тегах (ссылках) не должно быть подчеркивания (оформления текста).
ПодсказкаДобавление этого кода в файл CSS вместо раздела заголовка HTML заставляет все веб-страницы, использующие файл CSS, устанавливать ссылки без подчеркивания.
Сделать отдельную ссылку без подчеркивания
Если вы хотите, чтобы на вашей веб-странице не подчеркивалась только одна ссылка, вы можете создать ссылку, подобную приведенному ниже коду. Вы можете сделать это в любом месте тега
, чтобы ссылка не имела подчеркивания.Определение свойства стиля таким образом называется встроенным стилем.Стиль указывается «встроенным» в самом элементе в теле страницы.
Неподчеркнутая ссылка на вашей веб-странице выглядит следующим образом:
Компьютерная надежда.
Как удалить подчеркивание из ссылок в CSS
В веб-дизайне важна каждая деталь, включая ваши ссылки.
Как и любой другой элемент, ссылки можно стилизовать с помощью свойств CSS. С помощью CSS вы можете изменить их цвет, фон и размер шрифта. Вы даже можете удалить подчеркивание, которое появляется под ссылками.
То, как вы пишете этот CSS, зависит от того, в каком состоянии находятся ссылки. Эти состояния, также известные как псевдоклассы, представляют собой классы CSS, основанные на активности пользователя. Ниже определены четыре псевдокласса.
a: ссылка - когда пользователь не посещал, не зависал или не нажимал на ссылку
a: посетил - после того, как пользователь перешел по ссылке
a: hover - когда пользователь наводит указатель мыши на ссылку
a: активный - когда пользователь переходит по ссылке
По умолчанию подчеркивание будет отображаться под ссылками в каждом псевдосостоянии: при наведении курсора, нажатии, посещении или при любом из вышеперечисленных.Это показано в демонстрации ниже:
Чтобы удалить подчеркивание из ссылок, вы можете использовать свойство text-decoration CSS. Ниже мы рассмотрим, как определить это свойство, чтобы полностью удалить подчеркивание со ссылок на вашем HTML-сайте или сайте Bootstrap.
Как удалить подчеркивание из ссылок в CSS
- Добавьте HTML-код в раздел своей веб-страницы.
- Определите четыре псевдокласса ссылок с помощью свойства text-decoration в разделе.
- Убедитесь, что ссылки: и: посещены предшествуют: hover, а: active идут последними. Это важно для каскадирования таблицы стилей.
- Установите для каждого свойства значение «нет».
Процесс удаления подчеркивания действительно настолько прост. Давайте взглянем на код целиком, а затем посмотрим, как он выглядит во внешнем интерфейсе.
Вот код CSS:
a: ссылка {украшение текста: нет; }
a: посетил {text-decoration: none; }
a: hover {украшение текста: нет; }
a: активный {text-decoration: none; }
Здесь важен порядок - сначала должны идти a: link и a: visit , затем a: hover , затем a: active .
Вот HTML:
Это ссылка , которая появляется внутри абзаца.
Вот результат:
См. Перо «Удаление подчеркивания из ссылки с помощью CSS 1» Кристины Перриконе (@hubspot) на CodePen.
Также можно переключить подчеркивание, чтобы оно отображалось только при наведении курсора и нажатии.Сделайте это с помощью правила text-decoration: underline; вот так:
См. Перо «Удаление подчеркивания из ссылки с помощью CSS 2» Кристины Перриконе (@hubspot) на CodePen.
Как удалить подчеркивание из ссылок в CSS в Bootstrap
Процесс удаления подчеркивания из ссылок немного отличается, если вы используете в своем проекте Bootstrap CSS. Давайте кратко обсудим процесс для сайтов Bootstrap.
По умолчанию в Bootstrap ссылки показывают подчеркивание, только когда они находятся в состоянии hover или active .Это означает, что когда посетитель наводит курсор на ссылку или нажимает на нее, он будет отображать подчеркивание. В противном случае подчеркивание не будет отображаться в ссылках, даже если они были посещены. Кроме того, ссылки, определенные классом кнопки Bootstrap, никогда не имеют подчеркивания.
Чтобы удалить подчеркивание в ссылках, независимо от их состояния, вам необходимо добавить CSS.
Вот код CSS:
a: hover {украшение текста: нет; }
a: активный {text-decoration: none; }
Вот HTML:
Это ссылка , которая отображается внутри абзаца. Ниже приведена ссылка, определенная классом кнопки Bootstrap.
Вот результат:
См. Перо Удаление подчеркивания из ссылки с помощью CSS - Bootstrap от Кристины Перриконе (@hubspot) на CodePen.
Стилизация ссылок с помощью CSS
Удаление подчеркивания в ссылках - один из самых распространенных вопросов начинающих программистов.Хорошая новость заключается в том, что этот процесс прост благодаря свойству text-decoratio n. Для этого вам просто нужно немного знать HTML и CSS.
Примечание редактора: этот пост был первоначально опубликован в июле 2020 года и был обновлен для полноты.
Как удалить подчеркивание для тега привязки с помощью CSS?
Тег привязки используется для определения гиперссылок и по умолчанию отображает подчеркнутую часть привязки. Подчеркивание можно легко удалить с помощью свойства text-decoration.Свойство CSS text-decoration позволяет украсить текст в соответствии с требованиями. Установив для text-decoration значение none, чтобы удалить подчеркивание из тега привязки.
Синтаксис:
оформление текста: нет;
Пример 1: В этом примере для свойства text-decoration устанавливается значение none.
0418 титул > |
Выход :
Пример 2: Используйте свойство hover для удаления подчеркивания при наведении курсора мыши на часть привязки.
0418 титул > |
Вывод:
До перемещения мыши:
После перемещения мыши:
.
Leave a Comment