Относительные единицы измерения (%, em, rem): Тренажер CSS

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

В этом блоке заданий вы попрактикуетесь в использовании относительных единиц измерения в CSS: процентов (%), em и rem. Эти единицы позволяют создавать более гибкие и масштабируемые макеты, размеры которых зависят от других элементов или настроек браузера. Задания построены от простого к сложному: начиная с базового применения процентов для ширины и высоты, переходя к использованию em для размеров шрифтов и отступов относительно родительских элементов, и заканчивая применением rem для создания консистентных размеров относительно корневого элемента документа. Вы будете заполнять пропуски в CSS-коде, чтобы достичь нужного визуального результата.

Список тем

Ширина в процентах

Задайте ширину внутреннего синего блока так, чтобы она составляла ровно половину (50%) ширины его родительского элемента с черной рамкой. Родительский элемент имеет фиксированную ширину.

CSS

.parent {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
}

.child {
  width: input1;
  height: 80px;
  background-color: lightblue;
}

                     .parent {
  width: 200px;
  height: 100px;
  border: 1px solid black;
  margin: 10px;
}

.child {
  width: input1;
  height: 80px;
  background-color: lightblue;
}

HTML

<div class="parent">
  <div class="child"></div>
</div>

Для задания ширины относительно родительского элемента используйте единицу измерения '%' для свойства 'width'. Укажите значение 50%.

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

Результат

Сообщения

Выполнить

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

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

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

Задайте высоту внутреннего зеленого блока так, чтобы она составляла 75% высоты его родительского элемента с серой рамкой. Обратите внимание, что для работы процентной высоты у родителя должна быть задана высота.

CSS

.container {
  width: 150px;
  height: 200px; /* Высота родителя задана */
  border: 1px solid grey;
  margin: 10px;
}

.inner {
  width: 100%;
  height: input1;
  background-color: lightgreen;
}

                     .container {
  width: 150px;
  height: 200px; /* Высота родителя задана */
  border: 1px solid grey;
  margin: 10px;
}

.inner {
  width: 100%;
  height: input1;
  background-color: lightgreen;
}

HTML

<div class="container">
  <div class="inner"></div>
</div>

Используйте единицу измерения '%' для свойства 'height'. Установите значение 75%. Убедитесь, что у родительского элемента задана высота (в данном случае она уже задана).

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

Результат

Сообщения

Выполнить

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

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

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

Сделайте размер шрифта текста в элементе с классом 'highlighted' в полтора раза больше (1.5), чем у его родительского элемента ('text-block'). Размер шрифта родителя уже задан.

CSS

.text-block {
  font-size: 16px; /* Базовый размер шрифта родителя */
  margin: 10px;
  border: 1px dashed #ccc;
  padding: 10px;
}

.highlighted {
  font-size: input1;
  color: blue;
}

                     .text-block {
  font-size: 16px; /* Базовый размер шрифта родителя */
  margin: 10px;
  border: 1px dashed #ccc;
  padding: 10px;
}

.highlighted {
  font-size: input1;
  color: blue;
}

HTML

<div class="text-block">
  Это обычный текст.
  <span class="highlighted">А это выделенный текст.</span>
</div>

Используйте единицу измерения 'em' для свойства 'font-size'. Значение '1em' равно текущему размеру шрифта элемента (унаследованному от родителя). Чтобы сделать шрифт в 1.5 раза больше, используйте значение '1.5em'.

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

Результат

Сообщения

Выполнить

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

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

Отступы в 'em'

Задайте верхний и нижний внутренние отступы (padding) для кнопки так, чтобы они были равны половине текущего размера шрифта кнопки. Также задайте левый и правый внутренние отступы так, чтобы они были равны текущему размеру шрифта кнопки.

CSS

.button {
  font-size: 14px;
  background-color: #eee;
  border: 1px solid #ccc;
  cursor: pointer;
  display: inline-block;
  margin: 10px;
  padding: input1 input2;
}

                     .button {
  font-size: 14px;
  background-color: #eee;
  border: 1px solid #ccc;
  cursor: pointer;
  display: inline-block;
  margin: 10px;
  padding: input1 input2;
}

HTML

<button class="button">Нажми меня</button>

Используйте единицу 'em' для свойства 'padding'. '1em' в контексте padding равен текущему 'font-size' элемента. Для верхнего/нижнего отступа используйте '0.5em', для левого/правого - '1em'. Можно использовать сокращенную запись 'padding: 0.5em 1em;'.

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

Результат

Сообщения

Выполнить

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

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

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

Задайте размер шрифта для заголовка `<h1>` равным 24px и для параграфа `<p>` равным 14px, используя единицу 'rem'. Базовый размер шрифта для всего документа (`html`) установлен в 10px.

CSS

html {
  font-size: 10px; /* Базовый размер шрифта */
}

body {
  margin: 10px;
}

h1 {
  font-size: input1;
  margin-bottom: 5px;
}

p {
  font-size: input2;
  margin-top: 0;
}

                     html {
  font-size: 10px; /* Базовый размер шрифта */
}

body {
  margin: 10px;
}

h1 {
  font-size: input1;
  margin-bottom: 5px;
}

p {
  font-size: input2;
  margin-top: 0;
}

HTML

<h1>Заголовок</h1>
<p>Это текст параграфа.</p>

Используйте единицу 'rem'. '1rem' всегда равен значению 'font-size' корневого элемента (`html`). В данном случае `1rem = 10px`. Рассчитайте, сколько 'rem' нужно для 24px (24 / 10 = 2.4) и для 14px (14 / 10 = 1.4).

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

Результат

Сообщения

Выполнить

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

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

Отступы в 'rem' для консистентности

Задайте одинаковый нижний отступ (margin-bottom) для заголовка `<h2>` и параграфа `<p>` равный 16px, используя единицу 'rem'. Базовый размер шрифта `html` равен 16px.

CSS

html {
  font-size: 16px; /* Базовый размер шрифта */
}

body {
  margin: 10px;
  line-height: 1.4;
}

h2 {
  font-size: 1.5em; /* Не влияет на расчет rem для margin */
  margin-top: 0;
  margin-bottom: input1;
}

p {
  font-size: 1em; /* Не влияет на расчет rem для margin */
  margin-top: 0;
  margin-bottom: input2;
}

                     html {
  font-size: 16px; /* Базовый размер шрифта */
}

body {
  margin: 10px;
  line-height: 1.4;
}

h2 {
  font-size: 1.5em; /* Не влияет на расчет rem для margin */
  margin-top: 0;
  margin-bottom: input1;
}

p {
  font-size: 1em; /* Не влияет на расчет rem для margin */
  margin-top: 0;
  margin-bottom: input2;
}

HTML

<h2>Раздел 1</h2>
<p>Текст первого раздела.</p>
<h2>Раздел 2</h2>
<p>Текст второго раздела.</p>

Используйте 'rem' для свойства 'margin-bottom'. Так как базовый размер шрифта (`html`) равен 16px, то `1rem` также равен 16px. Поэтому для отступа в 16px нужно использовать значение '1rem'.

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

Результат

Сообщения

Выполнить

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

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

Вложенность и 'em'

Внутри блока с классом 'outer' есть блок 'middle', а внутри него 'inner'. Каждый следующий блок должен иметь размер шрифта в 1.2 раза больше предыдущего. Размер шрифта 'outer' - 10px. Задайте размеры шрифтов для 'middle' и 'inner' с помощью 'em'.

CSS

.outer {
  font-size: 10px;
  margin: 10px;
  padding: 5px;
  border: 1px solid red;
}

.middle {
  font-size: input1;
  margin: 5px;
  padding: 5px;
  border: 1px solid green;
}

.inner {
  font-size: input2;
  margin: 5px;
  padding: 5px;
  border: 1px solid blue;
}

                     .outer {
  font-size: 10px;
  margin: 10px;
  padding: 5px;
  border: 1px solid red;
}

.middle {
  font-size: input1;
  margin: 5px;
  padding: 5px;
  border: 1px solid green;
}

.inner {
  font-size: input2;
  margin: 5px;
  padding: 5px;
  border: 1px solid blue;
}

HTML

<div class="outer">
  Outer Text (10px)
  <div class="middle">
    Middle Text (should be 12px)
    <div class="inner">
      Inner Text (should be 14.4px)
    </div>
  </div>
</div>

Единица 'em' рассчитывается относительно родительского элемента. Для '.middle' задайте 'font-size: 1.2em;', он будет равен 10px * 1.2 = 12px. Для '.inner' также задайте 'font-size: 1.2em;', он будет рассчитан относительно '.middle', т.е. 12px * 1.2 = 14.4px.

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

Результат

Сообщения

Выполнить

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

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

Масштабирование изображения в процентах

Сделайте так, чтобы изображение всегда занимало 80% ширины своего контейнера ('img-container') и его высота масштабировалась пропорционально. Контейнер имеет переменную ширину.

CSS

.img-container {
  width: 60%; /* Ширина контейнера может меняться */
  border: 1px solid orange;
  margin: 10px;
  padding: 5px;
}

.resizable-img {
  display: block; /* Убирает лишний отступ под изображением */
  width: input1;
  height: input2;
  max-width: 100%; /* Предотвращает выход за пределы контейнера, если исходный размер больше */
}

                     .img-container {
  width: 60%; /* Ширина контейнера может меняться */
  border: 1px solid orange;
  margin: 10px;
  padding: 5px;
}

.resizable-img {
  display: block; /* Убирает лишний отступ под изображением */
  width: input1;
  height: input2;
  max-width: 100%; /* Предотвращает выход за пределы контейнера, если исходный размер больше */
}

HTML

<div class="img-container">
  <img src="https://naytikurs.ru/img/5.png" alt="Пример изображения" class="resizable-img">
</div>

Чтобы изображение масштабировалось по ширине контейнера, задайте ему свойство 'width' в процентах (80%). Чтобы высота подстраивалась автоматически, сохраняя пропорции, установите 'height: auto;' (это значение по умолчанию, но его можно указать явно для ясности).

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

Результат

Сообщения

Выполнить

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

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