Подчеркивание для блочных элементов вроде тега можно проводить двояко. Например, линию под текстом устанавливать на всю ширину блока, независимо от объема текста. А также подчеркивание делать только у текста. Далее рассмотрим оба варианта.
Чтобы создать линию под текстом, следует добавить к элементу стилевое свойство border-bottom , его значением выступает одновременно толщина линии, ее стиль и цвет (пример 1).
Пример 1. Линия на всю ширину
HTML5 CSS 2.1 IE Cr Op Sa Fx
Линия под заголовком Пример текста
Черный заголовок привлекает к себе внимание, несмотря на то, что он черный, а не белый.
Расстояние от линии до текста можно регулировать свойством padding-bottom , добавляя его к селектору H1 . Результат данного примера показан на рис. 1.
Рис. 1. Линия под заголовком
Подчеркивание текста
Чтобы подчеркнуть только текст, необходимо воспользоваться свойством text-decoration со значением underline , опять же, добавляя его к селектору H1 (пример 2).
Пример 2. Линия на ширину текста
HTML5 CSS 2.1 IE Cr Op Sa Fx
Подчеркивание заголовка Пример текста
Черный заголовок привлекает к себе внимание, несмотря на то, что он черный, а не белый.
Результат данного примера показан на рис. 2.
Рис. 2. Подчеркивание заголовка
В случае использования свойства text-decoration линия жестко привязана к тексту, поэтому определить ее положение и стиль не удастся.
Как сделать подчёркнутый текст?
Таким образом, если требуется не только подчеркнуть слова, но и выделить их на фоне остального текста, используйте элемент (пример 1).
Пример 1. Элемент
Для простого оформления текста с помощью подчёркивания воспользуйтесь свойством text-decoration со значением underline (пример 2).
Пример 2. Использование text-decoration
См. также
- text-decoration
- Начертание
- Оформление ссылок
- Продвинутая семантика и доступность
- Свойства текста в CSS
- Стилизация ссылок
Подчеркнутый текст 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 (пунктирное подчеркивание)
HTML тег
HTML тег содержит в себе текст, который должен стилистически отличаться от обычного текста, например слова с орфографическими ошибками или текст на другом языке. Содержимое элемента браузеры отображают как подчёркнутый текст.
По возможности нужно избегать использование элемента там, где его можно будет спутать с гиперссылкой.
Атрибуты
Стиль по умолчанию
Пример
Это обычный абзац.
Результат данного примера в окне браузера:
