Створення сайтів - студія веб-дизайну WebStudio2U Контактні дані веб-студії WebStudio2U RSS стрічка веб-студії 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> у цій статті:

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