Html подчеркнуть текст: Тег — подчёркнутый текст

25.03.2021 Facebook Twitter LinkedIn Google+ Разное

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 и CSS

Серёжа СыроежкинКопирайтер

5. 06.2015

Подчеркнутый текст в HTML выделяется с помощью тега u HTML (от слова underline). Применяется он следующим образом (нужная часть текста помещается между тегами <u></u>):

Конструктор сайтов <u>"Нубекс"</u>

Но данный код считается невалидным, поэтому значительно эффективнее и правильнее использовать CSS-стили для декорации текста.

Подчеркнуть текст — CSS

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

<!DOCTYPE html>
<html>
 <head>
    <title>Подчеркнутый текст с помощью CSS - "Нубекс"</title>
	<meta charset="utf-8">
	<style>
	   .underline {
	   text-decoration: underline;
	   }
	</style>
 </head>
  <body>
	 <p>Конструктор сайтов <span>Нубекс"</span></p>
  </body>
</html>

Подчеркнуть текст с помощью CSS можно не только сплошной линией.

Посмотрим, какими вариантами можно подчеркнуть текст:

  • Подчеркнуть текст пунктиром CSS: 
    <!DOCTYPE html>
<html>
 <head>
    <title>Подчеркнутый пунктиром текст - "Нубекс"</title>
	<meta charset="utf-8">
	<style>
	   .dashed {
	   border-bottom: 1px dashed blue;
	   }
	</style>
 </head>
  <body>
	 <p>Конструктор сайтов <span>Нубекс"</span></p>
  </body>
</html>
  • Подчеркивание точками: 
    <!DOCTYPE html>
<html>
 <head>
    <title>Подчеркнутый точками текст - "Нубекс"</title>
	<meta charset="utf-8">
	<style>
	   .dotted {
	   border-bottom: 2px dotted blue;
	   }
	</style>
 </head>
  <body>
	 <p>Конструктор сайтов <span>Нубекс"</span></p>
  </body>
</html>
  • Двойная черта: 
    <!DOCTYPE html>
<html>
 <head>
    <title>Подчеркнутый двумя линиями текст - "Нубекс"</title>
	<meta charset="utf-8">
	<style>
	   . double {
	   border-bottom: double blue;
	   }
	</style>
 </head>
  <body>
	 <p>Конструктор сайтов <span>Нубекс"</span></p>
  </body>
</html>

Как видно из приведенных примеров, управлять стилем подчеркивания можно при помощи свойства border-bottom (нижняя граница). С помощью этого параметра можно задать тип подчеркивания, цвет, толщину.

Смотрите также:

  • Шрифты CSS
  • Тень текста
  • Зачеркнутый текст HTML
  • Жирный текст CSS
  • Курсив CSS

магазин, разработка, контент, новости, домен, главная страница, клиенты, продвижение, реклама, соцсети, кнопки, функционал, html, текст, шрифты, html5, видео, звук, seo, история, css, фон, хостинг, дизайн, мобильная версия, посещаемость, фото, типографика, создание сайтов, ссылка, ошибки, проверка, Яндекс, Сайт для детского сада,

Раз в неделю мы отправляем дайджест с популярными статьями по теме образования

Адрес эл. почты*

: Элемент неясной аннотации (подчеркивание) — HTML: язык гипертекстовой разметки

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

Предупреждение: Этот элемент раньше назывался элементом «Подчеркивание» в старых версиях HTML и до сих пор иногда используется таким образом. Вместо этого, чтобы подчеркнуть текст, вы должны применить стиль, который включает CSS text-decoration свойство установлено в underline .

Дополнительные сведения о том, когда уместно использовать , а когда нет, см. в разделе «Примечания по использованию».

Этот элемент включает только глобальные атрибуты.

Наряду с другими чистыми элементами стиля, исходный элемент HTML Underline ( ) устарел в HTML 4; однако был восстановлен в HTML 5 с новым семантическим значением: пометить текст как имеющий некоторую форму нетекстовой аннотации.

Примечание: Избегайте использования элемента с его стилем по умолчанию (подчеркнутый текст), чтобы его не спутали с гиперссылкой, которая также подчеркнута по умолчанию.

Варианты использования

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

Вы должны не использовать для подчеркивания текста в презентационных целях или для обозначения названий книг.

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

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

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

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

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

Указание орфографической ошибки

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

HTML 
 
Этот абзац содержит неправильное написание слова.

В HTML мы видим использование

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

CSS 
 u.правописание {
  оформление текста: подчеркивание красной волнистой линией;
}

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

Результат

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

Избегание

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

Несемантические подчеркивания

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

HTML 
 Сегодняшнее предложение


Куриный суп с лапшой и морковью
CSS 
 .подчеркивание {
  оформление текста: подчеркивание;
}
Результат
Представление названия книги

Названия книг должны быть представлены с использованием элемента вместо или даже .

Использование элемента cite 
 
Класс читал Моби Дик в первом семестре.
Стиль элемента cite

Стиль по умолчанию для элемента

отображает текст курсивом. Вы можете переопределить это с помощью CSS:

 
Класс читается как Moby Dick в первом термине.

 
 цитировать {
  стиль шрифта: обычный;
  оформление текста: подчеркивание;
}
Категории контента Потоковое содержание, фразовое содержание, ощутимое содержание.
Разрешенный контент Фразы контента.
Отсутствие тега Нет, начальный и конечный теги обязательны.
Разрешенные родители Любой элемент, принимающий фразовое содержание.
Неявная роль ARIA Нет соответствующей роли
Разрешенные роли ARIA Любой
Интерфейс DOM HTMLЭлемент
. Включите JavaScript для просмотра данных.
  • Вместо них обычно следует использовать элементы , , , и .
  • Свойство CSS text-decoration следует использовать для несемантического подчеркивания.

Обнаружили проблему с содержанием этой страницы?

  • Отредактируйте страницу на GitHub.
  • Сообщить о проблеме с содержимым.
  • Посмотреть исходный код на GitHub.

Хотите принять больше участия?

Узнайте, как внести свой вклад.

Последний раз эта страница была изменена участниками MDN.

Тег HTML u

❮ Назад Полный справочник HTML Далее ❯


Пример

Отметьте слово с ошибкой тегом :

Это текст с ошибкой.

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

Другие примеры «Попробуйте сами» ниже.

Определение и использование

Тег представляет некоторый текст, не артикулирован и стилизован по-другому из обычного текста, например слова с ошибками или имена собственные в тексте на китайском языке. содержимое внутри обычно отображается с подчеркиванием. Вы можете изменить это с помощью CSS (см. пример ниже).

Совет: Не используйте элемент, где его можно спутать с гиперссылкой!

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

Спецификация
HTML Standard
# u-Ulement
Элемент
<у> Да Да Да Да Да

Глобальные атрибуты

Тег также поддерживает глобальные атрибуты в HTML.

Атрибуты событий

Тег также поддерживает атрибуты событий в HTML.

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

Пример

Используйте CSS для стилизации текста с ошибками:





Это какой-то текст с ошибкой

.


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

Связанные страницы

Учебник HTML: Форматирование текста HTML

Справочник HTML DOM: Подчеркивание объекта

u {
 текстовое оформление: подчеркивание;
}

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

❮ Предыдущая Полный справочник HTML Следующий ❯


ВЫБОР ЦВЕТА

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

900 Справочник по 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

7
7
7 О

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

Comments
Leave Comment