Создание подчеркивания текста

Подчеркивание текста у ссылок настолько устоялось, что любое другое применение такого оформления будет с ними ассоциироваться. Чтобы не вводить посетителей сайта в заблуждение, никогда не используйте подчеркивание для обычного текста, только для ссылок. Но подчеркивание можно использовать разное, например, в виде пунктирной линии. Для этого создадим новый стиль в котором будем использовать параметр border-bottom, он создает линию под текстом (пример 1).

Пример 1. Создание пунктирного подчеркивания для ссылок

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
A {
color: #f00 /* Цвет ссылок */
}

A:visited {
color: #666 /* Цвет посещенных ссылок */
}

A:hover {
text-decoration: none; /* Убираем обычное подчеркивание */
border-bottom: 1px dashed blue /* Добавляем пунктирную линию под текстом */
}
</style>
</head>
<body>

<a href="1.php">Подчеркнутая ссылка</a>

</body>
</html>

В данном примере создается стиль для ссылки, который при наведении не нее курсором мыши создает у текста пунктирное подчеркивание синего цвета.

Подчеркнутая ссылка

Обратите внимание, пунктирное подчеркивание появляется чуть ниже обычного подчеркивания ссылки.

Для создания просто подчеркнутого текста без ссылки, проще создать новый стилевой класс и применять его в нужном месте (пример 2).

Пример 2. Создание пунктирного подчеркивания для текста

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
.underline {
border-bottom: 1px dashed blue /* Добавляем пунктирную линию под текстом */
}
</style>
</head>
<body>

<span class="underline">Динамический HTML</span> - способ управления свойствами объектов на веб-странице, такие как, графика, текст, элементы форм и другое, без необходимости обновления всей страницы.

</body>
</html>

Динамический HTML - способ управления свойствами объектов на веб-странице, такие как, графика, текст, элементы форм и другое, без необходимости обновления всей страницы.

Замечание

Браузер Internet Explorer 5 содержит ошибку и не показывает стили для встроенных элементов вроде тега <SPAN>. Поэтому пример 2 в нем работать должным образом не будет.

Подчеркивание текста через стили можно установить для определенного тега и применять этот тег там, где требуется подчеркивание. В примере 3 в качестве такого тега выступает <ACRONYM>.

Пример 3. Подчеркивание текста для тега <ACRONYM>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<style type="text/css">
ACRONYM {
border-bottom: 1px dashed blue; /* Подчеркивание текста */
color: maroon /* Цвет текста */
}
</style>
</head>
<body>

<p>Популярность языка JavaScript порождена его широкими возможностями по взаимодействию с элементами веб-страницы через <acronym title="Document Object Model, Объектная модель документа">DOM</acronym>.</p>

</body>
</html>

Результат данного примера показан ниже.

Популярность языка JavaScript порождена его широкими возможностями по взаимодействию с элементами веб-страницы через DOM.

Учебник по HTML и CSS

HTML

CSS

Статьи

Полезное

Создание подчеркивания текста