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

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

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

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

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

В противовес абсолютным единицам измерения существуют относительные. Они рассчитываются, исходя из названия, относительно чего-то. Основной относительной единицей измерения являются проценты. Они высчитывают значения, исходя из размеров, указанных в ближайшем родительском блоке. Например:

<style>
  .big-text {
    font-size: 45px;
    /* Здесь значение указано абсолютное и всегда будет равняться 45 пикселям */
  }

  .very-big-text {
    font-size: 150%;
    /* Относительное значение. В данном случае высчитывается от значения в классе .big-text и будет равно 67.5 пикселей. При изменении значения в классе .big-text данное значение будет пересчитано автоматически */
  }
</style>

<div class="big-text">
    <p>Здесь большой текст</p>

    <div class="very-big-text">
        <p>А здесь текст на 50% крупнее большого текста</p>
    </div>
</div>

Помимо процентов к относительным единицам измерения также относятся:

1. em. Похожи на процент, только указывают, на сколько больше должно быть значение.
2. rem. Считаются относительно не родительского блока, а значения, указанного у тега html.

Задание

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

CSS: Цветовые модели

При обозначении цвета в правилах CSS (color, background-color, border и т.д.) можно использовать разные цветовые модели в зависимости от ситуации или предпочтений.

Цветовая модель — способ математического обозначения нужного цвета. Наиболее распространённая модель, с которой многие сталкивались — RGB (Red Green Blue). Она описывает, сколько красного, зелёного и синего содержится в нужном цвете.

Для определения цвета с помощью RGB используется написание rgb(r, g, b). В скобках через запятую указываются пропорции цветов. Каждый цвет представляет собой число от 0 до 255, где 0 — отсутствие цвета, а 255 — максимальное количество. В таком написании белый цвет текста можно получить, используя значение rgb(255, 255, 255), а чёрный rgb(0, 0, 0):

color: rgb(255, 255, 255); // Белый цвет
color: rgb(0, 0, 0) // Чёрный цвет

Помимо такого написания, можно представить числа от 0 до 255 в шестнадцатеричной системе счисления (подробнее читайте на «Википедии»). В этом случае обозначение цвета станет таким, каким мы его использовали на протяжении всего курса. При записи в шестнадцатеричной системе не нужно указывать модель в виде rgb(...):

color: #FFFFFF; // Белый цвет
color: #000000; // Чёрный цвет

В модель RGB также возможно добавить степень прозрачности. В графическом дизайне такой параметр называется «альфа» каналом. Для использования альфа-канала необходима запись rgba, где a — alpha channel. Параметр прозрачности принимает числа от 0 до 1, где полностью прозрачный цвет обозначается нулём, а полностью непрозрачный — единицей.

color: rgba(255, 255, 255, 0.5) // Полупрозрачный белый цвет
color: rgba(0, 0, 0, 1) // Непрозрачный чёрный цвет

Задание

Создайте параграф с классом background-black-50 и установите ему полупрозрачный чёрный фон. Используйте цветовую модель rgba. Стили запишите в теге style.