Стили CSS

Тема: Ссылки. Псевдоклассы

Продолжаем разговор о ссылках которая будет вести на Ваш сайт, а хостинг для своего сайта Вы можете подобрать на hosting-for-site.ru/website-builders-top-10. В конце прошлого урока, для наглядности, я показал Вам, каких эффектов можно добиться, используя псевдоклассы. Давайте подробно остановимся на этом. Псевдоклассы дают возможность создать свой стиль для разных состояний одного и того же элемента.

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

Псевдокласс": link" используется для ссылок на страницы, которые пользователь ещё не посещал.

• Создаем стиль для этого состояния. Пусть ссылка, которую никто не беспокоит, будет просто синяя.
• Сохраняем таблицу стилей CSS и смотрим, что у нас получилось.
• Напоминаю, что ссылками у нас являются первые три заголовка. Как видите, они стали синими.
• Псевдокласс": visited" используется для ссылок на страницы, которые пользователь посетил.
• Добавим еще один стиль для всех наших ссылок. Пусть посещённая ссылка измениться в цвете и станет малиновая.
• Сохраняем таблицу стилей CSS и смотрим, что у нас получилось.

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

Псевдокласс": active" используется для активных ссылок.

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

Псевдокласс": hover" используется для ссылок, над которыми находится указатель мыши.

• Создаем четвертый стиль. Пусть, все буквы у такой ссылки станут заглавными; изменится ее цвет и цвет фона; а шрифт станет жирным.
• Сохраняем таблицу стилей, открываем браузер и смотрим на то, что мы нагородили.
• Все, мы создали стили для всех состояний ссылок. Наверное, Вы со мной согласитесь, что использование псевдоклассов намного расширяет возможности Web-дизайна. Здесь самое главное не переборщить, иначе сайт будет напоминать клумбу в период цветения.
• На этом мы заканчиваем со ссылками. Напоследок, посмотрите, как можно избавиться от подчеркивания в ссылках.
• Просто в нужные стили добавьте строчку: «text-decoration: none».
• Однако, удаляя подчеркивание, следует помнить о том, что пользователи привыкли видеть ссылки с чертой внизу.