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> у цій статті:
Теги:
псевдокласи,
псевдоелементи,
таблиці стилів,
стилі,
відображення,
динамічні |