Бесплатный курс по HTML/CSS. Зарегистрируйтесь для отслеживания прогресса →

HTML/CSS: Единицы измерения

На протяжении всего курса, в качестве единиц измерения, использовались пиксели — наименьший элемент экрана, который выводит цвет. Множество пикселей (а в экране их много) формируют картинку, на которую вы и смотрите. Они использовались для указания размера шрифта, высоты и ширины элемента, внутренних и внешних отступов, межстрочного интервала и так далее.

Пикcели являются абсолютной единицей измерения в CSS. Что же это значит? Это значит, что вне зависимости от размера экрана значение, указанное в пикселях, сохранится. Если указан отступ в 30 пикселей, то он будет таким на телефоне, на телевизоре с диагональю в 102 дюйма и на домашней микроволновке.

С одной стороны это хорошо, ведь можно быть уверенным в том, что на разных устройствах все размеры сохранятся. В этом же заключается и проблема. Представьте себе текст с размером шрифта 12 пикселей. Он будет нормально читаться на среднестатистическом экране, но его использование на телевизоре или смартфоне приведёт к тому, что текст будет слишком маленьким для комфортного чтения, потому что устройства имеют разные размеры экранов. Если экран имеет всего 50 пикселей, то такой текст станет невероятно большим, так как займёт большую часть экрана

Помимо пикселей существуют и другие абсолютные единицы измерения:

  • сантиметры
  • миллиметры
  • дюймы
  • пункты

Хоть они нечасто используются, но могут быть полезны при вёрстке страницы для печати. На сайтах используются только пиксели.

В противовес абсолютным единицам измерения существуют относительные. По их названию понятно, что размер такого элемента не фиксируется, а высчитывается относительно чего-то. В случае с интернет-страницами этим «чего-то» является размер шрифта. Почему именно шрифт? Представьте, что вы, как пользователь, увеличиваете размер шрифта на сайте для собственного удобства. Если отступы, ширина, высота не будет привязана к размеру текста, то такой текст будет выходить за пределы блока. А текст — основа любой страницы в интернете.

Одной из относительных единиц измерения являются проценты. Они считаются от размера шрифта родительского элемента, то есть элемента, внутри которого находятся. Например,

<section class="news">
  <h2>Новости</h2>
</section>
.news {
  font-size: 20px;
}

.news h2 {
  font-size: 200%;
}

Какого размера будет заголовок второго уровня? Правильный ответ: 40px, так как для секции news установлен размер шрифта в 20px. Относительно этого размера и высчитывалось значение 200%. Здесь неважно, какие теги есть ещё, в каких обёртках лежат эти новости — размер считается от значения font-size элемента news.

Но важно помнить, что font-size — наследуемое свойство. Если оно явно не указано у элемента news в нашем примере, то, для него, будет установлено значение font-size родителя. Расширим пример:

<main>
  <section class="news">
    <h2>Новости</h2>
  </section>
</main>
main {
  font-size: 16px;
}

h2 {
  font-size: 200%;
}

Какой размер у заголовка второго уровня? Правильный ответ: 32px. Если построить логическую цепочку размеров шрифта, то она выглядит так:

  • У элемента <main> размер шрифта установлен в значение 16px
  • У элемента с классом news нет отдельного указания размера шрифта, поэтому оно наследуется от <main>, то есть тоже 16px
  • У заголовка второго уровня размер шрифта 200%. Значение устанавливается относительно размера шрифта родителя, то есть блока с классом .news. Итого получается 16px * 2 = 32px

Существует ещё несколько основных относительных единиц измерения:

  1. em. определяется относительно размера шрифта у родительского элемента, т.е. 1.5em будет на 50% больше базового вычисленного размера шрифта родителя. Очень похоже на использование процентов, только указывается немного по другому
  2. rem. определяется относительно размера шрифта у корневого элемента, т.е. у тега html (значение по-умолчанию 16px)

Задание

Добавьте <div> с классом header. Установите размер шрифта в 22px. Внутрь <div> вложите параграф с классом offer и установите размер шрифта в 200%. Стили запишите в теге <style>

Упражнение не проходит проверку — что делать? 😶

Если вы зашли в тупик, то самое время задать вопрос в «Обсуждениях». Как правильно задать вопрос:

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

Тесты устроены таким образом, что они проверяют решение разными способами и на разных данных. Часто решение работает с одними входными данными, но не работает с другими. Чтобы разобраться с этим моментом, изучите вкладку «Тесты» и внимательно посмотрите на вывод ошибок, в котором есть подсказки.

Мой код отличается от решения учителя 🤔

Это нормально 🙆, в программировании одну задачу можно выполнить множеством способов. Если ваш код прошел проверку, то он соответствует условиям задачи.

В редких случаях бывает, что решение подогнано под тесты, но это видно сразу.

Прочитал урок — ничего не понятно 🙄

Создавать обучающие материалы, понятные для всех без исключения, довольно сложно. Мы очень стараемся, но всегда есть что улучшать. Если вы встретили материал, который вам непонятен, опишите проблему в «Обсуждениях». Идеально, если вы сформулируете непонятные моменты в виде вопросов. Обычно нам нужно несколько дней для внесения правок.

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

Полезное

  • С помощью относительных единиц можно управлять не только размером шрифта, но и остальными свойствами, которые в качестве значения принимают число и единицу измерения


Нашли ошибку? Есть что добавить? Пулреквесты приветствуются https://github.com/hexlet-basics
Если вы столкнулись с трудностями и не знаете, что делать, задайте вопрос в нашем большом и дружном сообществе