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

Чтобы выделить каждый новый абзац текста в ретро стиле, по подобию старых книг или сборника сказок,чаще всего применяется приём увлечения, выделения жирным первой буквы в абзаце.

Конечно это можно сделать просто обрамив первую букву тегом <b> (bold – жирный):

<b>В</b>некотором царстве, в некотором государстве...

Но такой приём: а) неизящный; б) непрактичный; в) разрывает первое слово абзаца (что может не лучшим образом сказать на индексации текста поисковиками); г) и не всегда выполним (особенно если текст генерируется неким скриптом, автоматически).
Нам на помощь придёт CSS – каскадная таблица стилей. А именно свойство – селектор first-letter. first-letter работает с тегами отвечающими за открытие нового абзаца. В первую очередь то тег <p> , а также теги заголовков (header) <h1>, <h2>, <h3> и так далее.

Как это работает? Рассмотрим законченный пример использования first-letter:
<style>
p{ color: black; font-size: 17pt; }
p:first-letter{ color: red; font-size: 23pt; }
</style>
<p>Куда ни глянь, до самого горизонта, повсюду, простерлась широкая степь.</p>

Результат выполнения данного HTML кода выглядит следующим образом:

Как Вы могли догадаться, за выделение первого символа в абзаце, отвечает конструкция:
p:first-letter или
h1:first-letter
h2:first-letter и так далее.

Опубликовано 13.09.2013 в 06:40 · Автор Вебдизайнеру, сисадмину, вебмастеру · Ссылка
Рубрики: CSS, HTML · Теги: , , , , , , , , , ,