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

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

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

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


Содержание

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

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

Синтаксис

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

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

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

Замечания

Свойства background, border, borderBottom, borderBottomColor, borderBottomStyle, borderBottomWidth, borderCollapse, borderColor, borderLeft, borderLeftColor, borderLeftStyle, borderLeftWidth, borderRight, borderRightColor, borderRightStyle, borderRightWidth, borderStyle, borderTop, borderTopColor, borderTopStyle, borderTopWidth, borderWidth, clear, color, styleFloat, font, fontFamily, fontSize, fontStyle, fontVariant, fontWeight, lineHeight, margin, padding, textDecoration, textTransform и verticalAlign применяются к псевдоэлементу :first-letter.

Псевдоэлемент :first-letter применяется чтобы создать типографский эффект буквицы или по-другому "фонаря". Буквица - большая (часто орнаментированная) первая буква в начале главы или статьи (редко абзаца). Имеет существенно большие размеры, чем остальные, и размещается так, что её верх находится на уровне первой строки абзаца. Таким образом, размещение буквицы будет затрагивать текст, расположенный не только на первой строке, но и возможно на некоторых последующих.

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

Примеры

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

<style>
    P.BigFirst:first-letter { font-size: 200%; float: left }
</style>

<p class="BigFirst">Первая буква в параграфе будет в 2 раза больше остальных букв в этом параграфе.
Первая буква в параграфе будет в 2 раза больше остальных букв в этом параграфе.</p>

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

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

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

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

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

<div class="col1">
<div class="newsbite">Вставка буквицы - это отличный способ украсить ваш текст.
Вы можете использовать ее, чтобы привлечь внимание читателя к началу статьи.
</div>
</div>

Стандарты

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

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

:first-line

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

http://msdn.microsoft.com/en-us/library/ms530753(VS.85).aspx

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