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>
Помимо процентов к относительным единицам измерения также относятся:
- em. Похожи на процент, только указывают, на сколько больше должно быть значение.
- rem. Считаются относительно не родительского блока, а значения, указанного у тега
html
.
Задание
Добавьте div
с классом header
. Установите размер шрифта в 22px. Внутри вложите параграф с классом offer
и установите размер шрифта в 200%. Стили запишите в теге style
.