Урок №8: оформление ссылок в CSS
С помощью таблиц стилей можно оформить ссылку в зависимости от ее состояния. В HTML возможно только изменить цвет ссылки, и назначить в качестве ссылку изображение. В CSS, возможностей оформить ссылки намного больше. Можно изменить цвет, , шрифт, убрать подчеркивание, более того все это можно задать каждому состоянию ссылки отдельно.
Существует четыре состояния ссылки:
- a:link - изначальный вид ссылки
- a:visited - посещенная пользователем ссылка
- a:hover - вид ссылки, когда на нее наведен курсор мышки
- a:active - активная ссылка, на которую кликнули
Стоит запомнить, при редактировании оформления ссылок, необходимо задавать параметры именно в таком порядке. Особенно в случае с hover и active.
Подчеркивание ссылки
Как вы уже заметили, по правилу хорошего тона, все ссылки подчеркиваются горизонтальной линией снизу. С помощью атрибута text-decoration такое подчеркивание можно убрать. Также с ссылками работают все значения этого атрибута. Данный атрибут, со всеми его значениями, уже рассматривался на уроке: Форматирование текста в CSS, подзаголовок - Декорации текста. Поэтому сразу перейдем к примеру.
a:link {text-decoration:none; color:red;} /* не посещенная красная ссылка без подчеркивания */
a:visited {text-decoration:line-through; color:black;} /* посещенная перечеркнутая черная ссылка*/
a:hover {text-decoration:overline; color:green;} /* при установке курсора мыши над ссылкой, она становится зеленой*/
a:active {text-decoration:underline;} /* подчеркнутая активная ссылка */
|
В примере ясно показаны все состояния ссылок, и влияние на них атрибута text-decoration; цвет ссылки также будет меняться, в зависимости от ее состояния.
Фон ссылки
Цвет фона ссылки задается с помощью свойства background-color. Также можно использовать в качестве фона ссылки - изображение, с помощью свойства background-image (однако это совсем неактуально). Добавим в наш css документ фон, для каждого состояния ссылки:
a:link {background-color:#B2FF99;}
a:visited {background-color:#FFFF85;}
a:hover { background-color:#FF704D;}
a:active {background-color:#FF704D;}
|
На примере видно, что фон ссылки будет меняться, в зависимости от состояния ссылки.
Стиль ссылок
Ссылку как и текст можно отформатировать такими свойствами: font-family - задаст шрифт ссылки, font-size - задаст размер ссылки, font-style - задаст стиль ссылки, font-weight - сделает ссылку жирной, text-shadow - тень ссылки, и другие. Используем эти свойства для украшения внешнего виды ссылки:
a {font-size: 17px; font-weight:bold; color: #00B200; background-color: #E0FFFF; text-decoration: none;}
a:hover { font-style: normal; font-weight:bold; background-color: red; text-decoration: underline;}
|
Достаточно отредактировать эти два селектора для красивого оформления ссылок. Конечно подчеркивание ссылок лучше не убирать, так как посетители могут запутаться, но бывают случаи, когда для лучшего внешнего вида сайта, это необходимо(например, меню или блоки сайта).
На следующем уроке научимся управлять списками с помощью таблиц стилей: Списки в CSS
| 
R598551293139
