Подчеркнутый текст html (CSS)

Рассмотрим все способы как можно сделать подчеркнутый текст через 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>

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

Текст со свойством 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="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


← Перейти в каталог html уроков и советов

Читайте также:

Copy Protected by Chetan's WP-Copyprotect.