| Псевдоэлементы позволяют задать стиль элементов не определенных в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста. |
Синтаксис использования псевдоэлементов следующий.
Селектор:Псевдоэлемент { Описание правил стиля }Вначале следует имя селектора, затем пишется двоеточие, после которого идет имя псевдоэлемента.Каждый псевдоэлемент может применяться только к одному селектору, если требуется установить
сразу несколько псевдоэлементов для одного селектора, правила стиля должны добавляться к ним по
отдельности, как показано ниже.
.foo:first-letter { color: red } .foo:first-line {font-style: italic}В CSS3 чтобы различать псевдоклассы и псевдоэлементы, перед именем псевдоэлемента ставится два двоеточия (::after). Internet Explorer игнорирует подобную запись, остальные браузеры корректно её понимают.Псевдоэлементы не могут применяться к внутренним стилям, только к таблице связанных или глобальных стилей.
Далее перечислены псевдоэлементы, их описание и свойства.
:after
Применяется для вставки назначенного контента после элемента. Этот псевдоэлемент работает совместно со стилевым свойством content, которое определяет содержимое для вставки. В примере 1.59 показано использование псевдокласса :after для добавления текста в конец абзаца.
Результат примера показан на рис. 1.38.
В данном примере к содержимому абзаца с классом new добавляется дополнительное слово, которое выступает значением свойства content. Псевдоэлементы :after и :before, а также стилевое свойство content не поддерживаются браузером Internet Explorer до седьмой версии включительно.
:before
По своему действию :before аналогичен псевдоэлементу :after, но вставляет контент до элемента. В примере 1.60 показано добавление маркеров своего типа к элементам списка посредством скрытия стандартных маркеров и применения псевдокласса :before.Результат примера показан ниже (рис. 1.39).
В данном примере псевдокласс :before устанавливается для селектора LI, определяющего элементы списка. Добавление желаемых символов происходит путем задания значения свойства content.
Обратите внимание, что в качестве аргумента не обязательно выступает текст, могут применяться также символы юникода.
В примере 1.62 показано использование псевдоэлемента :first-line применительно к абзацу текста.
Результат примера показан на рис. 1.41.
Обратите внимание, что в качестве аргумента не обязательно выступает текст, могут применяться также символы юникода.
:first-letter
Определяет стиль первого символа в тексте элемента, к которому добавляется. Это позволяет создавать в тексте буквицу и выступающий инициал.Буквица представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Выступающий инициал — увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста.Рассмотрим пример создания выступающего инициала. Для этого требуется добавить к селектору P псевдоэлемент :first-letter и установить желаемый стиль инициала. В частности, увеличить размер текста и поменять цвет текста (пример 1.61).
Результат примера показан ниже (рис. 1.40).
В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста.
:first-line
Определяет стиль первой строки блочного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д.К псевдоэлементу :first-line могут применяться не все стилевые свойства. Допустимо использовать свойства, относящиеся к шрифту, изменению цвет текста и фона, а также: clear, line-height, letter-spacing, text-decoration, text-transform, vertical-align и word-spacing.
В примере 1.62 показано использование псевдоэлемента :first-line применительно к абзацу текста.
Результат примера показан на рис. 1.41.
В данном примере первая строка выделяется красным цветом и курсивным начертанием. Обратите внимание, что при изменении ширины окна браузера, стиль первой строки остается постоянным, независимо от числа входящих в нее слов.источник: designjunkie.ru
| ← Группирование | Псевдоклассы, задающие язык текста → |
|---|
Комментарии:
Комментарии сайта
ВКонтакте
Facebook
