ВЕБУЧЕБНИКИ

Оформление ссылок

Ссылки могут быть оформлены с помощью любого CSS свойства (например color, font-family, background и т.д.).

Особенность оформления ссылок в том, что они могут быть оформлены различными способами в зависимости от состояния, в котором они находятся.

Четыре состояния ссылки это:

• a:link - обычная, не посещенная ссылка;

• a:visited - ссылка, которую пользователь уже посетил;

• a:hover - ссылка, над которой находится курсор мыши;

• a:active - ссылка, на которую в данный момент кликнули.

Пример:

a:link {color:#FF0000;} /* непосещенная ссылка */

a:visited {color:#00FF00;} /* посещенная ссылка */

a:hover {color:#FF00FF;} /* курсор мыши над ссылкой */

a:active {color:#0000FF;} /* выбранная ссылка */

При установке стиля для нескольких состояний ссылки, есть несколько порядковых правил, а именно:

• a:hover ДОЛЖНО идти после a:link и a:visited;

• a:active ДОЛЖНО идти после a:hover.

Способы оформления ссылок

В примере выше ссылка меняет цвет в зависимости от состояния, в котором она находится.

Ниже приведены другие способы оформления ссылок.

Декорация текста

Свойство text-decoration в основном используется для удаления подчеркивания из ссылок:

Пример:

a:link {text-decoration:none;} /* непосещенная ссылка */

a:visited {text-decoration:none;} /* посещенная ссылка */

a:hover {text-decoration:underline;} /* курсор мыши над ссылкой */

a:active {text-decoration:underline;} /* выбранная ссылка */

нажмите чтобы увидеть результат

Цвет фона

Свойство background-color указывает цвет фона для ссылок:

Пример:

a:link {background-color:#B2FF99;} /* непосещенная ссылка */

a:visited {background-color:#FFFF85;} /* посещенная ссылка */

a:hover {background-color:#FF704D;} /* курсор мыши над ссылкой */

a:active {background-color:#FF704D;} /* выбранная ссылка */

нажмите чтобы увидеть результат