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

Декоративное нижняя полоска в контенте у ссылок

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

Можно создать свой собственный вид подчеркивания ссылок, используя для этого графическое изображение. Рисунок подойдет не всякий, он должен обладать двумя качествами:

Высоту линии можно сделать и больше трех пикселов, если добавляем к селектору A параметр padding.

На рис. 1 показно исходное изображение, которое годится для разработки подчеркивания, а также его увеличенный вариант.

 

Рис. 1. Картинка для разработки подчеркивания у ссылки

После разработки рисунка в графическом редакторе, следует определить стиль, как показано в примере 1. Основным элементом для установки линии выступает стилевой параметр background. Это универсальный атрибут, который определяет характеристики фонового Имаги, в частности, путь к графическому файл, а также смещение фона относительно левого верхнего угла элемента. В данном случае требуется только сдвинуть фоновый рисунок вниз на высоту контента, для этого используется относительная единица em, равная высоте шрифта элемента. Кроме того, чтобы рисунок повторялся только по горизонтали, добавляем к параметру background аргумент repeat-x.

Пример 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 {
text-decoration: none; /* Убираем нижняя полоска в контенте у ссылок */
padding: 3px; /* Поля вокруг контента ссылки */
white-space: nowrap; /* Нет переноса контента */
}

A:hover {
background: url('/images/arrow.gif') /* Картинка для подчеркивания */
0 1.1em /* Смещение рисунка по горизонтали и вертикали */
repeat-x; /* Повторение фона по горизонтали */
}
</style>
</head>
<body>

<p><a href="link1.ШТМЛ">Ссылка 1</a></p>
<p><a href="link2.ШТМЛ">Ссылка 2</a></p>
<p><a href="link3.ШТМЛ">Ссылка 3</a></p>

</body>
</html>

Если контент ссылки дастаткова длинный и занимает две и более строки, то рисунок отображается только под первой строкой. Чтобы ликвидировать эту особенность, для селектора A введен атрибут white-space со значением nowrap, он отменяет переносы в контенте и отображает его одной строкой. Учтите, что при этом возможно появление горизонтальной полосы прокрутки. Это, пожалуй, единственный недостаток данного способа, который следует принимать во внимание.

Путь к изображению указывается с помощью ключевого слова url, после которого в скобках пишется адрес рисунка. Число 0 в данном примере означает смещение Имаги по горизонтали, а 1.1em — вниз по вертикали. Вы можете незначительно менять это число в ту или иную сторону, подбирая наилучший вариант в зависимости от используемого рисунка. Окончательный результат использования графической линии в ссылках показан ниже.

Ссылка 1 | Ссылка 2 | Ссылка 3

В примере у ссылок убирается нижняя полоска в контенте (text-decoration: none), чтобы оно не мешало восприятию. К тому же классическая линия под контентом плохо сочетается с линией декоративной.

Интересный эффект можно получить, если использовать анимированное изображение. Например, в качестве подчеркивания добавляем статичный рисунок, а при наведении на ссылку он будет меняться на другой. Для этого уже потребуется две картинки, первая показана на рис. 1, а вторая, статичная приведена на рис. 2.

 

Рис. 2. Картинка для анимации линии подчеркивания

После чего добавление линии происходит, как уже было описано в примере 1, за исключением того, что фоновый рисунок устанавливается для селектора A и псевдокласса hover (пример 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 (ЦСС)">
A {
text-decoration: none; /* Убираем нижняя полоска в контенте у ссылок */
padding: 3px; /* Поля вокруг контента ссылки */
background: url('/images/arrow1.gif') /* Путь к исходному изображению */
0 1.1em repeat-x; /* Положение фона */
}

A:hover {
background: url('/images/arrow2.gif') /* Путь к анимированному изображению */
0 1.1em repeat-x; /* Положение фона */
}
</style>
</head>
<body>

<p><a href="link1.ШТМЛ">Ссылка 1</a></p>
<p><a href="link2.ШТМЛ">Ссылка 2</a></p>
<p><a href="link3.ШТМЛ">Ссылка 3</a></p>

</body>
</html>
У стилевого параметра background для разных селекторов меняется только значение url. Остальные аргументы совпадают, чтобы не произошло смещения рисунков. Полученный результат данного примера показан ниже.
Ссылка 1 | Ссылка 2 | Ссылка 3
Статья опубликована: 03.10.2009 Последнее обновление: 16.04.2009
Поиск по сайту
FAQ CSS (ЦСС)
Разделы
Теги по теме

A
Тег A является одним из важных элементов ШТМЛ и предназначен для разработки ссылок. В зависимости от присутствия параметров name или href тег A устанавливает ссылку или якорь.

CSS (ЦСС) по теме

background
Параметр позволяет установить одновременно до пяти атрибутов стиля фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному атрибуту.

padding
Устанавливает значение полей вокруг содержимого элемента. Полем имеется ввиду расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое.

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

white-space
Параметр white-space устанавливает, как отображать пробелы между словами.

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

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