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

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

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

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

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

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

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

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;
}