Браузеры позволяют менять вид элементов HTML-документа после того, как
пользователь выполнил некоторые действия. В CSS для наиболее часто встречаю
щихся действий предусматривается три псевдокласса:
:hover применяется, когда пользователь выделяет некоторый элемент (как правило, с помощью мыши), но не активизирует его;
:active используется, когда пользователь активизирует элемент, например от
момента, когда он нажал кнопку мыши, до момента, когда он ее отпустил;
:focus применяется, когда элемент находится в «центре событий», например обрабатывает нажатия клавиш клавиатуры или другие типы ввода текста.
Сколько псевдоклассов могут одновременно сопоставляться элементу, например:
A: link { color: red } /* непросмотренные ссылки */
A: visited { color: blue } /* просмотренные ссылки */
A: hover { color: yellow } /* ссылка, над которой находится в данный момент
курсор */
Active { color: white } /* активные ссылки */
Обратите внимание, что правило А: hover должно располагаться после правил A: link и A:visited.
В противном случае правила каскадирования скроют свойство color правила А: hover. Аналогично, благодаря тому что правило А: active
находится после правила А: hover, активная ссылка отображается белым цветом когда пользователь устанавливает указатель поверх элемента А и одновременно активизирует его.
|
|
Псевдоэлемент:first-line
Псевдоэлемент:first-line задает стиль первой строки абзаца, например:
P:first-line { text-transform: uppercase }
Представленное выше правило делает буквы первой строки каждого абзаца заглавными. Селектор Р:first-line не соответствует ни одному реальному элементу HTML. Он сопоставляется псевдоэлементу, который браузеры будут помещать в начало каждого абзаца.
Обратите внимание, что длина первой строки зависит от множества факторов: от ширины страницы, размера шрифта и т. д. Поэтому типичный абзац HTML-документа выглядит так:
<Р>Этот длинный абзац HTML-документа будет разбит на несколько строк.</Р>
Строки этого абзаца будут преобразованы следующим образом:
это длинный абзац HTML-документа, будет разбит на несколько строк.
К псевдоэлементу:first-line применяются свойства шрифтов, цвета, фона,
word-spacing,letter-spacing,text-decoration,vertical-align,text-transform
line-height, text-shadow и clear.