Рассмотрим все способы как можно сделать подчеркнутый текст через html и CSS. Всего существует три варианта:
- Через html тег <u> и <ins>
- Через свойство CSS text-decoration
- Через свойство CSS border-bottom
Подчеркнутый текст через html тег <u> и <ins>
Весь текст заключенные в теги <u></u> и <ins></ins> становится подчеркнутым.
Название <u></u> пришло от английского слова "underline". Html тег <ins></ins> считается более новым.
Например
<p>Обычный текст. <u>Подчеркнутый текст через тег u</u></p> <p>Обычный текст. <ins>Подчеркнутый текст через тег ins</ins></p>
Преобразуется на странице в
Обычный текст. Подчеркнутый текст через тег u
Обычный текст. Подчеркнутый текст через тег ins
Подчеркнутый текст через свойство 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="underline">Текст со свойством text-decoration: underline</div> </body> </html>
Преобразуется на странице в
Можно также задавать стиль линии и цвет. Более подробно про эту возможность читайте в статье: 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="border_bottom_red">Текст со свойством border-bottom (красное подчеркивание)</div> <div class="border_bottom_dashed">Текст со свойством border-bottom (пунктирное подчеркивание)</div> </body> </html>
Преобразуется на странице в
Текст со свойством border-bottom (красное подчеркивание)Текст со свойством border-bottom (пунктирное подчеркивание)
Читайте также:
• Как сделать рамку - свойство CSS border
• Курсивный текст через теги html и свойства CSS
• Жирный шрифт CSS
• Ссылки в html - тег <a>, примеры
• Таблицы в html - тег <table>, примеры
• Как вставить картинку в html (тег <img>)
• Фреймы html
• Комментарии в html <!-- -->
• Межстрочный интервал css (line-height)
• Атрибут position в HTML
• Зачеркнутый текст html