Создание и раскрутка сайтов - веб-студия WebStudio2U Написать письмо в студию веб-дизайна WebStudio2U Авторизация Лента новостей студии веб-дизайна WebStudio2U Карта сайта

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> в этой статье:

Теги:
псевдоклассы, псевдоэлементы, таблицы стилей, стили, отображение, динамические