• RSS
✎ Помощь начинающим и профессиональным блоггерам, создание, поддержка сайтов и блогов e-mail siteblogger@inbox.ru icq 353-724-370

Главная ›› Уроки по CSS, CSS3 ›› Изменение внешнего вида первой буквы абзаца

Изменение внешнего вида первой буквы абзаца

Иногда при работе с сайтом стоит задача выделить первую букву абзаца, к примеру, определенным шрифтом или цветом. При Интернет-серфинге, наверняка, Вы часто встречали веб-ресурсы, у которых это реализовано. Естественно, это можно сделать с помощью HTML, задав вручную стиль отображения первой буквы в каждом абзаце текста. Но этот вариант малоэффективен. Гораздо проще реализовать эту задачу с помощью CSS.

Изменение внешнего вида первой буквы абзаца

Исходный код имеет вид:

<html>
<head>
<style type="text/css">
p:first-letter {font-size: 100%; color: red;}
</style>
</head>
<body>
<p>Первый абзац текста</p>
<p>Второй абзац текста</p>
<p>Третий абзац текста</p>
</body>
</html>

Как видно, ничего сложного нет — используется псевдоэлемент «first-letter», который отвечает за формирования стиля первой буквы абзаца. В примере у нас первая буква имеет размер 100% и отображается красным цветом. Таким образом, это очень простой и эффективный способ решения поставленной задачи.

Поделиться ссылкой:


Читайте также:

Оставить комментарий


  • RSS

«Как создать и продвинуть свой сайт»

2011–2017 © Siteblogger.ru
Рейтинг@Mail.ru