Содержание

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 | Techrocks

Домой Обучение Подчеркивание текста в HTML

Хочешь знать больше про веб?

Подпишись на наш телеграм-канал TechRocks WEB-разработка?

Подписаться

×

Перевод статьи «HTML Underline Text – How to Use the <u> Tag with Example Code».

Photo by Tyler B on Unsplash

В более ранних версиях HTML тег <u> использовался для подчеркивания текста. В этой статье мы рассмотрим его использование в HTML 5.

Что из себя представляет тег <u>?

Тег <u> обозначает Unarticulated Annotation element («элемент невнятной аннотации»). Этот элемент представляет собой текст, который стилистически отличается от окружающего текста, но содержащееся в нем примечание — не словесное.

Стиль по умолчанию для этого элемента — одинарное подчеркивание.

Давайте рассмотрим примеры использования тега <u>.

При помощи тега <u> можно выделять слова с ошибками

Самый обиходный вариант использования тега <u> — указывать с его помощью на орфографические ошибки.

<p>I was sitting in <u>orcestra</u> practice and the conductor was mad because we <u>didt</u> practice our parts. </p>

Также этот тег можно использовать для подчеркивания имен собственных в китайском письме. Пример:

<p> This is an example of a proper name mark:<u>书名号</u></p>

Как изменять стиль тега <u> при помощи CSS

Если вы хотите выделить текст с ошибкой, вы можете стилизовать тег <u> и создать подчеркивание волнистой красной линией.

 
<p>This sentence has so <u>mannny</u> spelling <u>errrrors</u>.</p>
body {
  font-family: Verdana, sans-serif;
}
u. spelling {
  text-decoration: red wavy underline;
}

Избегайте использования тега <u> с целью стилизации

В более ранних версиях HTML тег <u> использовался просто для подчеркивания текста. В HTML5 он получил семантическое значение. Для простого подчеркивания следует пользоваться CSS-стилями.

<span>This text was styled with CSS.</span>
.underline {
  text-decoration: underline;
}

Не используйте тег <u> для выделения названий книг

Если вы ссылаетесь на название книги, следует пользоваться тегом <cite>. Стиль этого тега по умолчанию — курсивное начертание, но стили можно переписать при помощи CSS.

<p>I enjoyed reading <cite>The Great Gatsby</cite> in high school.</p>
 
cite {
  font-style: normal;
  text-decoration: underline;
}

Заключение

Тег <u> — это семантический элемент, которым следует пользоваться только в четко определенных случаях. Например, для выделения слов с ошибками. Менее распространенный случай использования этого тега — для подчеркивания имен собственных в китайском письме.

Никогда не используйте тег <u>, чтобы подчеркнуть текст просто «для красоты». Если ваше подчеркивание не несет семантической нагрузки, создавайте его при помощи правил CSS.

  • ТЕГИ
  • primary
  • верстка

Предыдущая статьяИзучение iOS-разработки: 5 советов новичкам

Следующая статья8 источников дополнительного дохода для разработчика

Редакция techrocks.ru

techrocks.ru — качественный контент, созданный инженерами для инженеров

HTML-тег u

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


Пример

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

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

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

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

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

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

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

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

Элемент
<у> Да Да Да Да Да

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

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

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

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

Дополнительные примеры

Пример

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





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


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

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

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

Ссылка HTML DOM: Подчеркнутый объект значения:

Пример

u {
  text-decoration: подчеркивание;
}

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

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


ВЫБОР ЦВЕТА

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

9003 010 Учебник0123 HTML Reference
CSS Reference
JavaScript Reference
SQL Reference
Python Reference
W3.CSS Reference
Bootstrap Reference
PHP Reference
HTML Colors
Java Reference
Angular Reference
jQuery Reference

Top3 Examples Примеры HTML

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

FORUM | О

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

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

: Элемент неясной аннотации (подчеркивание) — 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Элемент
90501 90 загрузка только в таблицах браузера BCD.

No related posts.

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

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

Спецификация
Стандарт HTML
# the-u-element