Псевдоэлемент first-line

Псевдоэлемент first-line

Псевдоэлемент: first-line используется для применения стилей к первой строке абзаца. Например:

p:first-line { text-transform: uppercase }

Представленное выше правило указывает сделать буквы первой строки каждого абзаца заглавными. Однако селектор p: first-line не соответствует ни одному реальному HTML-элементу. Он сопоставляется псевдоэлементу, который браузеры пользователей будут помещать в начало каждого абзаца.

Обратите внимание, что длина первой строки зависит от множества таких факторов, как ширина страницы, размер шрифта и др.

Типичный абзац HTML-документа, как этот:

<p>Это довольно длинный абзац

HTML-документа, который будет разбит на несколько строк. Первая строка будет отмечена последовательностью функциональных тегов. Другие строки будут обрабатываться как обычные строки абзаца.</P>

претерпит следующую реорганизацию строк:

!!!

ЭТО ДОВОЛЬНО ДЛИННЫЙ АБЗАЦ HTML-ДОКУМЕНТА,

который будет разбит на несколько строк.

Первая строка будет отмечена последовательностью

функциональных тегов. Другие строки

будут обрабатываться как обычные строки абзаца.

Он будет «переписан» браузерами пользователей так, чтобы включить последовательность функциональных тегов для: first-line. Эта фиктивная последовательность помогает показать, как наследуются свойства:

<p><p:first-line> Это довольно длинный абзац HTML-документа,

</p:first-line> который будет разбит на несколько строк.

Первая строка будет отмечена последовательностью функциональных тегов. Другие строки будут обрабатываться как обычные строки абзаца. </p>

Если псевдоэлемент разрывает реальный элемент, то желаемый эффект зачастую может быть достигнут с помощью последовательности функциональных тегов, которая закрывает и повторно открывает этот элемент. Таким образом, если вы используете в предыдущем абзаце элемент SPAN, то получите следующее:

<p><span class="test"> Это довольно длинный абзац HTML-документа, который будет разбит на несколько строк.</span> Первая строка будет отмечена

последовательностью функциональных тегов. Другие строки будут обрабатываться как обычные строки абзаца.</p>

Теперь браузер пользователя сможет сгенерировать соответствующие начальные и конечные теги для SPAN во время вставки последовательности функциональных тегов для: first-line. Получится следующее:

<p><p:first-line><SPAN class="test"> Это

довольно длинный абзац HTML-документа, </span></p:first-line><span class="test"> который будет разбит на несколько строк. </span> Первая строка будет отмечена последовательностью функциональных тегов. Другие строки будут обрабатываться как обычные строки абзаца.</p>

Псевдоэлемент: first-line может прикрепляться только к элементам уровня блока. Он подобен строковому элементу, но с некоторыми ограничениями. К псевдоэлементу: first-line применяются следующие свойства: свойства шрифтов, цветов, фона, word-spacing, letter-spacing, text-decoration, vertical-align, text-transform, line-height, text-shadow и clear.

Поделитесь на страничке

Следующая глава >

Похожие главы из других книг

ИГРЫ: RPG off-line

Из книги Журнал «Компьютерра» №35 от 28 сентября 2005 года автора Журнал «Компьютерра»

ИГРЫ: RPG off-line «Мясо, мясо!» — закричали монстры, «Экспа, экспа!» — закричало мясо. Старая шутка Кто-то любит квесты, кто-то — стратегии, а кто-то — сапера с пасьянсами. Но есть игры, где кликать мышкой бесполезно… В конце августа прошла одна из крупнейших ролевых игр этого


Расчет сметы в режиме on-line

Из книги Домашний архитектор. Подготовка к ремонту и строительству на компьютере автора Булат Виталий

Расчет сметы в режиме on-line В конце данной главы следует упомянуть о возможности составления сметы в интерактивном режиме в Интернете (on-line). В этом нередко возникает необходимость при отсутствии полноценных программ для расчета и составления смет, а также в случае


Registrar Command Line Edition

Из книги Тонкости реестра Windows Vista. Трюки и эффекты автора Клименко Роман Александрович

Registrar Command Line Edition Статус: Shareware, бесплатная версия с урезанными возможностями.Размер: 930 Кбайт.Разработчик: http://www.resplendence.com/.Данный редактор реестра мы рассмотрим очень поверхностно. Все дело в том, что он является особенным: в отличие от всех ранее рассмотренных, этот


Delay Line Memory: ртутная память UNIVAC I Евгений Лебеденко, Mobi.ru

Из книги Цифровой журнал «Компьютерра» № 93 [31.10.2011 — 06.11.2011] автора Журнал «Компьютерра»

Delay Line Memory: ртутная память UNIVAC I Евгений Лебеденко, Mobi.ru Опубликовано 02 ноября 2011 года Устройство, о котором рассказывается ниже, тоже появилось благодаря радарной установке. И так же, как в случае с магнетроном, его идея возникла благодаря


1.2.2. Пример Line

Из книги О чём не пишут в книгах по Delphi автора Григорьев А. Б.


Delay Line Memory: ртутная память UNIVAC I

Из книги Компьютерра PDA N143 (29.10.2011-04.11.2011) автора Журнал «Компьютерра»

Delay Line Memory: ртутная память UNIVAC I Автор: Евгений Лебеденко, Mobi.ruОпубликовано 02 ноября 2011 годаНи для кого не секрет, что изобретения порой "выстреливают" вовсе не в той области, которую им уготовил изобретатель. Почти все, наверняка, слышали историю о плитке шоколада,


Псевдоэлемент first-letter

Из книги HTML, XHTML и CSS на 100% автора Квинт Игорь

Псевдоэлемент first-letter Псевдоэлемент: first-letter может использоваться для создания таких простых типографических эффектов, как заглавные буквы и буквицы. Тип начальной буквы аналогичен строковому элементу, если его свойству float присвоено значение none, в противном случае он