Ссылки CSS

С помощью CSS можно устанавливать стиль ссылки различными способами.

Текстовая ссылка Текстовая ссылка Кнопка-ссылка Кнопка-ссылка

Настройка стиля ссылки

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

пример

a {
  color: hotpink;
}

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

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

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

  • a:link - Стандартная, не посещенная ссылка
  • a:visited - Ссылка, которую уже посещал пользователь
  • a:hover - Когда пользователь наводит курсор на ссылку
  • a:active - Когда ссылка нажата

пример

/* Ссылка, которую еще не посещал пользователь */
a:link {
  color: red;
}
/* Ссылка, которую уже посещал пользователь */
a:visited {
  color: green;
}
/* Наложение мыши на ссылку */
a:hover {
  color: hotpink;
}
/* Выбранная ссылка */
a:active {
  color: blue;
}

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

Если устанавливается стиль для нескольких состояний ссылок, следуйте следующим правилам последовательности:

  • 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: yellow;
}
a:visited {
  background-color: cyan;
}
a:hover {
  background-color: lightgreen;
}
a:active {
  background-color: hotpink;
}

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

Кнопка-ссылка

Этот пример демонстрирует более сложный пример, в котором мы комбинируем несколько свойств CSS, чтобы показать ссылки как блоки/кнопки:

пример

a:link, a:visited {
  background-color: #f44336;
  color: white;
  padding: 14px 25px;
  text-align: center; 
  text-decoration: none;
  display: inline-block;
}
a:hover, a:active {
  background-color: red;
}

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

Более примеров

Добавление различных стилей к гиперссылкам
Этот пример демонстрирует, как добавить другие стили к гиперссылкам.
Уровень 2 - Создание рамки для кнопки ссылки
Это еще один пример создания рамки/кнопки для ссылок.
Изменение курсора
Свойство cursor определяет тип курсора, который нужно отображать. В этом примере показаны различные типы курсоров (полезны для ссылок).