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 и так далее.
Рубрики: CSS, HTML · Теги: bold, color, css, first-letter, font-size, h1, h2, html, p, style, абзац