Лекционный и практический материал по теме "Ссылки с помощью 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;} /* ссылка в момент щелчка мышью */
Тип материала: | Документ Microsoft Word (docx) |
---|---|
Размер: | 364.63 Kb |
Количество скачиваний: | 11 |