Размеры и единицы измерения в CSS [Модуль 1: Основы CSS]: Тренажер CSS

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

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

Список тем

Ширина блока

id: 37295_size-unit-1

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

CSS

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

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

HTML

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

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

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

Результат

Сообщения

Выполнить

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

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

id: 37295_size-unit-2

Сделайте блок 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).

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

Результат

Сообщения

Выполнить

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

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

id: 37295_size-unit-3

Установите минимальную ширину блока с классом "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

id: 37295_size-unit-4

Установите размер шрифта для параграфа (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

id: 37295_size-unit-5

Задайте размер шрифта для заголовка 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).

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

Результат

Сообщения

Выполнить

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

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

id: 37295_size-unit-6

Установите высоту изображения равной 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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37295_size-unit-7

Ограничьте максимальную высоту блока с классом "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`.

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

Результат

Сообщения

Выполнить

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

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

id: 37295_size-unit-8

Сделайте минимальную высоту блока с классом "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` и укажите значение в пикселях.

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

Результат

Сообщения

Выполнить

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

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

id: 37295_size-unit-9

Задайте ширину блока с классом "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)

id: 37295_size-unit-10

Добавьте внутренние отступы (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

id: 37295_size-unit-11

Отцентруйте блок с классом "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

id: 37295_size-unit-12

Задайте разные внутренние отступы для блока: сверху - 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` и укажите четыре значения через пробел, соответствующие отступам сверху, справа, снизу и слева.

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

Результат

Сообщения

Выполнить

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