Насыщенность шрифта

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

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

Обычные числовые значения для font-weight включают:

100: Тонкий
200: Сверхсветлый
300: Светлый

400: Обычный
500: Средний
600: Полужирный

700: Жирный
800: Экстражирный
900: Черный

Общие значения ключевых слов для font-weight включают:

normal: Эквивалентно 400
bold: Эквивалентно 700

lighter: Задает более светлое начертание, чем у родительского элемента
bolder: Задает более жирное начертание, чем у родительского элемента

Например:

p {
    font-weight: normal;
}

h1 {
    font-weight: 700;
}

.highlight {
    font-weight: bold;
}

Задание

Легко

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

Напишите CSS-правило для элемента <h1>. Установите font-weight в значение 900.
Напишите CSS-правило для элемента <p>. Установите font-weight в значение lighter.
Напишите CSS-правило для элемента <div>. Установите font-weight в значение 600.

Шпаргалка

Свойство font-weight управляет жирностью или толщиной текста.

Числовые значения:

100: Тонкий (Thin)
200: Сверхсветлый (Extra Light)
300: Светлый (Light)
400: Нормальный (Normal)
500: Средний (Medium)
600: Полужирный (Semi Bold)
700: Жирный (Bold)
800: Сверхжирный (Extra Bold)
900: Тяжелый (Black)

Ключевые слова:

normal: Эквивалентно 400
bold: Эквивалентно 700
lighter: Более светлое начертание, чем у родительского элемента
bolder: Более жирное начертание, чем у родительского элемента

p {
    font-weight: normal;
}

h1 {
    font-weight: 700;
}

.highlight {
    font-weight: bold;
}

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

<html>
<head>
    <title>Font Weight</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>