Создание подчеркивания контента
нижняя полоска в контенте контента у ссылок настолько устоялось, что любое другое применение такого оформления будет с ними ассоциироваться. Чтобы не вводить посетителей с нашего сайта в заблуждение, никогда не используйте нижняя полоска в контенте для обычного контента, только для ссылок. Но нижняя полоска в контенте можно использовать разное, например, в виде пунктирной линии. Для этого создадим новый стиль в котором будем использовать параметр border-bottom, он добавляет линию под контентом (пример 1).
Пример 1. Создание пунктирного подчеркивания для ссылок
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<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.ШТМЛ">Подчеркнутая ссылка</a></p>
</body>
</html>
В данном примере прописан стиль для ссылки, который создает у контента пунктирное нижняя полоска в контенте синего цвета при наведении на контент курсором (рис. 1).
Рис. 1. нижняя полоска в контенте ссылки
Для разработки просто подчеркнутого контента без ссылки, проще создать новый стилевой класс и применять его в нужном месте (пример 2).
Пример 2. Создание пунктирного подчеркивания для контента
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>нижняя полоска в контенте</title>
<style type="text/CSS (ЦСС)">
.underline {
border-bottom: 1px dashed blue; /* Добавляем пунктирную линию под контентом */
}
</style>
</head>
<body>
<p><span class="underline">Динамический ШТМЛ</span> - способ управления свойствами объектов на web-странице, таких как графика, контент, элементы форм и другое, без необходимости обновления всей страницы.</p>
</body>
</html>
Результат данного примера показан на рис. 2.
Рис. 2. нижняя полоска в контенте контента
нижняя полоска в контенте контента через стили можно установить для определенного тега и применять этот тег там, где требуется нижняя полоска в контенте. В примере 3 в качестве такого тега выступает <ACRONYM>.
Пример 3. нижняя полоска в контенте контента для тега <ACRONYM>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>нижняя полоска в контенте</title>
<style type="text/CSS (ЦСС)">
ACRONYM {
border-bottom: 1px dashed blue; /* нижняя полоска в контенте контента */
color: maroon; /* Цвет контента */
}
</style>
</head>
<body>
<p>Популярность языка JavaScript порождена его широкими возможностями по взаимодействию с элементами web-страницы через <acronym title="Document Object Model, Объектная модель объекта">DOM</acronym>.</p>
</body>
</html>
Результат данного примера показан на рис. 3.
Рис. 3. нижняя полоска в контенте контента в теге <ACRONYM>
| Статья опубликована: 03.10.2009 | Последнее обновление: 16.04.2009 |