Ссылки и псевдоклассы в CSS

Ссылки и псевдоклассы

Для создания серьезного сайта базовых знаний о ссылках в html вам будет недостаточно, для дальнейшего развития нам необходимо изучить ссылки и пседвоклассы в CSS. Эта тема достаточно простая, но при этом очень часто применимая на практике, так что я бы посоветовал вам, понять все тонкости до конца.

Итак, что такое псевдоклассы это вспомогательные элементы селекторов которые определяют динамическое состояние, которое изменяется от действий пользователя, а так же от положения в дереве тэгов. Определение достаточно мудреное, поэтому лучше всего разберем все поэтапно иначе даже я сам бы запутался. Для начала давайте разберем, какие виды бывают:

:active - Срабатывает при наведении или нажатии курсора мыши на элемент, в нашем случае мы рассматриваем ссылки.

:hover -Активизируется когда курсор мыши находится в пределах элемента.

:link - Применяется к не посещенным ссылкам, именно к тем на которые вы еще не нажимали, хотя могли уже посещать данную страницу.

:visited - Меняет вид посещенной ссылки, обычно такие ссылки меняют свой цвет на фиолетовый, но вы можете настроить все по своему.

Применяются псевдоклассы в коде очень легко:

селектор:псевдоклассы { правила для них }

Давайте теперь посмотрим непосредственно на практике как можно применить эти знания:

<!Doctype html>
<html lang="ru-RU">
<head>
<meta charset=windows-1251>
<title>Ссылки и псевдоклассы в CSS</title>
<style type="text/css">
a:link {
color: #000000;
}
a:active {
color: #ff0000;
}
a:hover {
color: #56c434;
font-size: 25px;
}
a:visited {
color: #adc4ee;
}
</style>
</head>
<body>
<p>3 Вида псевдоклассов для ссылок</p>
<a href="#">Ссылка 1</a>
<a href="#1">Ссылка 2</a>
<a href="#2">Ссылка 3</a>
</body>
</html>

И в этом видео для наглядности я продемонстрирую как этот код работает:

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

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

Дата публикации:2014-07-29

Буду очень признателен, если вы поделитесь ссылкой на страницу со своими друзьями в социальных сетях.
Если у вас возникнут вопросы по теме пишите, надеюсь у вас все получиться, удачи вам и всего наилучшего!

Автор: Алексей Мезенцев