В типографических изданиях очень
часто можно встретить буквицу –
выделенную по размеру и цвету
первую букву первого абзаца.
Красиво так смотрится… Вот бы к
себе такую на сайт! Некоторые
ограничиваются использованием
рисунков, но вдруг посетитель
отключил показ картинок. Тогда не
будет ни буквицы, ни красоты: от нее
останется только пустой квадратик.
Решением проблемы становится
применение CSS.
First-letter
Псевдо-элемент first-letter как раз
и занимается управлением первой
буквы заданного блока. Он ищет
первый элемент и присваивает ему
указанные значения. Стиль
написания очень прост.
Пример
<Style type=text/css>
p:first-letter {font-size:200%; color: lime; float:
left}
</Style>
<p>Очень даже стильный абзац</p>
В примере буква 'О' станет зеленой
и увеличенной в два раза, при этом
текст будет ее обтекать с правой
стороны. Если предложение
начинается с кавычки, то она вместе
с буквой войдет в состав first-letter.
Помимо прочего псевдо-элемент
можно использовать совместно с
классами и идентификаторами.
Пример
DIV.effect:first-letter {color: gold}
#Litera:first-letter {font-size:1.5; float:left}
First-line
Действует точно также, как и 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>
|