Как подчеркнуть текст в html
Перейти к содержимому

Как подчеркнуть текст в html

  • автор:

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

Волнистое подчёркивание обычно применяется для выделения текста с орфографическими или иными ошибками.

Само подчёркивание делается через свойство text-decoration со значением underline , а вот стиль и цвет линии задаются через свойства text-decoration-style и text-decoration-color. Таким образом, для нашей задачи понадобится три разных свойства.

text-decoration: underline; /* Подчёркивание */ text-decoration-style: wavy; /* Волнистая линия */ text-decoration-color: red; /* Цвет подчёркивания */

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

Пример 1. Волнистое подчёркивание

См. также

  • text-decoration-color
  • text-decoration-style

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

Для изменения оформления текста в виде его подчеркивания, перечеркивания, линии над текстом и других, используется свойство text-decoration. Одновременно можно применить более одного стиля, перечисляя значения через пробел. Другой вариант использовать свойство border-bottom.

 class="red-dots">Красные точки  class="blue-wave">Синяя волна  class="two-lines">Две черты, снизу и с верху  class="bor-bottom">Черта снизу 
.bor-bottom  border-bottom: 2px solid #333; > .red-dots  text-decoration: underline dotted red; > .blue-wave  text-decoration: blue wavy underline; > .two-lines  text-decoration: underline overline #FF3028; > 

Подчеркнутый текст HTML

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

Конструктор сайтов "Нубекс"

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

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

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

   Подчеркнутый текст с помощью CSS - "Нубекс"  .underline 

Конструктор сайтов Нубекс"

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

    Подчеркнуть текст пунктиром CSS:

   Подчеркнутый пунктиром текст - "Нубекс"  .dashed 

Конструктор сайтов Нубекс"

   Подчеркнутый точками текст - "Нубекс"  .dotted 

Конструктор сайтов Нубекс"

   Подчеркнутый двумя линиями текст - "Нубекс"  .double 

Конструктор сайтов Нубекс"

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

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

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

HTML тег

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

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

Атрибуты

Стиль по умолчанию

Пример

   

Это обычный абзац.

Результат данного примера в окне браузера:

Пример использования тега <u></p>
<p>» /></p>
<p>Копирование материалов с данного сайта возможно только с разрешения администрации сайта <br />и при указании прямой активной ссылки на источник. <br />2011 – 2024 © puzzleweb.ru | razumnikum.ru</p>
<div class='yarpp yarpp-related yarpp-related-website yarpp-template-list'>
<!-- YARPP List -->
<div>Похожие публикации:</div><ol>
<li><a href=Для чего нужна синхронизация в осциллографе

  • Как в multisim поменять ansi на din
  • Как добавить в исключения
  • Как поменять цвет списка в тильде
  • Добавить комментарий

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