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

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

Версия от 14:01, 26 апреля 2011; Evgen (Обсуждение | вклад)
(разн.) ← Предыдущая | Текущая версия (разн.) | Следующая → (разн.)
Перейти к: навигация, поиск

Разработка и внедрение CRM-систем

Разработка и внедрение CRM-систем "под ключ" на базе SugarCRM. Любые задачи для любого вида бизнеса. Установка бесплатной CRM-системы бесплатно. Интеграция с существующей инфраструктурой, бухгалтерской программой, телефонией. Доработка существующих проектов. Обучение персонала.

подробнее ...

+7 (495) 646-06-27
8 (800) 555-06-28 (звонок бесплатный)
+7 (910) 9082123
evgenjekson (бесплатная переадресация на сотовый)
195938768
[email protected]

Содержание

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

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

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

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