Стилінг Посилання з CSS

У більшості браузерів посилання за умовчанням відображаються синіми та відвідуваними посиланнями з фіолетовим кольором. БУДІВНИЦТВО !!! Це, і фіолетовий просто не виглядає добре для деяких людей. (Див. Нудну посилання без стилю) Але з невеликою кількістю CSS ви можете стильувати свої посилання будь-яким способом.

Існує декілька станів, у яких може бути посилання:

• link – за замовчуванням (так що ваш стандартний, ніколи не натискав посилання)
• visited link
• focus – при вкладенні в клавіатуру
• hover – коли курсор переміщується над посиланням
• active – момент натискання посилання

Коли ви використовуєте CSS для стилю своїх посилань, це точне замовлення повинно бути збережене, або ваші стилі можуть працювати неправильно. Я не кажу, що вам потрібно використовувати всі властивості, але ті, що ви використовуєте, повинні бути стилізовані в цьому порядку.

Існує кілька способів допомогти запам’ятати цей порядок. Найбільш поширеною, яка не включає “фокус”, є LoVe – HAte, а потім є колишня рука Лорда Вейдера Anakin. Я впевнений, що ви зрозуміли.

Це дуже легко додати який-небудь колір для нашого посилання та його станів:

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