Справочник по CSS : Тематический указатель : Селекторы : Псевдоэлементы : :first-line

смотрим также

Материал из Справочник Web-языков

Перейти к: навигация, поиск


Содержание

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

Задает один или более стилей для отображения первой строки текста в объекте.

Синтаксис

HTML :first-line { sRules }
Скрипты N/A

Используемые значения

sRules
Строковое значение, которое определяет одну или более CSS-пару атрибут/значение.

Замечания

Свойства background, clear, color, font, fontFamily, fontSize, fontStyle, fontVariant, fontWeight, lineHeight, textDecoration, textTransform и verticalAlign применяются к псевдоэлементу :first-line.

Длина первой строки текста зависит от множества факторов, например, таких: ширина страницы и размер шрифта.

Псевдоэлемент :first-line может быть добавлен в блоковым элементам или к таким, для которых свойству display определено значение block.

Примеры

В первом примере с помощью псевдоэлемента :first-line задается, что первая строка в параграфе будет написана прописными (заглавными) буквами.

<style>
    .CapFirst:first-line { text-transform: uppercase }
</style>

<p class="CapFirst">Первая строка текста будет написана заглавными буквами. 
Остальные строки текста будут отображаться как обычно. 
Первая строка текста будет написана заглавными буквами. 
Остальные строки текста будут отображаться как обычно.</p>

Во втором примере показан эффект от совместного применения псевдоэлементов :first-line и :first-letter.

<style>
    .LetterAndLine:first-line   { text-transform: uppercase }
    .LetterAndLine:first-letter { font-size: 200%; float: left }
</style>

<p class="LetterAndLine">Первая буква в параграфе будет в 2 раза больше остальных букв.
Первая строка параграфа будет написана прописными (заглавными) буквами. 
Остальные строки будут отображаться как обычно. Первая буква в параграфе будет в 2 раза больше остальных букв.
Первая строка параграфа будет написана прописными (заглавными) буквами. 
Остальные строки будут отображаться как обычно.</p>

В третьем примере показано как с помощью псевдоэлемента :first-line сделать типографский эффект колонки как обычно делают в газетах.

<style>
    .col1 { border-right: black 1px solid; 
        padding-right: 10px; 
        padding-left: 5px; 
        width: 140px;
        text-justify: newspaper
        }
    .newsitem:first-line { font-size: 14pt; 
        left: 0px; 
        float: left; 
        position: absolute; 
        top: 100px
        }
</style>

<div class="col1">
<div class="newsitem">Новые улучшения для Internet Explorer 5.5
включают в с ебя также псевдоэлемент first-line. С помощью него 
авторам web-документов стали доступны новые варианты форматирования
текста.</div>
</div>

Стандарты

Этот псевдоэлемент определен в Cascading Style Sheets (CSS), Level 1 (CSS1)

Смотрите также

:first-letter

Ссылки на источники

https://msdn.microsoft.com/en-us/library/ms530754(VS.85).aspx

Добавить страницу в закладки:
РАЗРЕШАЕТСЯ перепечатывать и копировать информацию ТОЛЬКО ПРИ РАЗМЕЩЕНИИ ссылки на оригинал!
(<A href="https://www.spravkaweb.ru/">Справочник Web-языков</A>)
другие проекты
Rambler\'s Top100 Индекс цитирования