Межстрочное расстояние (line-height) [Модуль 5: Типографика продвинутый уровень]: Тренажер CSS

Тренажер по CSS для пользователей с начальным уровнем подготовки.

Этот тренажер посвящен свойству CSS `line-height`. Вы выполните серию практических заданий, где нужно будет заполнить пропуски в CSS-коде, чтобы управлять межстрочным интервалом текста. Задания охватывают использование различных значений `line-height`: числовых (без единиц измерения), `normal`, процентных, а также применение свойства к разным элементам для достижения нужного визуального эффекта. Каждое задание сопровождается HTML-разметкой и CSS-стилями, которые вы будете модифицировать. После внесения изменений вы сможете сразу увидеть результат.

Список тем

Установка межстрочного интервала без единиц измерения

id: 37363_css-line-height-unitless-1

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

CSS

p {
  font-size: 16px;
  border: 1px solid #ccc;
  padding: 10px;
  /* Установите межстрочный интервал равным 1.5 */
  line-height: input1;
}

                     p {
  font-size: 16px;
  border: 1px solid #ccc;
  padding: 10px;
  /* Установите межстрочный интервал равным 1.5 */
  line-height: input1;
}

HTML

<p>Это пример текста в несколько строк. Ваша задача - изменить межстрочное расстояние для этого абзаца, сделав его более читаемым. Текст должен занимать несколько строк, чтобы эффект был заметен.</p>

Найдите селектор `p` в CSS. Добавьте свойство `line-height` и установите его значение равным `1.5`. Использование числовых значений без единиц измерения является рекомендуемой практикой для `line-height`, так как оно обеспечивает хорошее масштабирование при наследовании.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Использование значения `normal`

id: 37363_css-line-height-normal-1

Сбросьте межстрочный интервал для элемента `span` внутри абзаца к значению по умолчанию, используя ключевое слово `normal`. Родительский абзац имеет увеличенный интервал.

CSS

.parent-paragraph {
  font-size: 16px;
  line-height: 2; /* Увеличенный интервал */
  border: 1px solid #ccc;
  padding: 10px;
}

.special-span {
  font-weight: bold;
  background-color: #eee;
  /* Установите стандартный межстрочный интервал */
  line-height: input1;
}

                     .parent-paragraph {
  font-size: 16px;
  line-height: 2; /* Увеличенный интервал */
  border: 1px solid #ccc;
  padding: 10px;
}

.special-span {
  font-weight: bold;
  background-color: #eee;
  /* Установите стандартный межстрочный интервал */
  line-height: input1;
}

HTML

<p class="parent-paragraph">
  Этот абзац имеет увеличенный межстрочный интервал.
  <span class="special-span">А эта часть текста внутри span должна иметь стандартный интервал.</span>
  Продолжение текста абзаца с увеличенным интервалом.
</p>

Найдите селектор `.special-span` в CSS. Добавьте свойство `line-height` и установите его значение равным `normal`. Значение `normal` зависит от браузера и обычно составляет около 1.2.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Установка интервала в процентах

id: 37363_css-line-height-percentage-1

Задайте межстрочный интервал для списка `ul`, используя процентное значение. Установите интервал, равный 180% от размера шрифта элемента.

CSS

ul {
  font-size: 14px;
  border: 1px solid #ccc;
  padding: 15px;
  padding-left: 30px;
  /* Установите межстрочный интервал 180% */
  line-height: input1;
}

                     ul {
  font-size: 14px;
  border: 1px solid #ccc;
  padding: 15px;
  padding-left: 30px;
  /* Установите межстрочный интервал 180% */
  line-height: input1;
}

HTML

<ul>
  <li>Первый пункт списка.</li>
  <li>Второй пункт списка с немного большим текстом для наглядности.</li>
  <li>Третий пункт списка.</li>
</ul>

Найдите селектор `ul` в CSS. Добавьте свойство `line-height` и установите его значение в процентах, например, `180%`. Процентное значение вычисляется относительно размера шрифта самого элемента.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Определение свойства для межстрочного интервала

id: 37363_css-line-height-property-1

Вам дан CSS-код с пропущенным названием свойства, отвечающего за межстрочный интервал. Впишите правильное название свойства, чтобы установить интервал для заголовка `h2` равным 1.4.

CSS

h2 {
  font-size: 24px;
  color: #333;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
  /* Впишите свойство для установки межстрочного интервала 1.4 */
  input1: 1.4;
}

                     h2 {
  font-size: 24px;
  color: #333;
  border-bottom: 2px solid #eee;
  padding-bottom: 5px;
  /* Впишите свойство для установки межстрочного интервала 1.4 */
  input1: 1.4;
}

HTML

<h2>Пример заголовка H2</h2>

Свойство CSS, которое управляет высотой строки (межстрочным интервалом), называется `line-height`. Впишите это название свойства в пропуск `input1`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Глобальная установка интервала для `body`

id: 37363_css-line-height-body-1

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

CSS

body {
  font-family: sans-serif;
  font-size: 16px;
  /* Установите базовый межстрочный интервал 1.6 */
  input1: input2;
}

h1 {
  /* Для заголовка можно задать свой интервал, но здесь он наследуется */
  font-size: 28px;
}

p {
  margin-bottom: 10px;
}

                     body {
  font-family: sans-serif;
  font-size: 16px;
  /* Установите базовый межстрочный интервал 1.6 */
  input1: input2;
}

h1 {
  /* Для заголовка можно задать свой интервал, но здесь он наследуется */
  font-size: 28px;
}

p {
  margin-bottom: 10px;
}

HTML

<body>
  <h1>Заголовок страницы</h1>
  <p>Это первый абзац текста. Он наследует межстрочный интервал от body.</p>
  <div>
    <p>Это абзац внутри div. Он также наследует интервал.</p>
  </div>
</body>

Найдите селектор `body` в CSS. Добавьте свойство `line-height` со значением `1.6`. Это хороший способ задать базовый интервал, который будет наследоваться большинством элементов на странице.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Вертикальное центрирование текста

id: 37363_css-line-height-center-1

Используйте свойство `line-height`, чтобы вертикально отцентрировать одну строку текста внутри блока с фиксированной высотой. Высота блока равна 50px.

CSS

.button {
  height: 50px;
  width: 200px;
  background-color: #4CAF50;
  color: white;
  text-align: center;
  font-size: 16px;
  border: 1px solid #3a8e40;
  /* Установите свойство line-height для вертикального центрирования */
  input1: 50px;
}

                     .button {
  height: 50px;
  width: 200px;
  background-color: #4CAF50;
  color: white;
  text-align: center;
  font-size: 16px;
  border: 1px solid #3a8e40;
  /* Установите свойство line-height для вертикального центрирования */
  input1: 50px;
}

HTML

<div class="button">Центрированный текст</div>

Чтобы отцентрировать одну строку текста по вертикали внутри блока, установите значение `line-height` равным высоте этого блока. В данном случае, найдите селектор `.button` и добавьте свойство `line-height` со значением `50px`. Обратите внимание, что в этом задании нужно вписать только название свойства.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку

Разные интервалы для заголовка и абзаца

id: 37363_css-line-height-multiple-1

Задайте разные межстрочные интервалы для заголовка `h3` и абзаца `p`. Для заголовка установите интервал `1.3` (без единиц), а для абзаца - `normal`.

CSS

article {
  border: 1px solid #ccc;
  padding: 15px;
  font-size: 16px;
}

h3 {
  font-size: 20px;
  margin-bottom: 5px;
  /* Установите интервал 1.3 для заголовка */
  line-height: input1;
}

p {
  /* Установите интервал normal для абзаца */
  line-height: input2;
}

                     article {
  border: 1px solid #ccc;
  padding: 15px;
  font-size: 16px;
}

h3 {
  font-size: 20px;
  margin-bottom: 5px;
  /* Установите интервал 1.3 для заголовка */
  line-height: input1;
}

p {
  /* Установите интервал normal для абзаца */
  line-height: input2;
}

HTML

<article>
  <h3>Заголовок статьи</h3>
  <p>Это текст статьи, который должен иметь стандартный межстрочный интервал, в отличие от заголовка, у которого он будет немного плотнее. Текст занимает несколько строк.</p>
</article>

Найдите селектор `h3` и добавьте свойство `line-height` со значением `1.3`. Затем найдите селектор `p` и добавьте свойство `line-height` со значением `normal`.

Заполнить ответами все поля

Результат

Сообщения

Выполнить

Показать подсказку