Узнал о такой штуке, как first-letter в css, на серче буквально пару месяцев назад. Подумал, что прикольно, надо запомнить, а также удивился, что не встречал такой трюк ни в 1 учебном пособии.
Немного обновил дизайн этого блога и понял, что first-letter не просто прикольно, а очень полезн0 и вообще, это просто офигенная штука. Что это такое, можно узнать, взглянув на заголовок этого поста, – первая буква красная и это делает как раз first-letter финт в css.
Чтобы сделать «красную строку» (как в книжках-сказках), например, всем абзацам текста всех страниц сайта, необходимо прописать стиль
p:first-letter {color: red; font-weight: bold;}
Всем ссылкам на сайте:
a:first-letter {color: red; font-weight: bold;}
Всем заголовкам h1 на сайте:
h1:first-letter {color: red; font-weight: bold;}
Можно делать любой шрифт, размер этой буквы и вообще что угодно. Работает во всех современных браузерах.
Это не просто красиво и просто, но еще и юзабильно. На главной странице идут заголовки h2 и у каждого из них первая буква выделена цветом. Придание первой букве цвета сделало разделение постов более понятным. Теперь даже обезъяна сможет распознать конец первого поста и начало второго за доли миллисекунды. И все это сделано без вмешательства в код каждого заголовка, а просто добавлением 1 строки в таблицу css стилей.
Комментариев: 2. Обязательно оставьте свой!
Ну а вот в одном диве на страничке начало параграфов с красной буквы замечательно смотрится, а рядышком див, в котором параграфы не должны начинаться с красной буквы. Здесь как быть?
И сразу приходит на ум – будь ты неладна эта кросота.
Не знаю покажется пример или нет:
<code>
<div>
<p>Первый параграф с красной буквой
</p>
<p>Второй параграф с красной буквой
</p>
</div>
<div>
<p>Первый параграф где красная буква не нужна
</p>
<p>Второй параграф где красная буква не нужна
</p>
</div>
</code>
Ну и как здесь быть? Есть идеи?
Михаил, присвоить первому диву id="redletter" и в стилях задать способ отображения
<style>
#redletter p:first-letter { color: red; }
</style>
<div id="redletter">
<p>Первый параграф с красной буквой
</p>
<p>Второй параграф с красной буквой
</p>
</div>
….