Создание подчеркивания текста
Влад Мержевич
Обычная версия
Подчеркивание текста у ссылок настолько устоялось, что любое другое применение
такого оформления будет с ними ассоциироваться. Чтобы не вводить посетителей
сайта в заблуждение, никогда не используйте подчеркивание для обычного текста,
только для ссылок. Но подчеркивание можно использовать разное, например, в виде
пунктирной линии. Для этого создадим новый стиль в котором будем использовать
параметр border-bottom, он добавляет линию под текстом
(пример 1).
Пример 1. Создание пунктирного подчеркивания для ссылок
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Ссылки</title>
<style type="text/css">
A {
color: #f00;
}
A:visited {
color: #666;
}
A:hover {
text-decoration: none;
border-bottom: 1px dashed blue;
}
</style>
</head>
<body>
<p><a href="1.html">Подчеркнутая ссылка</a></p>
</body>
</html>
В данном примере прописан стиль для ссылки, который создает у текста пунктирное подчеркивание синего цвета при наведении на текст курсором
(рис. 1).
Рис. 1. Подчеркивание ссылки
Для создания просто подчеркнутого текста без ссылки, проще создать новый стилевой
класс и применять его в нужном месте (пример 2).
Пример 2. Создание пунктирного подчеркивания для текста
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Подчеркивание</title>
<style type="text/css">
.underline {
border-bottom: 1px dashed blue;
}
</style>
</head>
<body>
<p><span class="underline">Динамический HTML</span> - способ
управления свойствами объектов на веб-странице, таких как графика, текст, элементы
форм и другое, без необходимости обновления всей страницы.</p>
</body>
</html>
Результат данного примера показан на рис. 2.
Рис. 2. Подчеркивание текста
Подчеркивание текста через стили можно установить для определенного тега и
применять этот тег там, где требуется подчеркивание. В примере 3 в качестве
такого тега выступает <ACRONYM>.
Пример 3. Подчеркивание текста для тега <ACRONYM>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
<title>Подчеркивание</title>
<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>
Результат данного примера показан на рис. 3.
Рис. 3. Подчеркивание текста в теге <ACRONYM>
