Хотите, чтобы ваши ссылки не выглядели уныло-подчёркнутыми?
Для этого Каскадные таблицы стилей (CSS) имеют ряд дополнений при использовании ссылок: их можно раскрасить в любые цвета, можно убрать подчёркивание, можно выделить ссылку двумя горизонтальными линиями, можно увеличить высоту шрифта при наведении на неё курсором и многое другое.
Всё зависит от Вас и Вашей фантазии!
Разберём кусочек кода из таблице стилей CSS сайта Ucoz.
Открываем: Панель Управления --->Управление дизайном ---> Таблица стилей (CSS), находим код:
Code
/* General Style */
a:link {text-decoration:underline; color:#FFFFFF;}
a:active {text-decoration:underline; color:#FFFFFF;}
a:visited {text-decoration:underline; color:#FFFFFF;}
a:hover {text-decoration:none; color:#FFFFFF;}
Этот кусочек кода отвечает за оформление практически всех ссылок а сайте!
Для начала давайте разберём этот код:
a:link- неактивированная ссылка;
a:active- ссылка активированная в данный момент;
a:visited- ссылка активированная ранее (посещённые ссылки);
a:hover- ссылка при наведении указателя мыши;
color:#FFFFFF; - отвечает за цвет соответствующей ссылки. В нашем примере все ссылки имеют белый цвет.
text-decoration: - этот параметр отвечает за стиль соответствующей ссылки, имеет следующие значенияч:
text-decoration:underline; - ссылка подчёркнута;
text-decoration:none; - ссылка не подчёркнута;
text-decoration: underline overline;} - ссылка подчёркнута вверху и внизу;
text-decoration:line-through;} - ссылка зачёркнута;
значение
border-bottom: 2px dashed; - пунктирное подчёркивание внизу с тощиной 2 пикселя;
где 2px dashed означает,что линия будет пунктирной с тощиной 2 пикселя, а border-bottom
проводит наш пунктирчик снизу.
Пример:
Code
a:hover {color:#ff0000; border-bottom: 2px dashed;}
Ну а сейчас сделаем так, чтобы ссылка при наведении на неё курсором выделялась другим цветом, например, синим. Допишем в свойстве a:hover следующее background:#0000ff
Code
a:hover {color:#ff0000; text-decoration:none;background:#0000ff;}
Ну и напоследок давайте выделим нашу ссылочку рамкой, для чего нам понадобятся обработчики событий onMouseOver (указатель мыши находится на ссылке) и onMouseOut(указатель мыши находится вне ссылки).
Code
<table id=table1 onMouseOver="table1.border='2'" onMouseOut="table1.border='0'" border='0'>
<tr> <td>
<a href=#.html>ССЫЛКА</a>
</td></tr></table >
Материалы на эту же тему:
Создание красивого раздвижного меню для сайта
Основные атрибуты и свойства фона - background
Основные Мета тэги
Создание рамки с помощью FIELDSET
Границы при помощи border
Коды для вставки изображения в страницу
