логотип PurpleSchool
логотип PurpleSchool

Псевдоэлемент first-letter в CSS. Полное руководство с примерами

Автор

Дмитрий Нечаев

Псевдоэлемент ::first-letter в CSS используется для стилизации первой буквы блока текста. Это может быть полезно для создания эффектных заголовков, оформления первых букв абзацев в виде "инициалов" или просто для выделения начала текста. В этой статье мы подробно рассмотрим псевдоэлемент ::first-letter, его применение и приведём примеры использования для различных ситуаций.

Основы использования псевдоэлемента ::first-letter

Псевдоэлемент ::first-letter применяется к первой букве текстового блока, позволяя изменять её цвет, размер шрифта, толщину шрифта, межстрочный интервал, отступы и другие CSS-свойства.

Пример базового использования псевдоэлемента ::first-letter

p::first-letter {
  font-size: 2em;
  color: red;
  font-weight: bold;
}
<p>Это пример текста с выделенной первой буквой.</p>

В этом примере первая буква текста абзаца будет увеличена, окрашена в красный цвет и выделена жирным шрифтом.

Поддержка браузерами

Псевдоэлемент ::first-letter поддерживается всеми современными браузерами, включая Google Chrome, Mozilla Firefox, Safari, Microsoft Edge и Internet Explorer.

Примеры использования псевдоэлемента ::first-letter

Стилизация первых букв абзацев

Пример:

p::first-letter {
  font-size: 3em;
  color: green;
  float: left;
  margin-right: 10px;
  line-height: 1;
}
<p>Это пример текста, где первая буква выделена и сдвинута влево.</p>

В этом примере первая буква абзаца будет увеличена, окрашена в зелёный цвет, сдвинута влево и отделена от остального текста отступом справа.

Стилизация первых букв заголовков

Пример:

h1::first-letter {
  font-size: 2.5em;
  color: navy;
}
<h1>Заголовок с выделенной первой буквой</h1>

В этом примере первая буква заголовка будет увеличена и окрашена в тёмно-синий цвет.

Стилизация первых букв цитат

Пример:

blockquote::first-letter {
  font-size: 4em;
  color: darkgray;
  font-style: italic;
}
<blockquote>Цитата с выделенной первой буквой.</blockquote>

В этом примере первая буква цитаты будет увеличена, окрашена в тёмно-серый цвет и курсивом.

Сложные примеры использования псевдоэлемента ::first-letter

Стилизация первых букв с использованием шрифтов

Пример:

p::first-letter {
  font-size: 3em;
  color: maroon;
  font-family: 'Times New Roman', serif;
  float: left;
  margin-right: 10px;
  line-height: 1;
}
<p>Это пример текста с выделенной первой буквой, использующей другой шрифт.</p>

В этом примере первая буква будет отображаться с использованием шрифта 'Times New Roman', что создаст эффект "инициала".

Стилизация первых букв в многострочных абзацах

Пример:

p::first-letter {
  font-size: 4em;
  color: teal;
  font-weight: bold;
  float: left;
  margin-right: 10px;
  line-height: 1;
}
<p>Это пример текста, где первая буква выделена и сдвинута влево. Остальной текст будет обтекать первую букву, создавая интересный визуальный эффект. Этот эффект особенно хорошо смотрится в многострочных абзацах, где первая буква явно выделяется на фоне остального текста.</p>

В этом примере первая буква многострочного абзаца будет выделена, увеличена и сдвинута влево, создавая визуальный эффект обтекания текста.

Использование в реальных проектах

Стилизация первых букв в блогах

Пример использования псевдоэлемента ::first-letter для стилизации первых букв в статьях блога:

article p::first-letter {
  font-size: 2.5em;
  color: #2c3e50;
  font-weight: bold;
  float: left;
  margin-right: 10px;
  line-height: 1;
}
<article>
  <p>Это пример текста статьи в блоге. Первая буква абзаца будет выделена, чтобы привлечь внимание читателя и создать стильный вид.</p>
  <p>Следующий абзац тоже будет стилизован таким образом, что первая буква будет выделена, создавая единообразный стиль для всей статьи.</p>
</article>

В этом примере первая буква каждого абзаца статьи в блоге будет увеличена и выделена, создавая стильный и привлекательный вид.

Стилизация первых букв в новостных статьях

Пример использования псевдоэлемента ::first-letter для стилизации первых букв в новостных статьях:

.news-article p::first-letter {
  font-size: 3em;
  color: #d35400;
  font-family: 'Georgia', serif;
  float: left;
  margin-right: 15px;
  line-height: 1;
}
<div class="news-article">
  <p>Это пример текста новостной статьи. Первая буква абзаца будет выделена, чтобы создать эффектный вид и привлечь внимание читателей.</p>
  <p>Второй абзац тоже будет стилизован таким образом, чтобы сохранить единообразный стиль для всей статьи.</p>
</div>

В этом примере первая буква каждого абзаца новостной статьи будет увеличена и выделена, создавая эффектный и привлекательный вид.

Заключение

Псевдоэлемент ::first-letter в CSS предоставляет мощный способ стилизации первой буквы блока текста. Это помогает улучшить внешний вид текста, привлечь внимание к важным частям и создать эффектный дизайн. Понимание различных способов использования псевдоэлемента ::first-letter, а также его комбинирование с другими селекторами и свойствами CSS, помогает разработчикам создавать более гибкие и адаптивные стили. Экспериментируйте с различными подходами и находите оптимальные решения для ваших проектов.

Стрелочка влевоПсевдоэлемент first-line в CSS. Полное руководство с примерамиСвойство content в CSS. Полное руководство с примерамиСтрелочка вправо

Все гайды по Css

Полное руководство по использованию свойства will-change в CSSПолное руководство по свойству transform-style в CSSУправление точкой опоры трансформаций в CSS с помощью transform-originИспользование функций CSS-трансформации; Полное руководствоПолное руководство по свойству transform-box в CSSУправление элементами с помощью свойства transform в CSSПолное руководство по свойству perspective-origin в CSSПолное руководство по свойству perspective в CSSПолное руководство по свойству backface-visibility в CSS
Универсальный селектор в CSS. Полное руководство с примерамиСелектор по тегу в CSS. Полное руководство с примерамиПеречисление селекторов в CSS. Полное руководство с примерамиСелектор потомка в CSS. Полное руководство с примерамиСелектор по идентификатору в CSS; Полное руководство с примерамиКомбинированные селекторы в CSS; Полное руководство с примерамиСелектор по классу в CSS; Полное руководство с примерамиСелектор по атрибуту в CSS; Полное руководство с примерами
Псевдокласс selection. Полное руководство с примерамиПсевдоэлементы в CSS. Полное руководство с примерамиПсевдоэлемент placeholder в CSS. Полное руководство с примерамиПсевдоэлемент marker в CSS. Полное руководство с примерамиПсевдоэлемент first-line в CSS. Полное руководство с примерамиПсевдоэлемент first-letter в CSS. Полное руководство с примерамиСвойство content в CSS. Полное руководство с примерамиПсевдоэлемент before в CSS. Полное руководство с примерамиПсевдоэлемент backdrop в CSS. Полное руководство с примерамиПсевдоэлемент after в CSS. Полное руководство с примерами
Псевдокласс where в CSS. Полное руководство с примерамиПсевдокласс visited в CSS. Полное руководство с примерамиПсевдоклассы группы type в CSS. Полное руководство с примерамиПсевдокласс target в CSS. Полное руководство с примерамиПсевдокласс root в CSS. Полное руководство с примерамиПсевдокласс required в CSS. Полное руководство с примерамиПсевдоклассы в CSS. Полное руководство с примерамиПсевдокласс placeholder-shown в CSS. Полное руководство с примерамиПсевдокласс optional в CSS. Полное руководство с примерамиПсевдокласс not в CSS. Полное руководство с примерамиПсевдокласс link в CSS. Полное руководство с примерамиПсевдокласс lang в CSS. Полное руководство с примерамиПсевдокласс is в CSS. Полное руководство с примерамиПсевдоклассы invalid и valid в CSS. Полное руководство с примерамиПсевдокласс indeterminate в CSS. Полное руководство с примерамиПсевдоклассы in-range и out-of-range. Полное руководство с примерамиПсевдокласс hover в CSS. Полное руководство с примерамиПсевдокласс has в CSS. Полное руководство с примерамиПсевдокласс focus-within в CSS. Полное руководство с примерамиПсевдокласс focus-visible в CSS. Полное руководство с примерамиПсевдокласс focus в CSS. Полное руководство с примерамиПсевдокласс empty в CSS. Полное руководство с примерамиПсевдоклассы disabled и enabled в CSS. Полное руководство с примерамиПсевдокласс default в CSS. Полное руководство с примерамиПсевдоклассы группы child в CSS. Полное руководство с примерамиПсевдокласс checked в CSS. Полное руководство с примерамиПсевдокласс active в CSS. Полное руководство с примерами
Функция var в CSS. Полное руководство с примерамиФункция url в CSS. Полное руководство с примерамиФункция repeating-radial-gradient в CSS. Полное руководство с примерамиФункция repeating-linear-gradient в CSS. Полное руководство с примерамиФункция repeating-conic-gradient в CSS. Полное руководство с примерамиФункция radial-gradient в CSS. Полное руководство с примерамиФункция min в CSS. Полное руководство с примерамиФункция max в CSS. Полное руководство с примерамиФункция linear-gradient в CSS. Полное руководство с примерамиФункция image-set в CSS. Полное руководство с примерамиФункции фильтров в CSS. Полное руководство с примерамиФункция conic-gradient в CSS. Полное руководство с примерамиФункция clamp в CSS. Полное руководство с примерамиФункция calc в CSS. Полное руководство с примерамиФункция attr в CSS. Полное руководство с примерами
Вендорные префиксы в CSS. Полное руководство с примерамиКонтекст наложения в CSS. Полное руководство с примерамиСпецифичность в CSS. Полное руководство с примерамиПодход «Pixel Perfect» в верстке сайтов. Полное руководство с примерамиНаследование в CSS. Полное руководство с примерамиCSS-правило. Полное руководство с примерамиКомментарии в CSS. Полное руководство с примерамиПринцип каскада в CSS. Полное руководство с примерамиБлочная модель в CSS. Полное руководство с примерамиСвойство all в CSS. Полное руководство с примерамиПодключение стилей к HTML. Полное руководство с примерами
Полное руководство по свойству will-change в CSSПолное руководство по transition-timing-function в CSSОсновы использования transition-property в CSS; управление плавными переходамиCSS transition-duration; Полное руководство по управлению продолжительностью переходовCSS transition-delay; Полное руководство по управлению задержкой переходовCSS transition; Полное руководство по созданию плавных переходовCSS @keyframes; Полное руководство по созданию анимацийCSS animation-timing-function; Полное руководство по управлению проигрыванием анимацийCSS animation-play-state; Полное руководство по управлению анимациямиCSS animation-name; Полное руководство по заданию имени анимацииCSS animation-iteration-count; Полное руководство по управлению количеством повторений анимацииCSS animation-fill-mode; Полное руководство по управлению состоянием элементов после анимацииCSS animation-duration; Полное руководство по управлению длительностью анимацииCSS animation-direction; Полное руководство по управлению направлением анимацииCSS animation-delay; Полное руководство с примерамиCSS-анимации; Полное руководство с примерами
Открыть базу знаний