Интервалы между буквами (letter-spacing): Тренажер CSS

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

В этой серии заданий вы попрактикуетесь в управлении интервалами между буквами текста с помощью CSS свойства `letter-spacing`. Задания помогут вам понять, как изменять расстояние между символами для улучшения читаемости или достижения определенного визуального эффекта. Вы начнете с простых задач по добавлению и удалению интервалов и постепенно перейдете к более сложным сценариям, включая использование различных единиц измерения и применение стилей к разным элементам.

Список тем

Добавление небольшого интервала

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

CSS

p {
  font-size: 16px;
  color: #333;
  /* Добавьте свойство для интервала между буквами со значением 2px */
  input1: input2;
}

                     p {
  font-size: 16px;
  color: #333;
  /* Добавьте свойство для интервала между буквами со значением 2px */
  input1: input2;
}

HTML

<p>Это пример текста, к которому нужно применить межбуквенный интервал.</p>

Используйте CSS свойство `letter-spacing`, чтобы установить расстояние между буквами. Примените его к селектору `p` и задайте значение `2px`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

Стандартный интервал

В данном примере к элементу `div` применен увеличенный интервал между буквами. Ваша задача — сбросить этот интервал к стандартному значению для текста внутри тега `span`, который находится внутри `div`.

CSS

div {
  letter-spacing: 5px;
  font-size: 18px;
  color: #4a4a4a;
}

span {
  font-weight: bold;
  color: #007bff;
  /* Сбросьте интервал для этого элемента к стандартному */
  letter-spacing: input1;
}

                     div {
  letter-spacing: 5px;
  font-size: 18px;
  color: #4a4a4a;
}

span {
  font-weight: bold;
  color: #007bff;
  /* Сбросьте интервал для этого элемента к стандартному */
  letter-spacing: input1;
}

HTML

<div>Этот текст имеет увеличенный интервал, <span>а этот текст внутри span — нет</span>.</div>

Чтобы сбросить интервал между буквами к значению по умолчанию, используйте ключевое слово `normal` для свойства `letter-spacing`. Примените это правило к селектору `span`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

Уменьшение интервала (сжатие текста)

Сделайте заголовок `h2` более компактным, уменьшив расстояние между буквами. Установите отрицательное значение интервала, равное -1 пикселю.

CSS

h2 {
  font-size: 24px;
  font-family: Arial, sans-serif;
  color: #555;
  /* Уменьшите интервал между буквами */
  input1: input2;
}

                     h2 {
  font-size: 24px;
  font-family: Arial, sans-serif;
  color: #555;
  /* Уменьшите интервал между буквами */
  input1: input2;
}

HTML

<h2>Компактный Заголовок</h2>

Используйте свойство `letter-spacing` со значением `-1px`. Отрицательные значения сближают буквы. Примените это к селектору `h2`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

Разные интервалы для разных элементов

Задайте разные стили интервалов для заголовка `h3` и параграфа `p`. Заголовок должен иметь увеличенный интервал в 3 пикселя, а параграф — слегка уменьшенный интервал в -0.5 пикселя.

CSS

h3 {
  font-size: 20px;
  color: #1a1a1a;
  /* Установите интервал 3px для заголовка */
  input1: 3px;
}

p {
  font-size: 14px;
  color: #666;
  /* Установите интервал -0.5px для параграфа */
  input2: -0.5px;
}

                     h3 {
  font-size: 20px;
  color: #1a1a1a;
  /* Установите интервал 3px для заголовка */
  input1: 3px;
}

p {
  font-size: 14px;
  color: #666;
  /* Установите интервал -0.5px для параграфа */
  input2: -0.5px;
}

HTML

<h3>Заголовок с разреженными буквами</h3>
<p>Параграф текста с немного сжатыми буквами для демонстрации разных стилей интервалов.</p>

Примените свойство `letter-spacing` к селектору `h3` со значением `3px`. Затем примените то же свойство `letter-spacing` к селектору `p` со значением `-0.5px`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

Использование относительных единиц (em)

Примените интервал между буквами, используя относительную единицу `em`. Установите `letter-spacing` для элемента `div` с классом `relative-spacing` в значение `0.1em`. Это сделает интервал зависимым от размера шрифта.

CSS

.relative-spacing {
  font-size: 20px; /* Интервал будет 0.1 * 20px = 2px */
  color: #2c3e50;
  border: 1px solid #ccc;
  padding: 15px;
  /* Задайте интервал в 0.1em */
  input1: input2;
}

                     .relative-spacing {
  font-size: 20px; /* Интервал будет 0.1 * 20px = 2px */
  color: #2c3e50;
  border: 1px solid #ccc;
  padding: 15px;
  /* Задайте интервал в 0.1em */
  input1: input2;
}

HTML

<div class="relative-spacing">Текст с относительным интервалом между буквами.</div>

Используйте селектор `.relative-spacing` и свойство `letter-spacing`. Задайте значение `0.1em`. Единица `em` относится к текущему размеру шрифта элемента.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

Интервал для текста в верхнем регистре

Часто для текста в верхнем регистре (например, заголовков или акронимов) используют увеличенный интервал для лучшей читаемости. Примените к элементу `p` с классом `uppercase-text` свойство `text-transform: uppercase;` (уже добавлено) и установите `letter-spacing` в `1.5px`.

CSS

.uppercase-text {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 18px;
  color: #d35400;
  /* Добавьте интервал 1.5px */
  input1: 1.5px;
}

                     .uppercase-text {
  text-transform: uppercase;
  font-weight: bold;
  font-size: 18px;
  color: #d35400;
  /* Добавьте интервал 1.5px */
  input1: 1.5px;
}

HTML

<p class="uppercase-text">Пример текста в верхнем регистре</p>

Добавьте правило `letter-spacing: 1.5px;` к селектору `.uppercase-text`. Свойство `text-transform` уже применено в коде.

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

Результат

Сообщения

Выполнить

Отметить решенным

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

Отмена унаследованного интервала

Элемент `div` с классом `container` имеет увеличенный интервал между буквами. Внутри него есть элемент `span` с классом `highlight`. Ваша задача — отменить унаследованный интервал для `span`, установив для него `letter-spacing` в значение `normal`.

CSS

.container {
  letter-spacing: 4px;
  font-size: 16px;
  color: #333;
}

.highlight {
  background-color: #f0e68c;
  padding: 2px 4px;
  /* Отмените унаследованный интервал */
  input1: input2;
}

                     .container {
  letter-spacing: 4px;
  font-size: 16px;
  color: #333;
}

.highlight {
  background-color: #f0e68c;
  padding: 2px 4px;
  /* Отмените унаследованный интервал */
  input1: input2;
}

HTML

<div class="container">
  Весь этот текст имеет большой интервал, 
  <span class="highlight">кроме этого выделенного фрагмента</span>,
  у которого он должен быть стандартным.
</div>

Используйте селектор `.highlight` и примените к нему свойство `letter-spacing` со значением `normal`. Это переопределит значение, унаследованное от родительского `div`.

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

Результат

Сообщения

Выполнить

Отметить решенным

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