Стилизация ссылок с помощью CSS

Большинство браузеров покажут ссылки по умолчанию в синих и посещенных ссылках в фиолетовом. BOOOORING !!! Это, и фиолетовый просто не выглядит хорошо на некоторых людей. (См. Скучную ссылку без стиля). Но с небольшим количеством CSS вы можете стилизовать свои ссылки любым способом.

  • Просмотров |

Большинство браузеров покажут ссылки по умолчанию в синих и посещенных ссылках в фиолетовом. BOOOORING !!! Это, и фиолетовый просто не выглядит хорошо на некоторых людей. (См. Скучную ссылку без стиля). Но с небольшим количеством CSS вы можете стилизовать свои ссылки любым способом.

Существует несколько состояний, в которых может быть ссылка:

  • link – default (так что ваша стандартная, никогда не нажатая ссылка)
  • visited link
  • focus – при вставке с клавиатуры
  • hover – когда курсор перемещается по ссылке
  • active – момент щелчка ссылки

Когда вы используете CSS для стилизации своих ссылок, этот точный порядок должен поддерживаться, или ваши стили могут работать неправильно. Я не говорю, что вы должны использовать все свойства, но те, которые вы используете, должны быть оформлены в этом порядке.

Есть несколько способов помочь запомнить этот порядок. Более распространенный, который не включает «фокус», — это LoVeHAte, а затем есть Бывшая Рукопись Лорда Вейдера «Анакин». Я уверен, что вы понимаете.

Очень легко добавить цвет к нашей ссылке и ее состояниям:

a:link {color: #006600;} (green)
a:visited {color: #FF0000;} (red)
a:focus {color: #9933CC;} (purple)
a:hover {color: #000099;} (blue)
a:active {color: #FF9933;} (orange)

Или мы можем играть с цветами фона и немного поучаствовать.

a:link {
	color: #006600;
	background: #CCFF99;
}
a:visited {
	color: #FF0000;
	background: #ff6633;
}
a:focus {
	color: #9933CC;
	background: #ffccff;
}
a:hover {
	color: #000099;
	background: #ccffcc;
}
a:active {
	color: #FF9933;
	background: #ffff00;
}
ТЕГИ:

Добавить комментарий

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Авторизация
*
*
Регистрация
*
*
*
Генерация пароля