Размеры и единицы измерения в CSS: Тренажер CSS

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

В этом тренажере вы попрактикуетесь в использовании различных единиц измерения размеров в CSS. Вам будут представлены фрагменты HTML и CSS кода с пропусками. Ваша задача - заполнить пропуски, чтобы добиться желаемого визуального результата. Упражнения охватывают такие единицы измерения как пиксели (px), проценты (%), em, rem, а также свойства width, height, min-width, max-width, min-height, max-height, font-size и другие, связанные с размерами.

Список тем

Ширина блока

Задайте ширину блока div с классом "box" равной 300 пикселям. Обратите внимание, что блок уже имеет базовые стили.

CSS

.box {
  background-color: lightblue;
  input1: 300px;
}

                     .box {
  background-color: lightblue;
  input1: 300px;
}

HTML

<div class="box">Содержимое блока</div>

Используйте свойство `width` и укажите значение в пикселях (px).

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

Результат

Сообщения

Выполнить

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

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

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

Сделайте блок div с классом "container" шириной 80% от родительского элемента, а высоту - 200 пикселей.

CSS

.container {
  background-color: lightgreen;
  input1: 80%;
  input2: 200px;
}

                     .container {
  background-color: lightgreen;
  input1: 80%;
  input2: 200px;
}

HTML

<div class="container">Контейнер</div>

Используйте свойство `width` со значением в процентах (%) и `height` со значением в пикселях (px).

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

Результат

Сообщения

Выполнить

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

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

Минимальная и максимальная ширина

Установите минимальную ширину блока с классом "resizable-box" равной 200 пикселей, а максимальную - 500 пикселей.

CSS

.resizable-box {
  background-color: lightcoral;
  input1: 200px;
  input2: 500px;
}

                     .resizable-box {
  background-color: lightcoral;
  input1: 200px;
  input2: 500px;
}

HTML

<div class="resizable-box">Этот блок изменяет размер</div>

Используйте свойства `min-width` и `max-width` со значениями в пикселях (px).

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

Результат

Сообщения

Выполнить

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

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

Размер шрифта в em

Установите размер шрифта для параграфа (p) равным 1.5em. Размер шрифта родительского элемента (body) равен 16px.

CSS

body {
  font-size: 16px;
}
p {
  input1: 1.5em;
}

                     body {
  font-size: 16px;
}
p {
  input1: 1.5em;
}

HTML

<p>Текст параграфа</p>

Используйте свойство `font-size` и единицу измерения `em`. 1em равен размеру шрифта родительского элемента.

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

Результат

Сообщения

Выполнить

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

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

Размер шрифта в rem

Задайте размер шрифта для заголовка h1 равным 2rem. Размер шрифта корневого элемента (html) равен 16px.

CSS

html {
  font-size: 16px;
}
h1 {
  input1: 2rem;
}

                     html {
  font-size: 16px;
}
h1 {
  input1: 2rem;
}

HTML

<h1>Заголовок</h1>

Используйте свойство `font-size` и единицу измерения `rem`. 1rem равен размеру шрифта корневого элемента (обычно тега html).

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

Результат

Сообщения

Выполнить

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

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

Высота изображения

Установите высоту изображения равной 150 пикселям, а ширину "auto", чтобы сохранить пропорции.

CSS

img {
  input1: 150px;
  input2: auto;
}

                     img {
  input1: 150px;
  input2: auto;
}

HTML

<img src="https://naytikurs.ru/img/1.png" alt="Пример изображения">

Используйте свойство `height` со значением в пикселях (px) и `width` со значением `auto`.

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

Результат

Сообщения

Выполнить

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

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

Максимальная высота контента

Ограничьте максимальную высоту блока с классом "scrollable-content" до 200 пикселей. Если контент не помещается, добавьте вертикальную полосу прокрутки.

CSS

.scrollable-content {
  background-color: lightyellow;
  input1: 200px;
  input2: scroll;
}

                     .scrollable-content {
  background-color: lightyellow;
  input1: 200px;
  input2: scroll;
}

HTML

<div class="scrollable-content">
  <p>Много текста...</p>
  <p>Много текста...</p>
  <p>Много текста...</p>
  <p>Много текста...</p>
  <p>Много текста...</p>
</div>

Используйте свойство `max-height` со значением в пикселях (px) и свойство `overflow-y` со значением `scroll`.

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

Результат

Сообщения

Выполнить

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

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

Минимальная высота блока

Сделайте минимальную высоту блока с классом "min-height-box" равной 100 пикселям.

CSS

.min-height-box {
  background-color: #f0f0f0;
  input1: 100px;
}

                     .min-height-box {
  background-color: #f0f0f0;
  input1: 100px;
}

HTML

<div class="min-height-box"></div>

Используйте свойство `min-height` и укажите значение в пикселях.

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

Результат

Сообщения

Выполнить

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

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

Комбинирование единиц измерения

Задайте ширину блока с классом "combined-units" равной 50% + 20px.

CSS

.combined-units {
  background-color: lightblue;
  width: input1(50% + 20px);
}

                     .combined-units {
  background-color: lightblue;
  width: input1(50% + 20px);
}

HTML

<div class="combined-units">Блок с комбинированной шириной</div>

Для этого можно использовать функцию `calc()`, которая позволяет производить вычисления со значениями разных единиц измерения.

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

Результат

Сообщения

Выполнить

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

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

Внутренние отступы (padding)

Добавьте внутренние отступы (padding) по 20px со всех сторон для блока с классом "padded-box".

CSS

.padded-box {
  background-color: lightcyan;
  input1: 20px;
}

                     .padded-box {
  background-color: lightcyan;
  input1: 20px;
}

HTML

<div class="padded-box">Блок с внутренними отступами</div>

Используйте свойство `padding` и укажите значение в пикселях.

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

Результат

Сообщения

Выполнить

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

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

Внешние отступы (margin) и auto

Отцентруйте блок с классом "centered-box" по горизонтали, используя внешние отступы (margin). Ширина блока 200px.

CSS

.centered-box {
 background-color: lightpink;
 width: 200px;
 input1: 0 auto;
}

                     .centered-box {
 background-color: lightpink;
 width: 200px;
 input1: 0 auto;
}

HTML

<div class="centered-box">Отцентрованный блок</div>

Для центрирования по горизонтали установите левый и правый margin в auto. Также необходимо указать ширину блока.

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

Результат

Сообщения

Выполнить

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

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

Разные значения padding

Задайте разные внутренние отступы для блока: сверху - 10px, справа - 20px, снизу - 30px, слева - 40px.

CSS

.different-padding {
  background-color: lavender;
  input1: 10px 20px 30px 40px;
}

                     .different-padding {
  background-color: lavender;
  input1: 10px 20px 30px 40px;
}

HTML

<div class="different-padding">Блок с разными padding</div>

Используйте свойство `padding` и укажите четыре значения через пробел, соответствующие отступам сверху, справа, снизу и слева.

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

Результат

Сообщения

Выполнить

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

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