Рубрики: Верстка, Полезняшки
Тэги: css, first-letter, html, буквица, псевдо-классы
Если заглянуть в какой-нибудь старинный фолиант, то всенепременно можно обнаружить сильно отличающуюся как по размерам, так и по исполнению первую букву текста. По-русски это называлось — Буквица. На сайте, а в особенности на блоге, такая фишка выглядит интересно и необычно. Реализовать ее довольно легко. Достаточно при написании поста поместить первую букву в тэги <span></span> с каким-либо классом, которому, в свою очередь, прописать в листе стилей CSS соответствующие правила:
.bukvitsa {
color: #066;
font-size: 5em;
font-family: “Times New Roman”, Serif;
float: left;
line-height: 1em;
margin: 0 5px 0 0;
}
Код для текста выглядит так:
<span class="bukvitsa">Е</span>сли заглянуть в какой-нибудь старинный фолиант, то всенепременно можно обнаружить сильно отличающуюся как по размерам, так и по исполнению первую букву текста…
Регулировать расположение первой буквы можно, меняя значения у высоты строки (line-height) и отступов (margin).
Можно автоматизировать сей процесс, чтобы первая буква всегда подставлялась в текст крупной и красивой. Хотя такой вариант больше подходит все-таки заголовкам, а не абзацам. Но мало ли кому захочется так сделать и для абзацев. Для этого нужно просто для тэга <p> прописать эти же правила:
p:first-letter {
color: #066;
font-size: 5em;
font-family: “Times New Roman”, Sans-Serif;
float: left;
line-height: 1em;
margin: 0 5px 0 0;
}
В данном случае пришлепка first-letter, называемая псевдо-классом, как-раз и говорит браузеру, что первую букву надо показать вот эдак и никак иначе. Псевдо-класс first-letter можно использовать не только для тэга абзаца, но и для заголовков h1 – h6 и далее.
Тут есть небольшой нюанс (спасибо за подсказку CurlyBrace): чтобы такая конструкция срабатывала в ИЕ6, обязательно нужно перед открывающей фигурной скобкой оставлять пробел.
Рад сообщить всем вам, дорогие мои читатели, что работа над новой книгой “Создание 3-х колоночного шаблона для Вордпресс (Wordpress)” завершена! Скачать в PDF-формате вы ее можете также совершенно бесплатно. В ZIP наборе, который весит 895 Кб, кроме самой книги добавлен полностью готовый шаблон. Его вы можете использовать и перекраивать по своему собственному усмотрению. Не рекомендую только использовать для собственных блогов один в один, так как дизайн его все-таки заточен под конкретный блог ice pepper blog.
