Как подчеркнуть текст в 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 (CSS)

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

• Через html тег и
• Через свойство CSS text-decoration
• Через свойство CSS border-bottom

Подчеркнутый текст через html тег и

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

Название пришло от английского слова «underline». Html тег считается более новым.

p>Обычный текст. u>Подчеркнутый текст через тег u/u>/p> p>Обычный текст. ins>Подчеркнутый текст через тег ins/ins>/p>

Преобразуется на странице в

Обычный текст. Подчеркнутый текст через тег u

Подчеркнутый текст через свойство CSS text-decoration

В CSS есть свойство text-decoration , которое отвечает за форматирование текста html для создания подчеркивания.

Синтаксис CSS text-decoration

text-decoration: none|underline|overline|line-through|inherit;

• none — текст без оформления
• underline — нижнее подчеркивание
• overline — верхнее подчеркивание
• line-through — зачеркивание текста
• blink — мерцающий текст (рекомендуется не применять это значение)

Нас интересует значение underline

html> head> style> .underline< text-decoration: underline; > /style> /head> body> div class css">underline">Текст со свойством text-decoration: underline/div> /body> /html>

Преобразуется на странице в

Текст со свойством text-decoration: underline

Можно также задавать стиль линии и цвет. Более подробно про эту возможность читайте в статье: CSS text-decoration

Подчеркнутый текст через свойство CSS border-bottom

Свойство CSS border-bottom создано для создании рамок (границ) объекта снизу. Естественно таким образом можно задавать и подчеркивание тексту.

html> head> style> .border_bottom_red< border-bottom: 1px solid #F00; > .border_bottom_dashed< border-bottom: 2px dashed #000; > /style> /head> body> div class css">border_bottom_red">Текст со свойством border-bottom (красное подчеркивание)/div> div class css">border_bottom_dashed">Текст со свойством border-bottom (пунктирное подчеркивание)/div> /body> /html>

Преобразуется на странице в

Текст со свойством border-bottom (красное подчеркивание)
Текст со свойством border-bottom (пунктирное подчеркивание)

Свойство text-decoration, подчёркивание и другие эффекты

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

1. underline — подчёркивание;
2. line-through — зачёркивание;
3. overline — надчёркивание;
4. none — убирает вышеперечисленные эффекты.

К тексту можно одновременно применить несколько эффектов, если перечислить значения через пробел:

p < text-decoration: underline; /* подчёркнутый текст */ >span < /* подчёркнутый и зачёркнутый текст */ text-decoration: underline line-through; >

Свойство text-decoration — составное, а это значит, что его можно разложить на следующие свойства:

• text-decoration-line — вид линии: зачёркивание, подчёркивание или надчёркивание;
• text-decoration-style — стиль линии, может принимать значения:
  • solid — сплошная линия;
  • double — двойная линия;
  • dotted — точечная линия;
  • dashed — пунктирная линия;
  • wavy — волнистая линия.

  Перейти к заданию

  • index.html Сплит-режим
  • style.css Сплит-режим

  HTML тег

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

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

  Атрибуты

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

  Пример

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

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

  Как на принтере canon прочистить чернила

• Как оплачивать телефоном если нет google play
• Почему сухие свечи зажигания форд мондео
• Сколько стоит телевизор филипс флат тв