Как убрать выделение ссылки в css
Перейти к содержимому

Как убрать выделение ссылки в css

  • автор:

Как убрать подчеркивание у ссылок?

Используйте свойство text-decoration со значением none для селектора A .

Описание

По умолчанию ссылки всегда подчёркиваются, чтобы легко можно было отличить ссылку от рядового текста. Но в некоторых случаях подчеркивание допустимо убрать, когда очевидна разница между ссылкой и текстом.

Чтобы ссылки не подчер кивались, для селектора A следует добавить свойство text-decoration со значением none , как показано в примере 1.

Пример 1. Ссылка без подчеркивания

HTML5 CSS 2.1 IE Cr Op Sa Fx

    Ссылки без подчеркивания   

Ссылка без подчеркивания

Результат данного примера показан ни рис. 1.

Ссылка, у которой отсутствует подчёркивание

Рис. 1. Ссылка, у которой отсутствует подчёркивание

HTML по теме

CSS по теме

Не выкладывайте свой код напрямую в комментариях, он отображается некорректно. Воспользуйтесь сервисом cssdeck.com или jsfiddle.net, сохраните код и в комментариях дайте на него ссылку. Так и результат сразу увидят.

Популярные рецепты

  • Как добавить картинку на веб-страницу?
  • Как добавить иконку сайта в адресную строку браузера?
  • Как добавить фоновый рисунок на веб-страницу?
  • Как сделать обтекание картинки текстом?
  • Как растянуть фон на всю ширину окна?
  • Как выровнять фотографию по центру веб-страницы?
  • Как разместить элементы списка горизонтально?
  • Как убрать подчеркивание у ссылок?
  • Как убрать маркеры в маркированном списке?
  • Как изменить расстояние между строками текста?
  • Как сделать, чтобы картинка менялась при наведении на нее курсора мыши?
  • Как открыть ссылку в новом окне?

Убираем подчеркивание у ссылки с помощью CSS

Средствами непосредственно HTML убрать нижнее подчеркивание у ссылки невозможно. Поэтому для этого используют свойства CSS.

Подчеркивание (также как и выделение текста с помощью надчеркивания и перечеркивания) определяется с помощью свойства text-decoration . Чтобы убрать линию снизу, нужно установить его в значение none .

На примере ниже у ссылки с классом noline удалено подчеркивание.

a.noline

Ниже этот же пример в Codepen, где наглядно видно, как это работает. У ссылки (тег A ) с классом noline линии снизу нет.

Как убрать синий цвет у ссылки

Чтобы убрать у ссылки синий цвет (или подсветку любого другого цвета), надо установить у нее свойства color в значение inherit (использовать свойство родительского элемента), тогда она скорее всего станет такого же цвета, как и обычный текст.

Если это не помогает, то можно таким же образом задать цвет напрямую.

Как убрать подсвечивание ссылки при наведении

Это делается при помощи псевдокласса :hover, срабатывающего при наведении на элемент. Инструкция будет выглядеть так:

Как убрать выделение ссылки в html

По умолчанию ссылки всегда подчёркиваются, чтобы легко можно было отличить ссылку от рядового текста. Но иногда для стилизации текста их необходимо убрать. Для работы со ссылками правильно использовать псевдоклассы . В примере ниже, нижнее подчеркивание у ссылок убрано, но при наведении курсора — будет появляться.

 href="#" alt="http://ru.hexlet.io">Перейти по ссылке 
a:link, a:visited  text-decoration: none; > a:hover, a:active text-decoration: underline; > 

Как с помощью html и css можно изменить цвет ссылки и убрать подчеркивание

Здравствуйте уважаемые читатели. Сегодня мы поговорим как с помощью html и css изменить ссылку на Вашем сайте: поменять цвет, добавить или убрать подчеркивание.

Как изменить цвет ссылки с помощью HTML.

Как вы помните, ссылка вставляется следующим образом:

По умолчанию ссылка синего цвета с подчеркиванием. Попробуем c помощью html изменить цвет ссылки. Для этого добавляем в код следующий текст:

Как видим, ссылка поменяла свой цвет. Какой цвет теперь будет у ссылки, зависит от #FF0000. Это специальный цветовой код html, который присваивается каждому цвету всей цветовой палитры. Для того, чтобы определить какой код имеет тот или иной цвет ,советую прочитать статью палитра цвета html.

Как убрать подчеркивание.

Для того, чтобы убрать подчеркивание, необходимо в кодировку html ссылки добавить:

Как видите, подчеркивание исчезло.

Как изменить цвет ссылки с помощью CSS.

Вышеописанный метод, несмотря на всю свою простоту, используется крайне редко. Как правило, для оформления веб-страницы используется таблица ститей style.css в которой прописывается оформление всех элементов страницы, в том числе, и ссылок.

Для того, чтобы изменить цвет всех ссылок в тексте, а также убрать подчеркивания достаточно прописать в файле css следующий код:

Ну вот и все. Не забывайте оценивать статью и ставить лайки. Ну и, разумеется, комментируйте.

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *