Справочник по CSS : Тематический указатель : Селекторы : Псевдоэлементы : :first-line
Материал из Справочник Web-языков
Разработка и внедрение CRM-систем | |||||||
|
Содержание |
Псевдоэлемент :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)
Смотрите также
Ссылки на источники
https://msdn.microsoft.com/en-us/library/ms530754(VS.85).aspx