Выравнивание и интервалы текста: Тренажер CSS

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

В этом тренажере вы попрактикуетесь в управлении выравниванием текста и интервалами между строками, словами и буквами. Вам будут предложены фрагменты HTML и CSS кода с пропусками. Ваша задача - заполнить пропуски, чтобы добиться желаемого визуального результата. Упражнения охватывают свойства `text-align`, `line-height`, `letter-spacing`, `word-spacing`, `text-indent`, `white-space` и другие, позволяющие контролировать расположение и внешний вид текста на веб-странице. Каждое задание сопровождается описанием желаемого результата и подсказкой, которую можно открыть, если возникнут трудности.

Список тем

Выравнивание текста по центру

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

CSS

.title {
  input1: center;
}

                     .title {
  input1: center;
}

HTML

<h1 class="title">Заголовок</h1>

Используйте свойство `text-align` со значением `center` для выравнивания текста по центру.

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

Результат

Сообщения

Выполнить

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

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

Выравнивание текста по правому краю

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

CSS

p {
  input1: input2;
}

                     p {
  input1: input2;
}

HTML

<p>Текст параграфа, который нужно выровнять по правому краю.</p>

Используйте свойство `text-align` со значением `right`.

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

Результат

Сообщения

Выполнить

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

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

Выравнивание текста по ширине

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

CSS

.justified-text {
  input1: input2;
}

                     .justified-text {
  input1: input2;
}

HTML

<p class="justified-text">Этот текст должен быть выровнен по ширине.  Обратите внимание, как добавляются пробелы между словами, чтобы текст заполнил всю доступную ширину строки.</p>

Используйте свойство `text-align` со значением `justify`.

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

Результат

Сообщения

Выполнить

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

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

Увеличение межстрочного интервала

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

CSS

p {
  input1: 1.5;
}

                     p {
  input1: 1.5;
}

HTML

<p>Текст с увеличенным межстрочным интервалом.</p>

Используйте свойство `line-height`. Значение больше 1 увеличит интервал.

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

Результат

Сообщения

Выполнить

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

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

Уменьшение межстрочного интервала

Уменьшите межстрочный интервал для текста. Сделайте текст более плотным.

CSS

.compressed-text {
  input1: input2;
}

                     .compressed-text {
  input1: input2;
}

HTML

<p class="compressed-text">Текст с уменьшенным межстрочным интервалом.</p>

Используйте свойство `line-height`. Значение меньше 1 уменьшит интервал.

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

Результат

Сообщения

Выполнить

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

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

Увеличение межбуквенного интервала

Увеличьте расстояние между буквами в слове "Привет". Укажите значение в пикселях.

CSS

.word {
  input1: 2px;
}

                     .word {
  input1: 2px;
}

HTML

<span class="word">Привет</span>

Используйте свойство `letter-spacing`.

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

Результат

Сообщения

Выполнить

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

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

Уменьшение межбуквенного интервала

Уменьшите расстояние между буквами в заголовке. Сделайте буквы ближе друг к другу. Укажите значение в пикселях. Значение -1px

CSS

h2 {
  input1: input2;
}

                     h2 {
  input1: input2;
}

HTML

<h2>Заголовок с уменьшенным межбуквенным интервалом</h2>

Используйте свойство `letter-spacing` с отрицательным значением.

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

Результат

Сообщения

Выполнить

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

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

Увеличение интервала между словами

Увеличьте расстояние между словами в предложении. Укажите значение в пикселях.

CSS

p {
  input1: 5px;
}

                     p {
  input1: 5px;
}

HTML

<p>Предложение с увеличенным интервалом между словами.</p>

Используйте свойство `word-spacing`.

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

Результат

Сообщения

Выполнить

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

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

Отступ первой строки (красная строка)

Сделайте отступ первой строки абзаца (красную строку). Укажите значение в пикселях.

CSS

p {
  input1: 20px;
}

                     p {
  input1: 20px;
}

HTML

<p>Абзац с отступом первой строки.</p>

Используйте свойство `text-indent`.

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

Результат

Сообщения

Выполнить

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

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

Управление переносами слов: запрет

Запретите перенос слов в предложении, чтобы оно отображалось в одну строку, даже если не помещается в контейнер.

CSS

.no-wrap {
  input1: input2;
}

                     .no-wrap {
  input1: input2;
}

HTML

<p class="no-wrap">Это предложение не должно переноситься на новую строку.</p>

Используйте свойство `white-space` со значением `nowrap`.

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

Результат

Сообщения

Выполнить

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

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

Управление пробелами и переносами

Сохраните переносы строк, как в исходном коде, но схлопывайте последовательности пробелов до одного. Текст должен переноситься, если не помещается в контейнер.

CSS

.pre-line {
  input1: input2;
}

                     .pre-line {
  input1: input2;
}

HTML

<p class="pre-line">Это текст
с переносами строк,
которые должны быть сохранены.</p>

Используйте свойство `white-space` со значением `pre-line`.

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

Результат

Сообщения

Выполнить

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

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

Текстовое оформление: подчеркивание

Добавьте подчеркивание к тексту ссылки.

CSS

a {
  input1: input2;
}

                     a {
  input1: input2;
}

HTML

<a href="#">Ссылка с подчеркиванием</a>

Используйте свойство `text-decoration` со значением `underline`.

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

Результат

Сообщения

Выполнить

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

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