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

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

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

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

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

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

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

Проценты (%): Относительная единица, основанная на размере шрифта родительского элемента, аналогично 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%;
}

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

Задание

Легко

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

Напишите правило CSS, выбирающее элемент <h1>. Установите значение font-size равным 32px.
Напишите правило CSS, выбирающее элемент <p>. Установите значение font-size равным 1.2em.
Напишите правило CSS, выбирающее элемент <div>. Установите значение font-size равным 120%.

REQUIRED OUTPUT FORMAT: [Your translated content here]

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

<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>