www html, html уроки, html теги, css, верстка
Уроки книги по css и html урокам вопросы и ответы Помощь сайту дизайн-студия Шутовой Елены
Главная страница > Уроки > FAQ CSS (ЦСС) > Создание подчеркивания контента

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

контентовая версия  

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

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

Валидный HTML
Валидный CSS
<!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.ШТМЛ">Подчеркнутая ссылка</a></p>

</body>
</html>

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

Рис. 1

Рис. 1. нижняя полоска в контенте ссылки

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

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

Валидный HTML
Валидный CSS
<!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">Динамический ШТМЛ</span> - способ управления свойствами объектов на web-странице, таких как графика, контент, элементы форм и другое, без необходимости обновления всей страницы.</p>

</body>
</html>

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

Рис. 2

Рис. 2. нижняя полоска в контенте контента

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

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

Валидный HTML
Валидный CSS
<!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 порождена его широкими возможностями по взаимодействию с элементами web-страницы через <acronym title="Document Object Model, Объектная модель объекта">DOM</acronym>.</p>

</body>
</html>

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

Рис. 3

Рис. 3. нижняя полоска в контенте контента в теге <ACRONYM>

Статья опубликована: 03.10.2009 Последнее обновление: 16.04.2009
Поиск по сайту
FAQ CSS (ЦСС)
Разделы
CSS (ЦСС) по теме

border-bottom
Параметр позволяет одновременно установить толщину, стиль и цвет границы внизу элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному атрибуту.

color
Определяет цвет контента элемента.

text-decoration
Добавляет оформление контента в виде его подчеркивания, перечеркивания, линии над контентом и мигания. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

Copyright 2009 Все права защищены

О нашем Internet проекте | Наши планы | Контент нашего сайта | Есть ошибки... | Технологии | Поддержать проект