Справочник по CSS (ЦСС) и ШТМЛ
Как сделать буквицу?
Буквицей имеется ввиду увеличенная первая буква контента или абзаца, базовая линия которой ниже на одну или несколько строк базовой линии основного контента. Для разработки этого приема подойдет псевдоэлемент first-letter, он определяет стиль первого символа блочного элемента.
Чтобы буквица работала для каждого абзаца, следует применить селектором P, через двоеточие добавляем first-letter, после чего описать нужный стиль буквы. В частности, указать ее размер и цвет. Изменение базовой линии можно осуществить с помощью атрибута float со значением left. Этот параметр выравнивает элемент по левоой стороне и заставляет обтекать контент справа.
Пример
<!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:first-letter {
font-size: 260%; /* Размер шрифта буквицы */
float: left; /* Выравнивание по левоой стороне */
color: red; /* Красный цвет первой буквы */
padding: 3px; /* Поля между буквицей и контентом */
margin-top: 3px; /* Отступ сверху */
}
</style>
</head>
<body>
<p>Необходимо, манипулируя полученными предметами материального мира и фрагментами информационного поля, эмпирическим путем достигнуть логического завершения конкурса.</p>
</body>
</html>
Результат данного примера показан ниже.
Рис. 1. Вид буквицы в контенте
В примере размер буквицы задан как 260% от размера основного контента, а ее цвет установлен красным. Положение буквицы относительно контента можно регулировать параметрами padding и margin.