Дизайн HTML-страниц. Язык CSS (ч.10)

На сегодня у нас псевдоклассы. Разберем большинство часто встречающихся и приведем примеры.

Итак, приступим:

:hover - применяет стиль, когда пользователь наводит на элемент.

Напомню структуру нашей странички.

html-код вот такой:

CSS стили такие:

Тут обратим внимание на то, что селектор для параграфа <p> я описал два раза.

Все дело в том, что вам надо описать дизайн для обычного элемента, когда с ним никто ничего не делает.

Ну и соответственно если мы хотим, чтобы при наведении курсора на параграф с ним что-то менялось, нам надо еще раз описать этот тэг, только уже с псевдоклассом :hover

Работает это так: браузер понимает, когда на элемент наведен курсор, а когда нет. В зависимости от положения курсора применяются разные стили.

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

Что можно рассмотреть дальше? Например работа с активными элементами на странице. Это кнопки, ссылки, формы и так далее.

Разберем пример на ссылках:

:active - цвет ссылки, когда происходит нажатие на нее

:link - цвет непосещенных ссылок

:visited - цвет посещенных ссылок

Для теста напишем такой CSS для тэга <a>:

Ну и добавим ссылку в html-код:

Что мы видим на странице: если вы только на нее зашли и еще не кликали по ссылке, то ее цвет будет синим, если вы кликните по ней и задержите левую кнопку мыши - ссылка станет красной. Ну а когда отпустите, ссылка станет посещенной и будет оранжевая.

Да, забыл рассказать, почему в атрибуте href стоит решетка.

Это так называемый якорь - ссылка, которая никуда не ведет. Обычно так делают на этапе разработки сайта - например если вы еще не написали страницу, на которую ведет ссылка, но на главной странице вам уже надо разместить ссылку на эту страницу - спокойно ставьте в атрибут href этот якорь (решетку)

Ну и на последок псевдоклассы удобные для создания форм, кнопок и всего в этом роде:

:disabled - по элементу нельзя кликнуть

:enabled - с элементом можно делать все что угодно.

Создадим простенькую форму:

Тут нам даже не понадобится CSS-файл. Псевдокласс :disabled можно добавить в качестве атрибута к любому элементу, который подразумевает любые действия.

В нашем случае мы добавили атрибут disabled кнопке.

Выглядит это так:

На кнопку не нажмешь.

Псевдокласс enabled нужен для изменения атрибута тэга с disabled на enabled

Это делается с помощью JavaScript и говорить об этом будем позже.

Как это применяется: например пока человек не заполнил оба поля для логина и пароля, он не может нажать на кнопку. Как только заполнил - атрибут меняется на enabled и кнопка становится доступной.

@honey_and_money - Безделье - залог стабильного пресмыкания и унижения в жизни