Размер шрифта

Часть раздела Стилизация с CSS путешествия по HTML на Coddy. Урок 19 из 76.

В CSS свойство font-size используется для управления размером текста внутри HTML-элемента.

Вот некоторые распространённые единицы измерения, используемые для задания размеров шрифта:

Пиксели (px): Абсолютная единица измерения, задающая размер шрифта в пикселях. Это самая простая и часто используемая единица для задания размера шрифта.

Эмы (em): Относительная единица, основанная на размере шрифта родительского элемента. Например, если размер шрифта родительского элемента равен 16px, то 1em равен 16px, 2em равен 32px и так далее.

Ремы (rem): Относительная единица измерения, основанная на размере шрифта корневого элемента (<html>). Она обеспечивает большую согласованность во всём документе, поскольку на неё не влияет размер шрифта родительских элементов.

Проценты (%): Относительная единица, основанная на размере шрифта родительского элемента, подобно em. Например, если размер шрифта родительского элемента равен 16px, то 100% равны 16px, 150% равны 24px и так далее.

Например:

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

.small-text {
    font-size: 80%;
}

В этом примере размер шрифта всех элементов <p> (абзацев) задан равным 16px, для всех заголовков <h1> задан размер 2.5em (который будет относительным по отношению к размеру шрифта их родительского элемента), базовый размер шрифта документа задан равным 1.4rem, а для всех элементов с классом small-text задан размер шрифта 80% (который будет относительным по отношению к размеру шрифта их родительского элемента).

Задание

Легко

Вам дан HTML-документ с заголовком (<h1>), абзацем (<p>) и блоком (<div>). Ваша задача — использовать свойство font-size для стилизации этих элементов. Выполните следующие шаги:

Напишите правило CSS, которое выбирает элемент <h1>. Задайте для font-size значение 40px.
Напишите правило CSS, которое выбирает элемент <p>. Задайте для font-size значение 1.2em.
Напишите правило CSS, которое выбирает элемент <div>. Задайте для font-size значение 120%.

Попробуйте сами

<html>
<head>
    <title>Font Size</title>
    <style>
        /* Write CSS rules here */
    </style>
</head>
<body>
    <h1>This is a heading</h1>
    <p>This is a paragraph.</p>
    <div>This is a division.</div>
</body>
</html>