CSS Ссылки

Разные ссылки могут иметь разные стили.

Стили ссылок

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

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

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

  • a:link - обычные, непосещённые ссылки
  • a:visited - ссылки, которые пользователь посетил
  • a:hover - когда курсор мыши пользователя находится над ссылкой
  • a:active - в момент клика по ссылке

Пример

a:link {color:#000000;} /*Непосещённая ссылка*/ a:visited {color:#0080FF;} /*Посещённая ссылка*/ 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:#8CC6FF;} a:visited {background-color:#FFFF85;} a:hover {background-color:#FF704D;} a:active {background-color:#FF704D;}

Попробуйте сами »

Examples

Другие примеры

Добавить гиперссылки с разными стилями
Этот пример демонстрирует, как добавить другие стили к гиперссылкам.

Продвинутый уровень — создание блока ссылок
Этот пример демонстрирует более сложный пример, в котором мы объединяем несколько свойств CSS для отображения в виде блока.

Другие расширения