Одна из типографских традиций — выделять первую строку или первые несколько слов первого абзаца, т. е., вступления; обычно буквы в словах преобразовываются в малые заглавные или капитель с помощью CSS. Например, можно использовать следующий код CSS, подобный нужному для создания буквицы:

p:first-of-type:first-line {
        font-variant: small-caps;
}

Посмотреть пример применения псевдоэлемента первой строки можно ниже:

Не у всех шрифтов есть вариант с малыми заглавными буквами, и в таком случае браузер изобразит замену. Есть шрифты, состоящие только из малых заглавных букв, например, Trajan Pro.  В случае, если Вы используете шрифт формата OpenType, можно применить другой вариант реализации малых заглавных букв.

Обратите внимание, что эффект пвседоэлемента первой строки динамический: если количество слов меняется при масштабировании или изменении размера окна браузера, то заданные правила применяются только к тексту, который остается в первой строке абзаца.

Задать свойства только для пары первых слов несколько сложнее. К сожалению, пока что нет псевдоэлементов, которыми можно было выделить первое слово, второе слово, последнее слово или слово с определенным порядковым номером в предложении. Единственным решением в такой ситуации будет использование тега <span> для оборачивания слов, которым нужно задать свойство в коде CSS. HTML код для такой ситуации может выглядеть следующим образом:

<p>P<span>hilip, after the defeat</span> of Onomarchus, had marched toward the pass of Thermopylae, which, however, he found occupied by the Athenians, who had sent a force for the purpose of preventing his advance. Being baffled there,he directed his march into Thrace, and alarmed the Athenians for the safety of their dominions in the Chersonese.</p>

И нужный код CSS:

p:first-of-type span {
        font-variant: small-caps;
}

Тег <span> используется, только когда не остается других вариантов. Это строчный тег, который не несет дополнительного смысла, кроме того, что в этом месте есть содержимое. Поэтому нужно стараться найти другие пути.

Автор урока Dudley Storey

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

• Создание трехмерного текста изменяющейся толщины
• Задаем уникальный цвет выделения текста с использованием CSS
• Интересные эффекты с использованием свойства CSS3 тени блока