CSS. Псевдоклассы и псевдоэлементы
|
Многие начинающие веб-разработчики знают и используют в своих проектах таблицы каскадных стилей (CSS), но не многие знают о существовании псевдоклассов и псевдоэлементов. Псевдоклассы и псевдоэлементы позволяют задать собственные стили отображения для элементов <A> и <P>.
Псевдоклассы элемента <A> (ссылок):
A:link { Стиль элемента }
A:visited { Стиль элемента }
A:link - непосещенная ссылка, A:visited - стиль отображения ссылки которую вы уже посещали.
Пример:
Посещенная ссылка
Непосещенная ссылка
Динамические псевдоклассы
Для ссылок, на которые наведен курсор мыши, активизированных и получивших фокус:
A:hover { Стиль элемента }
A:active { Стиль элемента }
A:focus { Стиль элемента }
A:hover - задает стиль элемента <A> при наведении курсора, A:active - активизированная ссылка (кнока мыши уже нажата, попробуйте перетащить ссылку мышкой), A:focus - если ссылка в фокусе (передача фокуса ссылке любым путем, например, при переходе по ссылкам кнопкой Tab).
Пример:
Отображение ссылки при наведении, активизации и при получении фокуса
При наведении цвет фона ссылки #02924c, при активизации цвет фона изменится на #ff0113, а при получении фокуса стиль шрифта текста ссылки изменится на с наклоном.
Псевдоэлементы
P:first-line { Стиль элемента }
P:first-letter { Стиль элемента }
P:first-line - задает стиль отображения первой строки, P:first-letter - стиль первой буквы.
Пример:
Первая буква и первая строка.Первая буква и первая строка.Первая буква и первая строка.
Вторая строка.Вторая строка.Вторая строка.
Третья строка. Третья строка. Третья строка.
Четвертая строка. Четвертая строка. Четвертая строка.
Стили элементов <A> и <P> в этой статье:
Теги:
псевдоклассы,
псевдоэлементы,
таблицы стилей,
стили,
отображение,
динамические |
разработка сайта 
