|
Создание подчеркивания текста
Подчеркивание текста у ссылок настолько устоялось, что любое другое
применение такого оформления будет с ними ассоциироваться. Чтобы не вводить
посетителей сайта в заблуждение, никогда не используйте подчеркивание для
обычного текста, только для ссылок. Но подчеркивание можно использовать разное,
например, в виде пунктирной линии. Для этого создадим новый стиль в котором
будем использовать параметр 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.html">Подчеркнутая
ссылка</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. |
|
|
|