Подчеркнутый текст в 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 class="underline">Нубекс"</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 class="dashed">Нубекс"</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 class="dotted">Нубекс"</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 class="double">Нубекс"</span></p> </body> </html>
Как видно из приведенных примеров, управлять стилем подчеркивания можно при помощи свойства border-bottom (нижняя граница). С помощью этого параметра можно задать тип подчеркивания, цвет, толщину.