Лекционный и практический материал по теме Ссылки с помощью CSS

С помощью CSS вы можете изменить внешний вид ссылок.   Стилизация ссылок В CSS вы можете изменить любое свойство ссылок (например, цвет, шрифт, цвет фона). Кроме того, для ссылок можно настроить стили, в зависимости от их состояния. Четыре состояния ссылок: ·       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;} /* ссылка в момент щелчка мышью */