Работа со шрифтами в CSS. Часть 1: семейство и начертание
Чтение — около 7 минут· без учёта практики
В предыдущем уроке мы сделали палитру сайта Тони читаемой. Вторая составляющая внешнего вида текста — шрифт. Пока сайт показан шрифтом, который выбрал браузер, а у заголовков нет своего характера. В этом уроке подберём системный шрифт для основного текста, сделаем заголовки жирными и оформим цитату шрифтом с засечками. Собственный округлый шрифт для заголовков подключим в следующей части.
Какие бывают шрифты
Шрифты отличаются формой букв и других символов. Одни подходят для основного текста, другие помогают выделить заголовок или передать настроение. Для начала познакомимся с несколькими распространёнными группами:
- С засечками (
serif). На концах линий букв есть небольшие штрихи — засечки. Примеры: Times New Roman и Georgia. Такие шрифты часто встречаются в книгах и подходят для статей и цитат. - Без засечек (
sans-serif). У букв нет дополнительных штрихов на концах линий. Примеры: Arial и Verdana. Такие шрифты часто используют в интерфейсах, заголовках и основном тексте сайтов. - Моноширинные (
monospace). Каждый символ занимает одинаковую ширину: например, узкая буква «i» и широкая «m». Это удобно для кода, где важно выравнивание. Пример: Courier New. - Рукописные (
cursive). Напоминают надписи от руки. Их можно использовать для короткой подписи или поздравления. - Декоративные (
fantasy). Отличаются необычной формой букв и привлекают внимание. Подходят для коротких заголовков и афиш; длинный текст таким шрифтом может быть трудно читать.
Эти признаки могут сочетаться: например, Courier New — моноширинный шрифт с засечками. Для сайта Тони выберем основной текст без засечек, а цитату оформим шрифтом с засечками. Теперь разберёмся, как задать этот выбор в CSS.
Свойство font-family
Шрифт выбирает свойство
font-family. Предположим, абзацы страницы нужно показать шрифтом Courier New:
p {
font-family: "Courier New"; /* шрифт Courier New */
}
Такая запись работает, только если шрифт установлен на устройстве посетителя. Если его нет, страница будет показана
шрифтом, который браузер использует по умолчанию. Заранее вы не знаете, какие шрифты есть у посетителя, поэтому
в font-family перечисляют через запятую несколько шрифтов: основной и запасные. Если в выбранном шрифте нет какого-то символа,
браузер ищет его в следующих шрифтах из списка. Поэтому отдельные символы в одном абзаце могут отображаться разными шрифтами.
Последним в списке указывают общее семейство шрифтов (англ. generic family). Если ни одного из перечисленных шрифтов нет, браузер покажет текст шрифтом того же типа, а не первым попавшимся.
Свойство font-family: попробуйте сами
Для первого абзаца браузер ищет Times New Roman, а если его нет — любой шрифт с засечками (serif). Для второго — Courier New или любой моноширинный шрифт (monospace). Шрифта из третьего правила нет ни на одном устройстве, поэтому абзац показан запасным sans-serif. Замените его на serif.
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Свойство font-family и запасные шрифты</title>
<style>
.times {
font-family: "Times New Roman", serif; /* основной шрифт Times New Roman, запасное семейство — с засечками */
}
.courier {
font-family: "Courier New", monospace; /* основной шрифт Courier New, запасное семейство — моноширинные */
}
.missing {
font-family: "Шрифт, которого нет", sans-serif; /* шрифта нет — браузер берёт семейство без засечек */
}
</style>
</head>
<body>
<p class="times">Абзац шрифтом Times New Roman: Тони любит гулять в любую погоду.</p>
<p class="courier">Абзац шрифтом Courier New: Тони любит гулять в любую погоду.</p>
<p class="missing">Абзац запасным шрифтом без засечек: Тони любит гулять в любую погоду.</p>
</body>
</html>
Название шрифта из нескольких слов я рекомендую заключать в кавычки: "Times New Roman". Это
обязательно, если в названии есть цифры в начале слова или знаки препинания, — без кавычек браузер не разберёт такое
название. Названия общих семейств, наоборот, пишут без кавычек: "serif" в кавычках — это шрифт с
названием «serif», а не семейство.
Общие семейства шрифтов
Названия общих семейств указаны в скобках во вводном списке. Ещё одно значение — system-ui:
оно выбирает шрифт интерфейса операционной системы.
Общие семейства шрифтов: попробуйте сами
Каждый абзац показан шрифтом общего семейства, который браузер выбрал на вашем устройстве. Откройте пример на телефоне — шрифты могут оказаться другими, особенно у cursive и fantasy.
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Общие семейства шрифтов</title>
<style>
.serif { font-family: serif; }
.sans-serif { font-family: sans-serif; }
.monospace { font-family: monospace; }
.cursive { font-family: cursive; }
.fantasy { font-family: fantasy; }
.system-ui { font-family: system-ui; }
</style>
</head>
<body>
<p class="serif">serif — с засечками: Я карликовый пинчер.</p>
<p class="sans-serif">sans-serif — без засечек: Я карликовый пинчер.</p>
<p class="monospace">monospace — моноширинный: Я карликовый пинчер.</p>
<p class="cursive">cursive — рукописный: Я карликовый пинчер.</p>
<p class="fantasy">fantasy — декоративный: Я карликовый пинчер.</p>
<p class="system-ui">system-ui — системный шрифт интерфейса: Я карликовый пинчер.</p>
</body>
</html>
Какой именно шрифт стоит за общим семейством, решает браузер и операционная система. Семейства cursive и
fantasy на разных устройствах выглядят совсем по-разному, поэтому как запасной вариант их используют
редко.
Безопасные шрифты
Ниже перечислены часто используемые наборы шрифтов, которые с большой вероятностью есть на компьютерах с Windows и macOS. Их называют безопасными. На телефонах с Android большинства из них нет — там сработает общее семейство в конце списка. Поэтому в каждой строке оно обязательно.
Значение font-family |
Пример |
|---|---|
| Arial, Helvetica, sans-serif | Съешь же ещё этих сочных мандаринов. |
| "Arial Black", Gadget, sans-serif | Съешь же ещё этих сочных мандаринов. |
| "Comic Sans MS", cursive, sans-serif | Съешь же ещё этих сочных мандаринов. |
| Impact, Charcoal, sans-serif | Съешь же ещё этих сочных мандаринов. |
| "Lucida Sans Unicode", "Lucida Grande", sans-serif | Съешь же ещё этих сочных мандаринов. |
| Tahoma, Geneva, sans-serif | Съешь же ещё этих сочных мандаринов. |
| "Trebuchet MS", Helvetica, sans-serif | Съешь же ещё этих сочных мандаринов. |
| Verdana, Geneva, sans-serif | Съешь же ещё этих сочных мандаринов. |
Значение font-family |
Пример |
|---|---|
| Georgia, serif | Съешь же ещё этих сочных мандаринов. |
| "Palatino Linotype", "Book Antiqua", Palatino, serif | Съешь же ещё этих сочных мандаринов. |
| "Times New Roman", Times, serif | Съешь же ещё этих сочных мандаринов. |
Значение font-family |
Пример |
|---|---|
| "Courier New", Courier, monospace | Съешь же ещё этих сочных мандаринов. |
| "Lucida Console", Monaco, monospace | Съешь же ещё этих сочных мандаринов. |
Ещё один надёжный вариант — системный набор шрифтов. Он показывает текст тем же шрифтом, что и интерфейс устройства: привычно для читателя, хорошо читается на экране и ничего не нужно загружать. Такой набор мы зададим основному тексту сайта Тони:
body {
font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
Значение system-ui понимают все современные браузеры. Названия -apple-system (старые версии
Safari), "Segoe UI" (Windows) и Roboto (Android) подстрахуют браузеры, которые его не
знают, а sans-serif завершает список.
Насыщенность и начертание
Насыщенность (толщину линий букв) задаёт свойство
font-weight. Допустимы числа от 1 до 1000. Часто используют значения от 100 (тонкое) до 900 (жирное) с шагом 100;
доступные насыщенности зависят от шрифта. Есть и ключевые слова: normal — то же, что
400, bold — 700. Ключевые слова bolder и lighter делают шрифт жирнее или тоньше,
чем у родителя.
Начертание задаёт свойство
font-style: normal — обычное, italic — курсив, oblique — наклонное. Курсив — отдельно
нарисованные буквы, наклонное начертание — обычные буквы с наклоном; если в шрифте нет курсива, браузер наклоняет
обычные буквы.
Насыщенность и начертание: попробуйте сами
Значения normal и bold соответствуют 400 и 700. Начертания 300 в шрифте Georgia нет, поэтому браузер показывает ближайшее — обычное. В последнем абзаце font-style: normal отменяет курсив, который элемент em получает из стилей браузера.
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Насыщенность и начертание шрифта</title>
<style>
body {
font-family: Georgia, serif;
font-size: 1.25rem;
}
.normal { font-weight: normal; } /* то же, что 400 */
.bold { font-weight: bold; } /* то же, что 700 */
.w300 { font-weight: 300; }
.italic { font-style: italic; } /* курсив */
.plain { font-style: normal; } /* отменяет курсив элемента em */
</style>
</head>
<body>
<p class="normal">font-weight: normal (400)</p>
<p class="bold">font-weight: bold (700)</p>
<p class="w300">font-weight: 300 — светлое начертание, если оно есть в шрифте</p>
<p class="italic">font-style: italic</p>
<p>Элемент em по умолчанию курсивом: <em>почти</em> всегда, а с normal — <em class="plain">почти</em> всегда.</p>
</body>
</html>
Насыщенность работает, только если в шрифте есть начертание нужной толщины. Если его нет, браузер берёт ближайшее доступное, а для полужирного может «дорисовать» буквы сам. Такое искусственное полужирное начертание выглядит грубее настоящего: заголовки на сайте Тони получат шрифт, в котором нужная насыщенность есть.
Сокращённое свойство font
Свойство
font
задаёт сразу несколько свойств шрифта. Порядок записи: начертание и насыщенность (необязательные, в любом порядке),
затем обязательные размер и семейство — семейство всегда последним:
p {
font: italic bold 1.25rem Georgia, serif;
}
После размера через косую черту можно указать межстрочный интервал: 1.25rem/1.5. Его мы рассмотрим в уроке
«Форматирование текста».
Сокращённое свойство font: попробуйте сами
Первые два абзаца выглядят одинаково: четыре свойства и одно font. В третьем абзаце font у span не указывает начертание и насыщенность, поэтому они сброшены в normal. Удалите sans-serif из правила .reset — объявление станет ошибочным, и курсив вернётся.
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Сокращённое свойство font</title>
<style>
.long {
font-style: italic;
font-weight: bold;
font-size: 1.25rem;
font-family: Georgia, serif;
}
.short {
font: italic bold 1.25rem Georgia, serif; /* те же четыре значения одним свойством */
}
.reset {
font: 1rem sans-serif; /* пропущенные начертание и насыщенность сбрасываются в normal */
}
</style>
</head>
<body>
<p class="long">Четыре отдельных свойства.</p>
<p class="short">Одно свойство font.</p>
<p class="short"><span class="reset">Свойство font сбросило курсив и полужирное начертание.</span></p>
</body>
</html>
Проверьте себя
Выберите ответ — объяснение появится сразу. Ответ можно менять.
Задание
Ожидаемый результат: основной текст на всех страницах — системным шрифтом без засечек, заголовки — жирным шрифтом без засечек, цитата из «Каштанки» на главной — курсивом с засечками.
Выполните задание
Условие задания
css/style.css
/* Общие стили сайта Тони */
body {
background-color: linen;
color: #2b211b; /* цвет для потомков без собственного значения */
font-size: 1.0625rem; /* 17px при настройке браузера по умолчанию */
}
/* Общий цвет заголовков — групповой селектор */
h1,
h2 {
color: saddlebrown;
}
/* Размеры заголовков в rem — от размера шрифта корня, а не родителя */
h1 {
text-align: center;
font-size: 2.5rem;
}
h2 {
font-size: 1.75rem;
}
/* Вводный блок главной страницы */
.intro {
background-color: hsl(30, 80%, 95%);
}
/* Важное предупреждение во вводном блоке — темнее основного акцента */
.intro strong {
color: #6e3510;
}
/* Оглавление главной страницы */
.toc {
background-color: white;
border: 1px solid tan;
}
/* Ссылки меню в шапке — селектор потомков */
nav a {
color: saddlebrown;
text-decoration: none;
}
/* Ссылки оглавления главной страницы */
.toc a {
color: #6b5d52; /* тёплый серый: контраст 6.34:1 на белом фоне оглавления */
}
figcaption {
color: #6b5d52; /* тёплый серый: контраст 5.64:1 на фоне linen */
font-size: 0.95rem;
}
footer {
background-color: hsl(30, 50%, 90%);
text-align: center;
}
/* Ссылка в подвале берёт цвет текста подвала */
footer a {
color: inherit;
}
/* Поля формы получают шрифт страницы вместо шрифта браузера */
input,
select,
textarea,
button {
font: inherit;
}
/* Ссылки темнеют при наведении указателя */
a:hover {
color: #5c2d0c;
}
/* Ссылки меню подчёркиваются при наведении и фокусе с клавиатуры */
nav a:hover,
nav a:focus-visible {
text-decoration: underline;
}
/* Заметная рамка фокуса у ссылок, полей и кнопок при работе с клавиатуры */
:focus-visible {
outline: 3px solid #1f6feb;
outline-offset: 3px;
}
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Сайт карликового пинчера Тони: игрушки, режим дня и запись на прогулку.">
<title>Сайт Тони</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<!-- Меню сайта -->
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="pages/toys.html">Мои игрушки</a></li>
<li><a href="pages/signup.html">Запись на прогулку</a></li>
</ul>
</nav>
</header>
<main>
<div class="intro">
<h1 id="top">Привет! Меня зовут Тони</h1>
<p>Я карликовый пинчер. Мне три года, я вешу 8 кг и люблю гулять в любую погоду. Хозяин говорит: <q>Тони — лучший сторож в доме</q>.</p>
<p>Мой день рождения — <time datetime="2023-09-22">22 сентября</time>. <strong>Пожалуйста, не кормите меня со стола!</strong></p>
<p>Моя родословная записана в Российской кинологической федерации (<abbr title="Российская кинологическая федерация">РКФ</abbr>).</p>
</div>
<ul class="toc">
<li><a href="#toy">Моя любимая игрушка</a></li>
<li><a href="#commands">Команды, которые я знаю</a></li>
<li><a href="#schedule">Мой режим дня</a></li>
<li><a href="#walks">Где я гуляю</a></li>
<li><a href="#song">Песня для прогулок</a></li>
</ul>
<section>
<h2 id="toy">Моя любимая игрушка</h2>
<p data-toy-id="17">Это канат с мячиком. Хозяин бросает его, а я приношу обратно — <em>почти</em> всегда. <a href="pages/toys.html">Посмотреть все игрушки Тони</a>.</p>
<figure>
<img src="assets/tony-toy.png" alt="Тони сидит и держит в зубах канат с красным мячиком" width="300" height="400" title="Мой канат "Удав"">
<figcaption>Я и мой канат «Удав»</figcaption>
</figure>
<p><a href="assets/tony-toy.png" download>Скачать фотографию</a></p>
<p>Подробнее о моей породе — в статье <a href="https://ru.wikipedia.org/wiki/Карликовый_пинчер" target="_blank">«Карликовый пинчер» в Википедии</a>.</p>
<hr>
<p>Вечером игра закончилась. Канат остался на полу, а я свернулся калачиком в кресле.</p>
</section>
<section>
<h2>Мой стишок</h2>
<p>
Я маленький, но смелый,<br>
Гуляю целый день,<br>
А вечером на кресле<br>
Сплю — и мне не лень.
</p>
</section>
<section>
<h2 id="commands">Команды, которые я знаю</h2>
<p>Хозяин научил меня командам на немецком:</p>
<dl>
<dt lang="de">Sitz!</dt>
<dd>сидеть</dd>
<dt lang="de">Platz!</dt>
<dd>лежать</dd>
<dt lang="de">Fuß!</dt>
<dd>рядом</dd>
</dl>
<details>
<summary>Почему команды на немецком?</summary>
<p>Карликовый пинчер — немецкая порода, и хозяину понравилась эта традиция.</p>
</details>
</section>
<section>
<h2 id="schedule">Мой режим дня</h2>
<table>
<caption>Режим дня Тони</caption>
<thead>
<tr>
<th scope="col">Время</th>
<th scope="col">Будни</th>
<th scope="col">Выходные</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">07:00</th>
<td>Прогулка, 20 минут</td>
<td>Сплю</td>
</tr>
<tr>
<th scope="row">08:00</th>
<td colspan="2">Завтрак</td>
</tr>
<tr>
<th scope="row">13:00</th>
<td>Жду хозяина и сплю</td>
<td>Прогулка в парке, 1 час</td>
</tr>
<tr>
<th scope="row">19:00</th>
<td colspan="2">Ужин</td>
</tr>
<tr>
<th scope="row">21:00</th>
<td colspan="2">Вечерняя прогулка</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2 id="progress">Мои успехи</h2>
<p>Учу команду «Апорт»: пройдено 3 занятия из 5. <progress value="3" max="5">3 из 5</progress></p>
<p>Прогулка сегодня: 40 минут. <meter value="40" min="0" max="90" low="30" high="60" optimum="75">40 из 90 минут</meter></p>
</section>
<section>
<h2 id="walks">Где я гуляю</h2>
<p>Я люблю гулять в сквере у дома.</p>
<p>
<a href="pages/walks.html" target="walk">Маршрут</a> |
<a href="assets/tony.png" target="walk">Фото с прогулки</a>
</p>
<iframe src="pages/walks.html" name="walk" title="Маршрут и фото прогулки Тони" width="320" height="420"></iframe>
<h3>Видео с прогулки</h3>
<p>Субтитры помогут, если вы смотрите видео без звука.</p>
<video width="180" height="320" poster="assets/walk.jpg" controls>
<source src="assets/walk.mp4" type="video/mp4">
<track src="assets/ru.vtt" kind="subtitles" srclang="ru" label="Русский" default>
<p><a href="assets/walk.mp4">Скачать видео</a></p>
</video>
<h3>Как я лаю</h3>
<p>Так я разговариваю с хозяином — у нас целый диалог!</p>
<audio controls>
<source src="assets/bark.mp3" type="audio/mpeg">
<p><a href="assets/bark.mp3">Скачать запись</a></p>
</audio>
</section>
<section>
<h2 id="song">Песня для прогулок</h2>
<p>Хозяин включает эту песню, когда мы выходим гулять.</p>
<iframe width="480" height="270" src="https://www.youtube.com/embed/ojULkWEUsPs?start=17" title="Baha Men — Who Let the Dogs Out" loading="lazy" allow="fullscreen"></iframe>
<p><a href="https://www.youtube.com/watch?v=ojULkWEUsPs">Baha Men — Who Let the Dogs Out на YouTube</a></p>
</section>
<section>
<h2>Моя любимая книга</h2>
<p>Хозяин читал мне вслух рассказ <cite>«Каштанка»</cite> Антона Чехова. Он начинается так:</p>
<figure>
<blockquote>
<p>Молодая рыжая собака — помесь таксы с дворняжкой — очень похожая мордой на лисицу, бегала взад и вперёд по тротуару и беспокойно оглядывалась по сторонам.</p>
</blockquote>
<figcaption>— Антон Чехов, <cite>«Каштанка»</cite></figcaption>
</figure>
</section>
<p><a href="#top">Наверх</a></p>
</main>
<footer>
<p><small>© 2026 Тони и его хозяин</small></p>
<address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
</footer>
</body>
</html>
pages/signup.html
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Запишитесь на совместную прогулку с карликовым пинчером Тони.">
<title>Запись на прогулку с Тони</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="../index.html">Главная</a></li>
<li><a href="toys.html">Мои игрушки</a></li>
<li><a href="signup.html">Запись на прогулку</a></li>
</ul>
</nav>
</header>
<main>
<h1>Запись на прогулку</h1>
<p>Гуляйте вместе с Тони! Оставьте заявку, и хозяин Тони напишет вам, чтобы договориться о встрече.</p>
<p><a href="../index.html#walks">Где мы гуляем</a></p>
<form>
<fieldset>
<legend>О вас</legend>
<p>
<label for="owner">Ваше имя</label>
<input type="text" id="owner" name="owner" autocomplete="name" required>
</p>
<p>
<label for="email">Электронная почта</label>
<input type="email" id="email" name="email" autocomplete="email" placeholder="anna@example.com" required>
</p>
</fieldset>
<fieldset>
<legend>Ваша собака</legend>
<p>
<label for="breed">Порода</label>
<input type="text" id="breed" name="breed" list="breeds">
<datalist id="breeds">
<option value="Карликовый пинчер"></option>
<option value="Такса"></option>
<option value="Йоркширский терьер"></option>
<option value="Беспородная"></option>
</datalist>
</p>
<p>
<label for="dogs">Сколько собак придёт</label>
<input type="number" id="dogs" name="dogs" min="1" max="3" value="1">
</p>
</fieldset>
<fieldset>
<legend>Когда гулять</legend>
<p>
<label for="date">Дата</label>
<input type="date" id="date" name="date" required>
</p>
<label><input type="radio" name="time" value="morning" checked> Утром</label>
<label><input type="radio" name="time" value="evening"> Вечером</label>
</fieldset>
<fieldset>
<legend>Прогулка</legend>
<p>
<label for="leader">Ведёт прогулку</label>
<input type="text" id="leader" name="leader" value="Тони" readonly>
</p>
<p>
<label for="route">Маршрут</label>
<select id="route" name="route">
<optgroup label="В городе">
<option value="square">Сквер у дома</option>
<option value="pond" selected>Пруд с утками</option>
</optgroup>
<optgroup label="За городом">
<option value="forest">Лес</option>
<option value="river" disabled>Берег реки — закрыт до весны</option>
</optgroup>
</select>
</p>
<p>
<label for="wishes">Пожелания</label><br>
<textarea id="wishes" name="wishes" rows="4" cols="40" maxlength="300" placeholder="Например: моя собака боится велосипедов"></textarea>
</p>
</fieldset>
<fieldset>
<legend>Что взять с собой</legend>
<label><input type="checkbox" name="take" value="ball"> Мячик</label>
<label><input type="checkbox" name="take" value="rope"> Канат</label>
</fieldset>
<p>
<button type="submit">Записаться на прогулку</button>
<button type="reset">Очистить форму</button>
</p>
</form>
</main>
<footer>
<p><small>© 2026 Тони и его хозяин</small></p>
<address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
</footer>
</body>
</html>
pages/toys.html
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Любимые игрушки Тони и правила игры в канат.">
<title>Игрушки Тони</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="../index.html">Главная</a></li>
<li><a href="toys.html">Мои игрушки</a></li>
<li><a href="signup.html">Запись на прогулку</a></li>
</ul>
</nav>
</header>
<main>
<h1>Мои игрушки</h1>
<ul>
<li>Канат с мячиком «Удав» — моя любимая игрушка</li>
<li>Резиновая косточка — для вечеров, когда гулять уже поздно</li>
<li>Пищащий ёжик — его я прячу <del>под диваном</del> <ins>в своей лежанке</ins></li>
</ul>
<img src="../assets/tony.png" alt="Тони сидит и смотрит в камеру" width="300" height="400">
<h2>Как играть со мной в канат</h2>
<ol>
<li>Покажите мне канат.</li>
<li>Бросьте его подальше.</li>
<li>Подождите, пока я принесу его обратно.</li>
<li>Похвалите меня — и всё сначала!</li>
</ol>
<section>
<h2 id="album">Мой фотоальбом</h2>
<ul>
<li>
<figure>
<img src="../assets/album-puppy.png" alt="Тони-щенок сидит и смотрит в камеру" width="300" height="400">
<figcaption>Я в детстве</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-squirrel.png" alt="Тони лежит в обнимку с плюшевой белкой" width="300" height="400">
<figcaption>С плюшевой белкой</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-hoodie.png" alt="Тони стоит в бежевой толстовке с капюшоном" width="300" height="400">
<figcaption>В худи для холодной погоды</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-harness.png" alt="Тони в оранжевой шлейке ждёт прогулку" width="300" height="400">
<figcaption>Шлейка надета — идём гулять!</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-laugh.png" alt="Тони лежит, запрокинув голову, и широко открыл пасть, будто смеётся" width="300" height="400">
<figcaption>Смеюсь над шуткой хозяина</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-sleep.png" alt="Тони спит, положив голову на лапы" width="300" height="319">
<figcaption>После прогулки</figcaption>
</figure>
</li>
</ul>
</section>
<p><a href="../index.html#commands">Какие команды я знаю</a></p>
<p><a href="../index.html">Вернуться на главную</a></p>
</main>
<footer>
<p><small>© 2026 Тони и его хозяин</small></p>
<address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
</footer>
</body>
</html>
pages/walks.html
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Маршрут прогулки Тони: сквер, пруд и поляна для игры с канатом.">
<title>Где гуляет Тони</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<h1>Мой маршрут</h1>
<ol>
<li>Сквер у дома.</li>
<li>Пруд с утками.</li>
<li>Поляна для игры с канатом.</li>
</ol>
</body>
</html>
Продолжите в VS Code
Добавьте те же правила в css/style.css своего сайта my-site, сохраните файл и откройте сайт
в браузере. Проверка: текст, заголовки и цитата выглядят так же, как в редакторе. Если результат отличается,
нажмите в редакторе «Показать решение» и сравните его со своим кодом.