| Kosten | Среда, 14 Февраля 2018, 01:01 | Сообщение 1 |
| Один цвет может использоваться для текста привязки гиперссылки и другого цвета для подчеркивания. Это удобно, если вам не нужны стандартные цвета по умолчанию для ссылки и посещенной ссылки. Одним из основных преимуществ использования внешней таблицы стилей является то, что вы можете контролировать все гиперссылки всего веб-сайта. Еще одно хорошее преимущество заключается в том, что многие интересные эффекты гиперссылки могут быть улучшены, чтобы улучшить внешний вид вашего сайта.
Инструкции для внешней таблицы стилей.
Использование CSS для создания пользовательских текстовых гиперссылок проще, чем вы думаете.
При использовании CSS для ссылок на страницы существует четыре параметра свойств, и важно, чтобы они были размещены в следующем порядке.
1. Ссылка. Это ссылка по умолчанию на странице.
2. Посещенные. Показывает, что страница уже просмотрена.
3. Hover - цвет меняется, когда над ним помещается мышь.
4. Актив - Мышь находится по ссылке, а левая кнопка мыши нажата и удерживается.
Использование параметра «Актив» довольно бессмысленно, потому что оно не поддерживается всеми браузерами, поэтому я опустил его на своих примерах.
Существует несколько способов создания этого эффекта и приведенные ниже шаги являются лишь небольшим примером.
Стандартная гиперссылка CSS
Код <style type="text/css">
a:link {color: #CC0000;}
a:visited {color: #FF6600;}
a:link:hover {color: #FF6633;}
</style>
Теперь вы можете пойти немного дальше, добавив свойства, такие как полужирный, подчеркивающий, оверлейный и обычный, используя шрифт-вес и текстовое оформление и закончите с чем-то вроде:
Код <style type="text/css">
a:link {
color: #CC0000;
font-weight: normal;
text-decoration: none;
}
a:visited {
color: #FF6600;
font-weight: bold;
text-decoration: underline;
}
a:link:hover {
color: #400000;
font-weight: bold;
text-decoration: none;
}
</style>
Использование гиперссылок разных форматов на одной странице.
Нужно было создать еще один набор правил текстовой гиперссылки, который будет отображаться только внутри моего окна меню, в то время как мои стандартные правила будут отображаться только в моей основной области содержимого. Ниже приведен код, который можно использовать.
Код <style type="text/css">
.hyperlink2 a:link {
color: #004000;
text-decoration: underline;
}
.hyperlink2 a:visited {
color: #FF0000;
text-decoration: underline;
}
.hyperlink2 a:link:hover {
color: #FFFFFF;
text-decoration: none;
}
.hyperlink2 a:active {
color: #FF99CC;
text-decoration: underline;
}
</style>
Просто скопируйте приведенный выше код и поместите его над тегом /HEAD на своей странице.
Единственное различие заключается в том, что я поместил .hyperlink2 перед каждым правилом, чтобы теперь у меня было 2 совершенно разных форматированных текстовых ссылок.
У вас может быть несколько разных наборов для разных цветных фонов, выбор за вами.
Ниже приведен пример того, как использовать новые цвета ссылок в DIV:
Код <div class="hyperlink2" align="center"><p><a href="coffeecup.html">Coffeecup Coupon Code</a></p></div>
Одна вещь, которую вы возможно заметили в приведенном выше коде, что я использовал тег a:active, это работает только в IE и NS и только означает, что если вы наведите указатель мыши на ссылку и нажмите кнопку мыши, ссылка будет показана с помощью строка выше и ниже, на самом деле не имеет большого смысла.
Экспериментируя с приведенными выше примерами вы сможете иметь свои ссылки соответствующие вашим текущим цветам вашей веб-страницы.
| | Страна: (RU) |
| |
