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

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

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

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

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

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

Rems (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 равным 32px.
Напишите CSS-правило для элемента <p>. Установите font-size равным 1.2em.
Напишите CSS-правило для элемента <div>. Установите font-size равным 120%.

Шпаргалка

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

Общие единицы измерения для размеров шрифта:

Пиксели (px): Абсолютная единица измерения, задающая размер шрифта в пикселях
Ems (em): Относительная единица измерения, основанная на размере шрифта родительского элемента
Rems (rem): Относительная единица измерения, основанная на размере шрифта корневого элемента
Проценты (%): Относительная единица измерения, основанная на размере шрифта родительского элемента

p {
    font-size: 16px;
}

h1 {
    font-size: 2.5em;
}

body {
    font-size: 1.4rem;
}

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

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

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