В типографических изданиях очень часто можно встретить буквицу – выделенную по размеру и цвету первую букву первого абзаца. Красиво так смотрится… Вот бы к себе такую на сайт! Некоторые ограничиваются использованием рисунков, но вдруг посетитель отключил показ картинок. Тогда не будет ни буквицы, ни красоты: от нее останется только пустой квадратик. Решением проблемы становится применение CSS.
First-letter
Псевдо-элемент first-letter как раз и занимается управлением первой буквы заданного блока. Он ищет первый элемент и присваивает ему указанные значения. Стиль написания очень прост.
В примере буква O станет зеленой и увеличенной в два раза, при этом текст будет ее обтекать с правой стороны. Если предложение начинается с кавычки, то она вместе с буквой войдет в состав first-letter. Помимо прочего псевдо-элемент можно использовать совместно с классами и идентификаторами.
Действует точно также, как и first-letter. Разница только в объектах выделения: first-line визуально изменяет первую строку в нужном вам блоке.
Пример:
<Style type=text/css> p:first-line {font-variant: small-caps} </Style> <p>Слегка приподнятая строка,<br> зато эта часть ни чем особенным не наделена.</p>
Первая строка в абзаце написана малыми прописными буквами: очень эффектное выделение начала статьи в каком-нибудь журнале.
Было бы интересно использовать оба псевдо-класса в одном блоке – скажете вы. И такое в CSS возможно. Надо всего лишь два раза определить элемент и украшенный в вашем стиле абзац не заставит себя ждать.
Пример:
<Style type=text/css> DIV#beautiful:first-line {font-weight: bolder; color:#0f0} DIV#beautiful:first-letter {font-size:16px; font-style: oblique; color:#f00} </Style> <div id=beautiful>Ваша статья самая<br> статьястая статья в мире.</div>
