Ссылки


назад вперед

С помощью CSS вы можете изменить внешний вид ссылок.


Стилизация ссылок

В CSS вы можете изменить любое свойство ссылок (например, цвет, шрифт, цвет фона).

Кроме того, для ссылок можно настроить стили, в зависимости от их состояния.

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

Пример

a:link {color:#FF0000;} /* непосещенная ссылка */
a:visited {color:#00FF00;} /* посещенная ссылка */
a:hover {color:#FF00FF;} /* ссылка, над которой находится курсор мыши */
a:active {color:#0000FF;} /* ссылка в момент щелчка мышью */

Посмотреть

При настройке стилей для ссылок надо соблюдать следующие правила:


Основные стили ссылок

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

Давайте теперь рассмотрим другие виды стилизации ссылок.

Оформление текста

Свойство 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;} /* ссылка в момент щелчка мышью */

Посмотреть


Примеры

Стилизация ссылок

Добавление различных стилей ссылкам.

Отображение ссылки как кнопки

В этом примере комбинирование свойств CSS позволяет отобразить ссылку как кнопку, что позволит позже сделать ее пунктом меню.



Поисковой портал Jooble - позволяет в один клик найти любую интересующую вакансию по всему интернету.

Понравилась запись? Сказать "Спасибо" очень просто, поделитесь записью в социальных сетях!


назад вперед

СТАТИСТИКА



ССЫЛКИ


Подпишись на новости сайта