|
 |
Шаг 17. ПсевдоэлементыПсевдоэлементы позволяют задать стиль логических элементов, не определенных в дереве элементов документа, а также генерировать содержимое, которого нет в исходном коде текста. Например, объектная модель документа не предлагает удобного механизма для доступа к первому символу текста, поэтому псевдоэлементы позволяют изменить стиль недоступного иным образом элемента. Синтаксис использования псевдоэлементов следующий. Селектор:Псевдоэлемент { Описание правил стиля } Вначале следует имя селектора, затем пишется двоеточие, после которого идет имя псевдоэлемента. Каждый псевдоэлемент может применяться только к одному селектору, если требуется установить сразу несколько псевдоэлементов для одного селектора, правила стиля должны добавляться к ним по отдельности, как показано ниже. .foo:first-letter { color: red } Замечание Псевдоэлементы не могут применяться к внутренним стилям, только к таблице связанных или глобальных стилей. Далее перечислены все псевдоэлементы, их описание и свойства. afterПрименяется для вставки назначенного контента после элемента. Этот псевдоэлемент работает совместно со стилевым свойством content, который определяет содержимое для вставки. В примере 17.1 показано использование псевдокласса after для добавления текста в конец абзаца. Пример 17.1. Применение псевдоэлемента after <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> В данном примере к содержимому абзаца с классом new добавляется дополнительное слово, которое выступает значением параметра content. Замечание Псевдоэлементы after и before, а также стилевое свойство content не поддерживаются браузером Internet Explorer ни в одной его версии. beforeПо своему действию before аналогичен псевдоэлементу after, но вставляет контент до элемента. В примере 17.2 показано добавление маркеров своего типа к элементам списка посредством скрытия стандартных маркеров и применения псевдокласса before. Пример 17.2. Использование псевдоэлемента before <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Результат примера показан ниже.
В данном примере псевдокласс before устанавливается для селектора LI определяющего элементы списка. Добавление желаемых символов происходит путем задания значения свойства content. Обратите внимание, что в качестве аргумента не обязательно выступает текст, могут применяться также символы юникода. first-letterОпределяет стиль первого символа в тексте элемента, к которому добавляется. Это позволяет создавать в тексте буквицу и выступающий инициал. Замечание Буквица представляет собой увеличенную первую букву, базовая линия которой
ниже на одну или несколько строк базовой линии основного текста. Рассмотрим пример создания выступающего инициала. Для этого требуется добавить к селектору P псевдоэлемент first-letter и установить желаемый стиль инициала. В частности, увеличить размер текста и поменять цвет текста (пример 17.3). Пример 17.3. Использование псевдоэлемента first-letter <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Результат примера показан ниже. Луч фонарика высветил старые скрипучие ступени, по которым не далее как пять минут назад в дом поднялся Паша. Оля осторожно приоткрыла дверь и посветила внутрь дома. Луч света, словно нехотя, пробивался сквозь тугую завесу из мрака и пыли. Взгляд Оли опустился на пол, и она вскрикнула. В пустом помещении никого не было, и лишь на полу валялась порванная туфля Паши. В данном примере изменяется шрифт, размер и цвет первой буквы каждого абзаца текста. first-lineОпределяет стиль первой строки блочного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т.д. Замечание К псевдоэлементу first-line могут применяться не все стилевые свойства. Допустимо использовать параметры, относящиеся к шрифту, изменению цвет текста и фона, а также: clear, line-height, letter-spacing, text-decoration, text-transform, vertical-align и word-spacing. В примере 17.4 показано использование псевдоэлемента first-line применительно к абзацу текста. Пример 17.4. Выделение первой строки текста <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> Результат примера показан ниже. Интересно, а существует ли способ действительно практичного применения свойства first-line? Нет, не такого, чтобы можно было бы показать, что это возможно, а чтобы воистину захватило дух от красоты решения, загорелись глаза от скрытых перспектив, после чего остается только сказать себе, что вот это вот, это самое сделать по-другому, также изящно и эффектно просто невозможно.
В данном примере первая строка выделяется красным цветом и курсивным начертанием. Обратите внимание, что при изменении ширины окна браузера, стиль первой строки остается постоянным, независимо от числа входящих в нее слов. Copyright © Влад Мержевич |
