Свойство CSS initial-letter

Свойство initial-letter задаёт размер первой буквы и количество строк, на которые она опускается и поднимается.

Это свойство используется в газетах, где первая буква крупнее остального текста.

Свойство принимает ключевое слово normal или два целочисленных значения (<integer>), разделённых пробелом.

INFO

Отрицательные значения не допускаются.

INFO

Поддерживается во всех современных браузерах.

Начальное значение	normal
Применяется к	Псевдоэлементам ::first-letter и первому дочернему элементу блочного контейнера на уровне строк.
Наследуется	Нет.
Анимация	Нет.
Версия	CSS3
Синтаксис DOM	`element.style.initialLetter = "2 1";`

Синтаксис

Синтаксис CSS initial-letter

css

initial-letter: normal | <integer> <integer>;

Пример использования свойства initial-letter:

Пример кода CSS initial-letter

html

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      body {
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Slabo 27px';
        font-size: 1.5em;
        line-height: 1.5;
        padding: 40px 0;
      }
      article {
        width: 80%;
      }
      .example::first-letter {
        -webkit-initial-letter: 2 1;
        initial-letter: 2 1;
        color: #8ebf42;
        font-weight: bold;
        margin-right: .60em;
      }
    </style>
  </head>
  <body>
    <article class="example">
      Lorem Ipsum is dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.
    </article>
  </body>
</html>

Try it Yourself »

Результат

CSS initial-letter

Значения

Значение	Описание
`normal`	Без эффекта initial-letter. Это значение по умолчанию.
`<integer> <integer>`	Первое значение указывает, на сколько строк буква опускается. Второе значение указывает, на сколько строк она поднимается.
`initial`	Устанавливает свойству значение по умолчанию.
`inherit`	Наследует свойство от родительского элемента.

Practice

Какова цель свойства CSS 'initial-letter'?

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

Свойство CSS initial-letter ​

Синтаксис ​

Пример использования свойства initial-letter: ​

Результат ​