Выступающим инициалом называется увеличенная первая буква предложения, базовая линия которой совпадает с базовой линией основного текста. В отличие от буквицы выступающий инициал располагается на одной линии с текстом, как показано на рис. 1.
Рис. 1. Вид выступающего инициала
Выделение буквы цветом и размером применяется для визуального отделения одного абзаца от другого и для привлечения внимания к тексту.
Для изменения вида первой буквы применяется псевдоэлемент first-letter, который через двоеточие добавляется к абзацу (пример 1).
Пример 1. Создание выступающего инициала
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Выступающий инициал</title>
<style type="text/css">
P.initial:first-letter {
font-size: 20pt; /* Размер шрифта */
color: #d3222a; /* Цвет буквы */
}
</style>
</head>
<body>
<p class="initial">Одна дама как-то спросила Бернарда Шоу:</p>
<p>— Скажите, сэр, как лучше писать, чтобы стать известным писателем,
хотя бы таким, как вы?</p>
<p>— Писать надо слева направо, — ответил Шоу.</p>
</body>
</html>Результат данного примера показан на рис. 2.
Рис. 2. Использование выступающего инициала в тексте
Чтобы стиль применялся не ко всем абзацам, а только к определенным, в данном примере вводится класс initial, который с помощью параметра class добавляется к нужному тегу <P>.