Выравнивание и интервалы текста [Модуль 1: Основы CSS]: Тренажер CSS

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

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

Список тем

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

id: 37298_text-align-center

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

CSS

.title {
  input1: center;
}

                     .title {
  input1: center;
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

id: 37298_text-align-right

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

CSS

p {
  input1: input2;
}

                     p {
  input1: input2;
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

id: 37298_text-align-justify

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

CSS

.justified-text {
  input1: input2;
}

                     .justified-text {
  input1: input2;
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

id: 37298_line-height-increase

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

CSS

p {
  input1: 1.5;
}

                     p {
  input1: 1.5;
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

id: 37298_line-height-decrease

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

CSS

.compressed-text {
  input1: input2;
}

                     .compressed-text {
  input1: input2;
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

id: 37298_letter-spacing-increase

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

CSS

.word {
  input1: 2px;
}

                     .word {
  input1: 2px;
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

id: 37298_letter-spacing-decrease

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

CSS

h2 {
  input1: input2;
}

                     h2 {
  input1: input2;
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

id: 37298_word-spacing-increase

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

CSS

p {
  input1: 5px;
}

                     p {
  input1: 5px;
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

id: 37298_text-indent

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

CSS

p {
  input1: 20px;
}

                     p {
  input1: 20px;
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

id: 37298_white-space-nowrap

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

CSS

.no-wrap {
  input1: input2;
}

                     .no-wrap {
  input1: input2;
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

id: 37298_white-space-pre-line

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

CSS

.pre-line {
  input1: input2;
}

                     .pre-line {
  input1: input2;
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

id: 37298_text-decoration-underline

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

CSS

a {
  input1: input2;
}

                     a {
  input1: input2;
}

HTML

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

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

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

Результат

Сообщения

Выполнить

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