• Как заработать на сайте
  • Как заработать в интернете
  • Инвестиции в интернете
  • Партнерские программы
  • Рейтинг парт. программ
  • SEO продвижение
  • Вопросы и ответы
  • Термины оптимизатора
  • HTML-уроки
  • Интернет
  • Мои услуги
  • Реклама на сайте
  • Обратная связь
‘тоимость баннера за месяц: 30$ (подробности)
Главная → HTML уроки и советы → Подчеркнутый html (CSS)

Подчеркнутый текст 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 уроков и советов

Основные разделы
  • Главная
  • Партнерские программы
  • Рейтинг партнерских программ
  • Статьи про SEO
  • Термины SEO
  • Описание бирж
  • HTML-уроки и советы
  • CSS-уроки
  • Биткоины
  • PHP-уроки
  • Бинарные опционы
  • Социальные сети
  • Обзоры систем
  • Все про CMS
  • Реклама в интернете
Важно
  • Продвижение сайта
  • Аудит внутренней оптимизации
  • Куплю Ваш сайт
  • Куплю Вашу подпись на форуме
  • Подписаться на рассылку
  • Реклама на сайте
  • Карта сайта
  • Обратная связь
© 2010-2025 - Zarabotat-Na-Sajte.ru