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

Пример 2: Удаление подчёркивания ссылок

Обычный вопрос — как удалить подчёркивание ссылок?

Вы должны точно определить, нужно ли убрать подчёркивание ссылок, так как это может значительно снизить использование вашего web-сайта. Люди привыкли видеть на web-страницах синие подчёркнутые ссылки и знают, что по ним нужно щёлкать. Даже моя мама знает это! Если вы уберёте подчёркивание и измените цвет ссылок, весьма вероятно, что это смутит пользователей и они не получат доступа ко всему содержимому вашего сайта web-сайт.

Вообще-то удалить подчёркивание ссылок очень просто. Как вы, может быть, помните из Урока 5, свойство text-decoration можно использовать для определения подчёркивания текста. Для удаления подчёркивания просто установите в text-decoration значение none.

a {

text-decoration:none;

}

Альтернативно можно также установить text-decoration, наряду с другими свойствами, для всех четырёх псевдоклассов.

a:link {

color: blue;

text-decoration:none;

}

a:visited {

color: purple;

text-decoration:none;

}

a:active {

background-color: yellow;

text-decoration:none;

}

a:hover {

color:red;

text-decoration:none;

}

  • Показать пример

Резюме

В этом уроке вы узнали о том, что такое псевдоклассы, используя некоторые свойства из предыдущих уроков. Это должно показать вам, какие возможности заложены в CSS.

В следующем уроке мы научим вас определять свойства конкретных элементов и групп элементов.

Урок 7: Идентификация и группирование элементов (class и id)

Иногда вам нужно будет применить особый стиль к определённому элементу или конкретной группе элементов. В этом уроке мы подробно разберём, как можно использовать class и id для специфицирования свойств выбранных элементов.

Как изменить цвет конкретного заголовка отдельно от других заголовков на вашем web-сайте? Как группировать ссылки по категориям и задавать для каждой категории особый стиль? Это лишь примерные вопросы, на которые мы ответим в этом уроке.

Группирование элементов с помощью class

Предположим, у нас есть два списка ссылок сортов винограда — для белого и для красного вина. HTML-код может быть таким:

<p>Виноград для белого вина:</p>

<ul>

<li><a href=»ri.htm»>Рислинг</a></li>

<li><a href=»ch. htm»>Шардонэ</a></li>

<li><a href=»pb.htm»>Пино Блан</a></li>

</ul>

<p>Виноград для красного вина:</p>

<ul>

<li><a href=»cs.htm»>Кабернэ Совиньон</a></li>

<li><a href=»me.htm»>Мерло</a></li>

<li><a href=»pn.htm»>Пино Нуар</a></li>

</ul>

  • Показать пример

Далее, мы хотим, чтобы ссылки на белое вино были жёлтого цвета, на красное вино — красного, а остальные ссылки на этой же странице оставались синими.

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

Попробуем установить классы для предыдущего примера:

<p>Виноград для белого вина:</p>

<ul>

<li><a href=»ri.htm» class=»whitewine»>Рислинг</a></li>

<li><a href=»ch. htm» class=»whitewine»>Шардонэ</a></li>

<li><a href=»pb.htm» class=»whitewine»>Пино Блан</a></li>

</ul>

<p>Виноград для красного вина:</p>

<ul>

<li><a href=»cs.htm» class=»redwine»

>Кабернэ Совиньон</a></li>

<li><a href=»me.htm» class=»redwine»>Мерло</a></li>

<li><a href=»pn.htm» class=»redwine»>Пино Нуар</a></li>

</ul>

Далее мы можем определить специальные свойства для ссылок whitewine и redwine, соответственно.

a {

color: blue;

}

a.whitewine {

color: #FFBB00;

}

a.redwine {

color: #800000;

}

  • Показать пример

Как показано в примере, вы можете определять свойства для элементов, принадлежащих к определённому классу, с помощью .имя_класса в таблице стилей документа.

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

11-06-2018 13:25

Содержание статьи:

  • Зачем подчеркивают ссылки
  • Выделение ссылок
  • Изменение стиля гиперссылки
  • Поддержка браузерами

Исторически сложилось так, что при обработке веб-документа браузеры подчеркивают и выделяют особым цветом гиперссылки. Это может серьезно нарушать дизайнерскую задумку и портить внешний вид сайта. Веб-мастер может применить специальные инструкции CSS и убрать подчеркивание ссылки, чтобы красиво вписать ее в страницу.

Зачем подчеркивают ссылки?

С самого зарождения всемирной паутины гиперссылки имеют особенное значение. Именно они выполняют важнейшую функцию объединения миллионов разных веб-документов в одну сеть.

Вам будет интересно:Неисправимые ошибки секторов жестких дисков

Особый статус элемента определил необходимость его выделения на странице каким-либо способом. Чтобы ссылка не сливалась с остальным текстом (который изначально был просто черным), решено было ее подчеркивать и раскрашивать синим цветом. Кроме того, были добавлены эффекты при наведении мыши (исчезновение подчеркивания, изменение курсора) и изменение цвета уже посещенных ссылок.

Вот так выглядели первые интернет-сайты:

Гиперссылки сразу выделяются на фоне окружающего текста.

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

Выделение ссылок

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

Верстальщикам нужна была возможность с помощью CSS убрать нижнее подчеркивание ссылок, например, в главном меню сайта и сайдбарах.

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

Изменение стиля гиперссылки

Убрать подчеркивание ссылки на CSS очень просто.

Для этого существует специальная инструкция text-decoration. Она заведует оформлением фрагмента текста с помощью горизонтальной линии и определяет ее конкретное расположение.

Список значений, которые может принимать это свойство:

  • underline – нижнее подчеркивание;
  • overline – верхнее подчеркивание, линия проходит над текстом;
  • line-through – зачеркивание, линия проходит посередине строки;
  • none – отсутствие оформления.

По умолчанию браузеры применяют к гиперссылкам инструкцию text-decoration: underline. Очевидно, что нас интересует значение none. Оно позволяет обнулить ранее примененные стили, а также сбросить оформление по умолчанию.

Чтобы убрать подчеркивание ссылки на CSS, следует применить к ней следующее правило:

a { text-decoration: none; }

Поддержка браузерами

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

Источник

Автор: Зинаида Потапова

Похожие статьи

«Система «Виндовс» защитила ваш компьютер»: как отключить появление этого сообщения? Простейшие методы

Ошибка статуса VPN в «Хамачи»: способы быстрого решения проблемы

Как сделать рассылку в «Вайбере»: подробная инструкция и способы

Как сделать бизнес-аккаунт в «Фейсбук»: создание, настройка и раскрутка

Как восстановить переписку в «Телеграмме»: пошаговая инструкция, советы

Как получить в «ES Проводник» Root-права?

Как отключить «Протект» в «Яндекс. Браузере» на компьютере?

Как сохранять контакты в «Гугл»: простые способы, правила переноса, рекомендации и советы

Как на «Андроиде» переименовать приложение: подробная инструкция

Продукты «Гугла»: список, функции и возможности, отзывы

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

В этом блоге вы узнаете, как убрать подчеркивание ссылки с помощью кода CSS.

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

Он также добавляет синий и фиолетовый цвета, если вы ранее посещали страницу, на которую ведет ссылка.

Чтобы удалить подчеркивание ссылки с помощью CSS, добавьте в свой код text-decoration: none .

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

 а {
  текстовое оформление: нет;
  черный цвет;
}
 

Этот код нацелен на селектор CSS «a», который выбирает все теги HTML — те, которые используются для ссылок, и добавляет CSS text-decoration: none и color: black для удаления подчеркивания и установите фиксированный цвет для ссылок.

Вы видели сканирование CSS?

Мгновенная проверка CSS любого элемента, на который вы наводите курсор.

Подробнее →

Гильерме Риццо 1 мин чтения Гильерме Риццо 1 мин чтения

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

html

8 месяцев назад

от Anees Asghar

Ссылки в HTML — это гиперссылки, по которым можно перейти на другой сайт. В веб-дизайне ссылки — это соединения между двумя веб-ресурсами, например изображениями, видео, pdf-файлами и веб-страницами.

В HTML ссылка создается с помощью тега . Внутри тега вы можете указать URL-адрес и текст ссылки. При добавлении ссылки под ней появляется подчеркивание; однако для его удаления можно использовать свойство text-decoration.

В этом посте будут рассмотрены некоторые примеры для объяснения перечисленных ниже аспектов:

Итак, начнем!

Свойство text-decoration в CSS

Чтобы применить к тексту любой вид оформления, используется свойство text-decoration. Например, свойство text-decoration помогает нам изменить цвет текста, стиль и декоративную линию.

Синтаксис

Во-первых, мы поймем синтаксис свойства text-decoration:

text-decoration: line | цвет | стиль;

text-decoration — это сокращенное свойство для следующих свойств CSS:

  • text-decoration-line: Используется для добавления строки в текст.
  • text-decoration-color: Используется для применения цвета к строке текста.
  • text-decoration-thickness: Указывает толщину оформления линии.
  • text-decoration-style: Это свойство устанавливает стиль линии.

С помощью свойства text-decoration мы удалим подчеркивание ссылки в следующем примере.

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

В HTML, когда мы добавляем ссылку, появляется строка под текстом ссылки, которую можно удалить с помощью свойства text-decoration.

Пример

Мы будем использовать тег для определения гиперссылки. href — это гиперссылка на сайт, которая используется для указания адреса сайта. После указания адреса укажите название ссылки, так как ссылка не отображается на сайте. Будет видно только имя, которое мы дадим:

Facebook

Вы можете видеть, что появляется строка под Facebook, которая означает, что к нему прикреплена гиперссылка:

Теперь перейдем к CSS и удалим синее подчеркивание.

Здесь « a » относится к ссылке, которую мы указали в разделе HTML. Мы установим атрибут свойства text-decoration как « none ».

a{

украшение текста:нет;

}

Вывод показывает, что синее подчеркивание было удалено после присвоения атрибута « none » свойству text-decoration:

Мы предложили метод, связанный с удалением синего подчеркивания из ссылки в CSS .

Заключение

Чтобы убрать из ссылки синее подчеркивание, в CSS используется свойство text-decoration. Для этого установите « text-decoration » значение свойства как « нет ». В этой статье объясняется, как работает свойство text-decoration и как его использовать для удаления синего подчеркивания строки с помощью подходящих примеров.

Об авторе

Anees Asghar

Я целеустремленный ИТ-специалист, имею более одного года опыта написания технических текстов в отрасли.

Оставить комментарий

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

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