Как стилизовать ссылки с помощью CSS

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

Большинство веб-дизайнеров начинают с определения стиля тега:

{цвет: красный; }

Это будет стилизовать все аспекты ссылки (наведенный, посещенный и активный). Чтобы стилизовать каждую часть отдельно, вы должны использовать псевдоклассы.

Link псевдо-классы

Существует четыре основных типа псевдоклассов ссылок, которые вы можете определить:

• : ссылка — это стиль по умолчанию для ссылки
• : посещено — после нажатия на ссылку
• : hover — как мышь находится над ссылкой (предварительный щелчок)
• : active — прямо при нажатии на ссылку

Чтобы определить псевдокласс класса ссылки, используйте его с тегом в вашем селекторе CSS. Итак, чтобы изменить посещенный цвет всех ваших ссылок на серый, напишите:

a: посетил {цвет: серый; }

Если вы создаете стиль псевдокласса с одной ссылкой, это хорошая идея, чтобы стилизовать их все. Таким образом, вы не будете удивлены посторонними результатами. Так что, если вы просто хотите изменить посещаемый цвет на серый, а все остальные псевдо-свойства ваших ссылок остаются черными, вы должны написать:

a: ссылка, a: hover, a: active {цвет: черный; }
 a: посетил {цвет: серый; }

Изменить цвета ссылок

Самый популярный способ стилизации ссылок — это изменение цвета, когда курсор мыши над ним:

a {color: # 00f; }
 a: hover {color: # 0f0; }

Но не забывайте, что вы можете влиять на то, как ссылка выглядит, когда они нажимают на нее, с помощью свойства: active:

a {color: # 00f; }
 a: active {color: # f00; }

Или как выглядит ссылка после того, как вы ее посетили с помощью свойства: посещения:

a {color: # 00f; }
 а: посетил {цвет: # f0f; }

Чтобы сложить все вместе:

a {color: # 00f; }
 а: посетил {цвет: # f0f; }
 a: hover {color: # 0f0; }
 a: active {color: # f00; }

Поместите фон в ссылки, чтобы добавить значки или маркеры

Немного поиграв с фоном, вы можете создать ссылку с соответствующим значком. Выберите иконку маленького размера, примерно 15 на 15 пикселей, если ваш текст не будет больше. Поместите фон с одной стороны ссылки и установите параметр повтора, чтобы не повторяться. Затем вставьте ссылку так, чтобы текст внутри ссылки был перемещен достаточно далеко влево или вправо, чтобы увидеть значок.

{
 отступы: 0 2px 1px 15px;
 фон: #fff url (ball.gif) левый центр без повтора;
 цвет: # c00;
 }

После того, как у вас есть значок, вы можете установить другое изображение в качестве вашего всплывающего, активного и посещенного значков, чтобы изменить ссылку:

{
 отступы: 0 2px 1px 15px;
 фон: #fff url (ball.gif) левый центр без повтора;
 цвет: # c00;
 }
 a: hover {
 фон: #fff url (ball2.gif) левый центр без повтора;
 }
 a: active {
 фон: #fff url (ball3.gif) левый центр без повтора;
 }

Сделайте ваши ссылки похожими на кнопки

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

{
 граница: 4px;
 обивка: 2px;
 текстовое оформление: нет;
 }
 a: active {
 рамка: вставка 4px;
 }

Обратите внимание, что когда вы размещаете цвета в стилях outset и inset, браузеры не будут отображать их так, как вы ожидаете. Итак, вот интересная кнопка с цветными рамками:

{
 стиль границы: твердый;
 ширина границы: 1px 4px 4px 1px;
 текстовое оформление: нет;
 обивка: 4px;
 цвет границы: # 69f # 00f # 00f # 69f;
 }

И вы также можете влиять на наведение и активные стили ссылки кнопки, просто используйте эти псевдоклассы:

ссылка {
 стиль границы: твердый;
 ширина границы: 1px 4px 4px 1px;
 текстовое оформление: нет;
 обивка: 4px;
 цвет границы: # 69f # 00f # 00f # 69f;
 }
 a: hover {border-color: #ccc; }