С красной строки - веселее (буквица на CSS)

Через CSS легко задать отдельный стиль первому символу любого абзаца. Удобнее всего с это сделать помощью псевдоэлемента CSS :first-letter, к которому применимы свойства шрифта, цвета, фона, границ, полей и отступов.

Вот что вышло у меня:

Изменяем стиль первой буквы абзаца

Поддержка элемента :first-letter есть не только в CCS 3, но и в 2.1, так что у меня сработало и в Internet Explorer 8, в остальных браузерах, само собой разумеется, тоже, так что можно использовать, сохранять совместимость с ИE6-7 смысла не вижу.

Код:

p:first-letter {
 font-size : 14px; 
 font-weight: 500; 
 color: red;
}

Если такая буквица не устраивает - делайте стиль посложней, например,

<style type="text/css">
span.letter1 {
 font-family: sans-serif;
 color: red;
 font-size: 32px;
 float: left;
 font-weight: 600;
 line-height: 1em;
 position: relative;
 margin-bottom: -0.05em;
 margin-right: 0.05em;
} 
</style>

и заключайте первую букву каждого абзаца в тег <span> с классом letter1:

Aбзац начинается с буквицы...
новая строка
новая строка

Код:

<p><span class="letter1">A</span>бзац начинается с буквицы...

24.10.2012, 11:42 [11053 просмотра]