Псевдоэлементы позволяют задать стиль элементов не определенных в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста. Синтаксис использования псевдоэлементов следующий. Селектор:Псевдоэлемент { Описание правил стиля } Вначале следует имя селектора, затем пишется двоеточие, после которого идет имя псевдоэлемента. Каждый псевдоэлемент может применяться только к одному селектору, если требуется установить сразу несколько псевдоэлементов для одного селектора, правила стиля должны добавляться к ним по отдельности, как показано ниже. .foo:first-letter { color: red } Псевдоэлементы не могут применяться к внутренним стилям, только к таблице связанных или глобальных стилей. Далее перечислены все псевдоэлементы, их описание и свойства. :afterПрименяется для вставки назначенного контента после элемента. Этот псевдоэлемент работает совместно со стилевым свойством content, которое определяет содержимое для вставки. В примере 16.1 показано использование псевдоэлемента :after для добавления текста в конец абзаца. Пример 16.1. Применение псевдоэлемента :after HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4
Результат примера показан на рис. 16.1. Рис. 16.1. Добавление текста к абзацу с помощью :after В данном примере к содержимому абзаца с классом new добавляется дополнительное слово, которое выступает значением свойства content. Псевдоэлементы :after и :before, а также стилевое свойство content не поддерживаются браузером Internet Explorer до седьмой версии включительно. :beforeПо своему действию :before аналогичен псевдоэлементу :after, но вставляет контент до элемента. В примере 16.2 показано добавление маркеров своего типа к элементам списка посредством скрытия стандартных маркеров и применения псевдоэлемента :before. Пример 16.2. Использование псевдоэлемента :before HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4
Результат примера показан ниже (рис. 16.2). Рис. 16.2. Изменение вида маркеров с помощью :before В данном примере псевдоэлемент :before устанавливается для селектора LI, определяющего элементы списка. Добавление желаемых символов происходит путем задания значения свойства content. Обратите внимание, что в качестве аргумента не обязательно выступает текст, могут применяться также символы юникода. :first-letterОпределяет стиль первого символа в тексте элемента, к которому добавляется. Это позволяет создавать в тексте буквицу и выступающий инициал. Буквица представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Выступающий инициал — увеличенная прописная буква, базовая линия которой совпадает с базовой линией основного текста. Рассмотрим пример создания выступающего инициала. Для этого требуется добавить к селектору P псевдоэлемент :first-letter и установить желаемый стиль инициала. В частности, увеличить размер текста и поменять цвет текста (пример 16.3). Пример 16.3. Использование псевдоэлемента :first-letter HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4
Результат примера показан ниже (рис. 16.3). Рис. 16.3. Создание выступающего инициала В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста. :first-lineОпределяет стиль первой строки блочного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д. К псевдоэлементу :first-line могут применяться не все стилевые свойства. Допустимо использовать свойства, относящиеся к шрифту, изменению цвет текста и фона, а также: clear, line-height, letter-spacing, text-decoration, text-transform, vertical-align и word-spacing. В примере 16.4 показано использование псевдоэлемента :first-line применительно к абзацу текста. Пример 16.4. Выделение первой строки текста HTML 4.01CSS 2.1IE 7IE 8IE 9Cr 11Op 11Sa 5Fx 4
Результат примера показан на рис. 16.4. Рис. 16.4. Результат применения псевдоэлемента :first-line В данном примере первая строка выделяется красным цветом и курсивным начертанием. Обратите внимание, что при изменении ширины окна браузера, стиль первой строки остается постоянным, независимо от числа входящих в нее слов. | |
Просмотров: 522
| Теги: |
Всего комментариев: 0 | |