Буквица является художественным приемом оформления текста и представляет собой увеличенную первую букву, базовая линия которой ниже на одну или несколько строк базовой линии основного текста. Заметьте, что это не просто увеличенный символ, буквица не выступает над блоком текста, а является его частью. На рис. 1 показан текст с буквицей.
В качестве буквицы можно использовать картинку, в которой буква оформлена орнаментом в соответствующем тексту стиле.
Рис. 1. Вид буквицы в тексте
Чтобы изображение не выравнивалось по базовой линии шрифта, как это установлено по умолчанию, необходимо воспользоваться стилевым свойством float со значением left (пример 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=windows-1251">
<title>Буквица</title>
<style type="text/css">
.dropcap {
float: left; /* Обтекание по правому краю */
margin: 7px 5px 5px 0; /* Отступы вокруг рисунка */
}
</style>
</head>
<body>
<p><img src="v.png" alt="В" class="dropcap">ышел солдат в отпуск,
нанялся служить к барину: в год за сто рублей.
Помещик велел ему и лошадей чистить, и навоз возить,
и воду таскать, и дрова рубить, и сад мести — совсем
измучил работой. Отслужил солдат год и просит расчета.</p>
</body>
</html>Использование рисунка позволяет создать букву любой, самой причудливой формы, но при этом для каждого символа придется заготовить отдельное изображение. Чтобы сделать буквицу обычным текстом, воспользуемся псевдоэлементом first-letter, определяющего стиль первого символа текста. Для этого к селектору P через двоеточие добавим first-letter и опишем желаемый стиль буквицы, как это показано в примере 2.
Пример 2. Буквица в виде текста
<!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=windows-1251">
<title>Буквица</title>
<style type="text/css">
P:first-letter {
font-size: 24px; /* Размер буквицы */
color: #c00; /* Цвет буквицы */
float: left; /* Обтекание по правому краю */
}
</style>
</head>
<body>
<p>Жил однажды бедный человек, и было у него сыновей
что дырочек в сите, даже на одного больше. Днем и ночью горевал
бедняга: что ему делать с детьми, очень уж много их, не перечесть.
Никак не мог он придумать столько ремесел, чтобы каждому что-нибудь
другое досталось.</p>
<p>Дело в том, что старший сын на мясника выучился, но такого
про свое ремесло нарассказал, что из братьев никто уже в мясники не
пошел; и каждый следующий отбивал у остальных охоту к своему ремеслу;
вот и вышло, что каждому что-нибудь другое требовалось.</p>
</body>
</html>Результат данного примера показан на рис. 2.
Рис. 2. Вид буквицы, созданной с помощью стилей