W3docs
ru
Войти

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

Use initial-letter CSS property which allows to select the first letter and specify the number of lines it should occupy. Learn about property values and see examples.

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

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

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

info

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

info

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

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

Синтаксис

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

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

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

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

<!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>
Попробуйте сами »

Результат

CSS initial-letter

Значения

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

Practice

Практика

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