Дизайн HTML-страниц. Язык CSS (ч.10)
@honey_and_moneyНа сегодня у нас псевдоклассы. Разберем большинство часто встречающихся и приведем примеры.
Итак, приступим:
: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 - Безделье - залог стабильного пресмыкания и унижения в жизни