Относительный размер шрифта

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

К примеру, для всего документа задан размер шрифта:

В задании про наследование мы разбирали, что все дочерние элементы с необъявленным значением размера шрифта унаследуют этот размер, то есть 16px .

Заголовку на странице мы зададим другое фиксированное значение размера шрифта:

Пока что всё хорошо. Но представьте, что теперь появляется требование: на больших экранах мониторов увеличить размер шрифта документа с 16px до 20px . Если поменять размер у body , то у «наследников» размер тоже изменится. Но у заголовка размер никак не поменяется, он будет фиксированным — 32px .

Хочется сделать так, чтобы при изменении основного размера шрифта для родителя (в нашем случае это body ), его дочерние элементы пропорционально меняли свои размеры шрифта. И для этого случая есть специальная единица измерения — em .

Величина 1em — это такой же размер шрифта, что и у родителя. Соответственно, если мы хотим, чтобы шрифт дочернего элемента был всегда в 2 раза больше родительского, то зададим значение 2em :

Такой подход к написанию стилей позволяет сделать код более гибким.

Наравне с «абсолютными» ключевыми словами существует пара «относительных» ключевых слов, которые применяются к размеру шрифта: larger и smaller . Они буквально делают размер шрифта элемента больше или меньше того размера, который задан его родительскому элементу. Подробно об этих ключевых словах можно узнать в спецификации.

Источник

Стилизация преформатированного текста

В первом раскомментируемом правиле для pre и code задаются цвет текста color и фоновый цвет background-color . Их мы разбирали в одном из прошлых заданий.

Дальше идут свойства border и border-radius , мы уже немного пробовали работать с этими свойствами, так что вам они знакомы.

Ещё в первом раскомментированном правиле осталось свойство font-family . Помните, в задании про font-family упоминался моноширинный шрифт? Так вот тут мы этим типом шрифта и воспользовались. Название моноширинный хоть и звучит непонятно, но по сути своей не сложно. В моноширинном шрифте все символы занимают одинаковое пространство. Такой шрифт использовался раньше в печатных машинках, а сейчас популярен в редакторах кода. Даже сейчас в редакторе кода, в котором вы проходите задания, вы набираете текст именно моноширинным шрифтом.

Ок, идём дальше. Следующими идут отдельные правила для pre и code , в которых задаются внутренние отступы. С ними вы тоже уже знакомы.

Перейдём ко второй задаче.

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

<blockquote> <p>Ум ценится дорого, когда дешевеет сила.</p> <cite>Джейсон Стэтхэм</cite> </blockquote>

Источник

Свойство line-height, высота строки

Окей, с помощью свойства font-size мы управляем размером отдельных символов шрифта. Но дело в том, что тексты — это обычно больше, чем набор символов. Тексты состоят из строк, которые располагаются друг под другом. И хотелось бы уметь управлять расположением этих строк относительно друг друга и другого контента.

Для этого в CSS есть свойство line-height . Оно управляет высотой строки или, если точнее, межстрочным интервалом.

Как и в случае с размером шрифта, значения line-height можно задавать разными способами.

По умолчанию это свойство имеет значение normal . Оно указывает браузеру, что межстрочный интервал нужно подобрать автоматически, исходя из размера шрифта. Спецификация рекомендует устанавливать его в пределах 100-120% от размера шрифта. То есть:

Значение normal позволяет всем нестилизованным текстам выглядеть удобочитаемо. Однако, если есть необходимость отойти от стилизации по умолчанию, line-height можно задать фиксированное абсолютное значение в px .

Источник

Относительная высота строки

Итак, какие варианты для line-height мы уже рассмотрели:

• относительное значение normal , вычисляется браузером в зависимости от font-size автоматически, мы не можем им управлять;
• абсолютное значение в px .

А если нам нужно задать относительное значение, но не такое, как normal ? Так тоже можно. Для этого значение line-height задаётся в процентах или в виде множителя. В таком случае браузер вычисляет значение динамически в зависимости от font-size :

Как вы понимаете, относительные значения более гибкие, чем абсолютные. Но для простых сайтов, таких как наш, фиксированных font-size и line-height будет вполне достаточно.

Хотите начать карьеру веб-разработчика? Записывайтесь на профессию «Фронтенд-разработчик», которая стартует 8 августа 2023. Всего от 4 130 ₽ в месяц.

Источник

Свойство text-transform, регистр символов

С помощью CSS можно также управлять регистром символов: делать буквы строчными (маленькими) или заглавными (большими). Делается это с помощью свойства text-transform . Его значения:

1. lowercase — все строчные;
2. uppercase — все заглавные;
3. capitalize — каждое слово начинается с большой буквы;
4. none — отменяет изменение регистра.

Без лишних слов — к практике!

Хотите научиться профессионально писать код на самом востребованном языке программирования? Записывайтесь на профессию «React-разработчик», которая стартует 5 сентября 2023. Всего от 4 130 ₽ в месяц.

Источник