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

Leave a Comment / Html / By /

text-decoration | htmlbook.ru

Internet ExplorerChromeOperaSafariFirefoxAndroidiOS
6.0+1.0+4.0+1.0+1.0+1.0+1.0+

Краткая информация

Значение по умолчаниюnone
НаследуетсяНет
ПрименяетсяКо всем элементам
Ссылка на спецификациюhttp://www.w3.org/TR/CSS21/text.html#propdef-text-decoration

Версии CSS

CSS 1CSS 2CSS 2.1CSS 3

Описание

Добавляет оформление текста в виде его подчеркивания, перечеркивания, линии над текстом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

Синтаксис

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 эта ошибка исправлена.

Текст

CSS по теме

  • text-decoration

Статьи по теме

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

Рецепты CSS

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

html — Почему я не могу убрать подчеркивание текста?

У меня прописано свойство text-decoration: underline; для всех элементов, которые находятся в div. Но прописав text-decoration: none; для одной из надписей, я все равно не могу избавиться от подчеркивания. В чем тут дело?

.one {
  display: block;
  text-align: right;
  font-size: 30px;
  text-decoration: none;
}
div {
  width: 50%;
  height: 500px;
  background: yellow;
  text-align: center;
  font-size: 50px;
  color: purple;
  text-decoration: underline;
}
<div>
  <span>Hello, world!</span>
  <br>
  <span>Hello!</span>  
</div>
  • html
  • css

2

Как указано в MDN

Украшения текста отрисовываются вокруг дочерних элементов. Это значит, что если у элемента установлено свойство text-decoration, то дочерний элемент не может удалить его для себя.

перевод ответа @xpy

В спецификации указано, что при применении данного свойства к элементу, оно будет распространено на все внутренние in flow элементы (то есть на элементы, у которых не указан float, либо абсолютное позиционирование).

Так же есть уточнение

декорация текста не распространяется на любые вложенные out of flow элементы, ни на вложенные атомарные inline-level элементы, такие как inline-block и inline-table.

.one {
  display: inline-block;
  text-align: right;
  font-size: 30px;
  text-decoration: none;
}
div {
  width: 50%;
  background: yellow;
  text-align: center;
  font-size: 50px;
  color: purple;
  text-decoration: underline;
  padding: 10px;
}
<div>
  <span>Hello, world!</span>
  <br>
  <span>Hello!</span>
</div>

2

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Почта

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Ссылки на стилизацию CSS

❮ Предыдущая Далее ❯

С помощью CSS ссылки можно оформлять различными способами.

Text LinkText LinkLink ButtonLink Button

Styling Links

Ссылки могут быть оформлены с помощью любого свойства CSS (например, color , font-family , фон и т.д.).

Пример

a {
  цвет: ярко-розовый;
}

Попробуйте сами »

Кроме того, ссылки можно стилизовать по-разному в зависимости от того, что состояние , в котором они находятся.

Четыре состояния ссылок:

  • a:link — обычная, непосещаемая ссылка
  • a:visited — ссылка, которую пользователь посетил
  • a:hover — ссылка, когда пользователь наводит на нее курсор
  • a:active — ссылка в момент нажатия

Пример

/* непросмотренная ссылка */
a:link {
  color: red;
}

/* посещено ссылка */
a:посетили {
  цвет: зеленый;
}

/* указатель мыши над ссылкой */
a:hover {
  color: hotpink;
}

/* выбранная ссылка */
a:active {
цвет синий;
}

Попробуйте сами »

При настройке стиля для нескольких состояний ссылок существуют некоторые правила порядка:

  • a:hover ДОЛЖЕН следовать после a:link и a:visited
  • a:active ДОЛЖЕН идти после a:hover

Текстовое украшение

Текстовое украшение 9Свойство 0015 в основном используется для удаления подчеркивания в ссылках:

Пример

a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
}

a:hover {
  text-decoration: underline;

}

a:active {
  text-decoration: underline;
}

Попробуйте сами »

Цвет фона

Свойство background-color можно использовать для указания цвета фона для ссылок:

Пример

a:link {
  цвет фона: желтый;
}

a:visited {
 цвет фона: голубой;
}

a:hover {
  цвет фона: светло-зеленый;
}

a:active {
  цвет фона: ярко-розовый;
}

Попробуйте сами »

Кнопки ссылок

Этот пример демонстрирует более сложный пример, в котором мы объединяем несколько свойств CSS для отображения ссылок в виде блоков/кнопок:

Пример

a:ссылка, a:посетили {
  цвет фона: #f44336;
белый цвет;
  отступ: 14 пикселей 25 пикселей;
  выравнивание текста: по центру;
  украшение текста: нет;

  отображение: встроенный блок;
}

a:hover, a:active {
  цвет фона: красный;
}

Попробуйте сами »

Другие примеры

Пример

В этом примере показано, как добавить другие стили к гиперссылкам:

a. one:link {color: #ff0000;}
a.one:visited {color: #0000ff;}
а.один:наведите {color: #ffcc00;}

a.two:link {color: #ff0000;}
a.two:visited {color: #0000ff;}
a.two:hover {размер шрифта: 150%;}

a.three:link {цвет: #ff0000;}
a.three:visited {цвет: #0000ff;}
a.three:hover {фон: #66ff66;}

a.four:link {color: #ff0000;}
a.four:visited {color: #0000ff;}
a.four:hover {семейство шрифтов: моноширинный;}

a.five:link {цвет: #ff0000; украшение текста: нет;}

a.five:visited {color: #0000ff; украшение текста: нет;}
a.five:hover {text-decoration: underline;}

Попробуйте сами »

Пример

Другой пример создания блоков ссылок/кнопок:

a:link, a:visited {
 цвет фона: белый;
  цвет: черный;
граница: 2 пикселя сплошного зеленого цвета;
  отступ: 10 пикселей 20 пикселей;
 выравнивание текста: центр;
  text-decoration: нет;
  отображение: встроенный блок;
}

а: наведение, а: активный {
  фоновый цвет: зеленый;
  цвет: белый;
}

Попробуйте сами »

Пример

Этот пример демонстрирует различные типы курсоров (может быть полезен для ссылок):

авто

перекрестие

по умолчанию

изменить размер

помощь

переместить

n-изменить размер

ne-resize

nw-resize

указатель

прогресс< br>
s-resize

se-resize

sw-resize

text< /span>

w-resize

wait

Попробуйте сами »

Проверьте себя с помощью упражнений

Упражнение:

Установите для ссылок красный цвет.

<стиль>
 {
  красный цвет;
}

<тело>
   
Это заголовок
 
  
Это абзац

  Это ссылка

Начать упражнение

❮ Предыдущий Следующий ❯


ВЫБОР ЦВЕТА

Лучшие учебники
Учебное пособие по HTML
Учебное пособие по CSS
Учебное пособие по JavaScript
Учебное пособие
Учебное пособие по SQL
Учебное пособие по Python
Учебное пособие по W3.CSS
Учебное пособие по Bootstrap
Учебное пособие по PHP
Учебное пособие по Java
Учебное пособие по C++
Учебное пособие по jQuery

902 Справочник Справочник по HTML
Справочник по CSS
Справочник по JavaScript
Справочник по SQL
Справочник по Python
Справочник по W3.CSS
Справочник по Bootstrap
Справочник по PHP
Цвета HTML
Справочник по Java
Справочник по Angular
Справочник по jQuery

Основные примеры
Примеры HTML
Примеры CSS
Примеры JavaScript
Примеры инструкций
Примеры SQL
Примеры Python
Примеры W3. CSS
Примеры Bootstrap
Примеры PHP
Примеры Java
Примеры XML
Примеры jQuery

FORUM | О

W3Schools оптимизирован для обучения и обучения. Примеры могут быть упрощены для улучшения чтения и обучения. Учебники, ссылки и примеры постоянно пересматриваются, чтобы избежать ошибок, но мы не можем гарантировать полную правильность всего содержания. Используя W3Schools, вы соглашаетесь прочитать и принять наши условия использования, куки-файлы и политика конфиденциальности.

Copyright 1999-2023 Refsnes Data. Все права защищены.
W3Schools работает на основе W3.CSS.

Цвета ссылок HTML

❮ Предыдущая Далее ❯

HTML-ссылка отображается другим цветом в зависимости от был ли он посещен, не посещен или активен.

Цвета ссылок HTML

По умолчанию ссылка выглядит следующим образом (во всех браузерах):

  • Непосещенная ссылка подчеркнута и окрашена в синий цвет
  • Посещенная ссылка подчеркнута и окрашена в фиолетовый цвет
  • Активная ссылка подчеркнута и окрашена в красный цвет

Вы можете изменить цвета состояния ссылки с помощью CSS:

Пример

Здесь непросмотренная ссылка будет зеленой без подчеркивания. Посещенная ссылка будет розовым без подчеркивания. Активная ссылка будет выделена желтым цветом и подчеркнута. Кроме того, при наведении мыши на ссылку (a:hover) она становится красной и подчёркнутой:

<стиль>
a:link {
  цвет: зеленый;
  background-color: прозрачный;
  украшение текста: нет;
}

a: посещено {
  цвет: розовый;
  background-color: прозрачный;
текстовое оформление: нет;
}

a:hover {
 цвет: красный;
  background-color: прозрачный;
  text-decoration: подчеркивание;
}

a:active {
  цвет: желтый;
  background-color: прозрачный;
оформление текста: подчеркивание;
}

Попробуйте сами »

Кнопки ссылок

Ссылку также можно оформить как кнопку с помощью CSS:

Это ссылка

Пример