Псевдоэлемент 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.

Данный текст является ознакомительным фрагментом.