Виды состояний ссылок и как работать с ними в CSS

Виды состояний ссылок и как работать с ними в CSSЗдравствуйте мои уважаемые читатели блога webmasterprof.ru. Сегодня очередная заметка на тему CSS. И сегодня мы посмотри, как работать со ссылками в CSS.

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

В сегодняшней статье, я покажу вам, какие состояния бывают у ссылок и как с ними работать.

Подобно тому, как в программировании оперируют разными свойствами объектов в css можно настроить работу разных состояний ссылок.

Что это еще за состояния?

Обычная ссылка — Link

То есть ссылка, на которую еще не нажимали и которая ведет на какую-то страницу вашего сайта.

В css для работы с такими ссылками есть псевдокласс link

Не пугайтесь никаких сложностей и сходств с программированием вы не увидите.

Для того, что бы задать свойство такой ссылки достаточно написать:

1
a:link { правила}

Пример:

для смены цвета ссылок достаточно написать

1
а:link {color: #FF0000;}

#FF0000 – это красный цвет, для получения цифрового кода цветов можно воспользоваться программой html colors 2000.

Псевдокласс link присвоен ссылкам по умолчанию, то есть его писать не обязательно.

Эти две строки одинаковы:

1
2
a { правила}
a:link { правила}

Посещенная ссылка – visited

Visited – позволяет изменить внешний вид ссылок которые пользователь уже посетил.

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

Виды состояний ссылок и как работать с ними в CSS

Вот такой код нужен для обращения к этому состоянию ссылки:

1
a: visited { правила}

Пример:

для смены цвета ссылок, которые уже были посещены, нужно внести такой код:

1
а:visited {color: #3333FF;}

Cсылка с наведенным курсором – hover

С помощью этого псевдокласса можно повысить интерактивность вашего сайта. И реализовать что-то на подобии анимации.

Код:

1
a:hover { правила}

Пример:

Если мы хотим, что бы при наведении мыши ссылка сменила цвет и получила подчеркивание, то пишем следующее

1
a: hover { color:# #0066FF;text-decoration:underline}

Активная ссылка -active

Активная ссылка — когда пользователь на нее нажал, но не отпустил.

Зачем спросите вы это состояние? Если большинство его даже не успеет заметить.

Ответ один: для гибкости в разработке.

Допустим с помощью разных изображений можно реализовать анимацию нажатия настоящей кнопки.

  • Обычное состояние: просто кнопка (изображение)
  • Подвел курсор: она выделилась
  • Нажал: вдавилась внутрь (опять же достигается с помощью другого изображения)
  • Отпустил: кнопка вернулась в первоначальное состояние

Код:

1
a:active { правила}

Пример:

Если мы хотим, что бы при нажатии мыши ссылка сменила цвет и получила подчеркивание, то пишем следующее

1
a:active { color:#3FAEE0;text-decoration:underline}

Итоговый наш код получиться такой:

1
2
3
4
а {color: #FF0000;}
а:visited {color: #3333FF;}
a: hover { color:# #0066FF;text-decoration:underline}
a: active { color:#3FAEE0;text-decoration:underline}

Думаю, Вы как веб мастер оценили все прелести работы с псевдоклассами. Все это при правильном подходе позволяет сделать ваш сайт более удобным для посетителей.
На этом все. Удачи!!!

На закуску видео о том, что может вытворять человек:

Автор:
Приглашаю присоединиться ко мне в следующих сервисах:
Получайте новые статьи по созданию сайтов на ваш почтовый ящик.

Комментарии Вконтакте:

Комментарии Facebook:

Комментариев2 комментария

Отличная статья Спасибо огромное

Nadezda Krivohizina
2

А можно ли вязать эту статью на свой сайт если оставить на вас ссылку?

Написать ответ

Получай обновления блога первым!
Каталог@Mail.ru - каталог ресурсов интернет