
Стилизация ссылок с помощью CSS
Большинство браузеров покажут ссылки по умолчанию в синих и посещенных ссылках в фиолетовом. BOOOORING !!! Это, и фиолетовый просто не выглядит хорошо на некоторых людей. (См. Скучную ссылку без стиля). Но с небольшим количеством 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; }