Работа со шрифтами в 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:

CSS
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
<!doctype 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
<!doctype 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 большинства из них нет — там сработает общее семейство в конце списка. Поэтому в каждой строке оно обязательно.

sans-serif (без засечек)
Значение 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 Съешь же ещё этих сочных мандаринов.
serif (с засечками)
Значение font-family Пример
Georgia, serif Съешь же ещё этих сочных мандаринов.
"Palatino Linotype", "Book Antiqua", Palatino, serif Съешь же ещё этих сочных мандаринов.
"Times New Roman", Times, serif Съешь же ещё этих сочных мандаринов.
monospace (моноширинные)
Значение font-family Пример
"Courier New", Courier, monospace Съешь же ещё этих сочных мандаринов.
"Lucida Console", Monaco, monospace Съешь же ещё этих сочных мандаринов.

Ещё один надёжный вариант — системный набор шрифтов. Он показывает текст тем же шрифтом, что и интерфейс устройства: привычно для читателя, хорошо читается на экране и ничего не нужно загружать. Такой набор мы зададим основному тексту сайта Тони:

CSS
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
<!doctype 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 задаёт сразу несколько свойств шрифта. Порядок записи: начертание и насыщенность (необязательные, в любом порядке), затем обязательные размер и семейство — семейство всегда последним:

CSS
p {
  font: italic bold 1.25rem Georgia, serif;
}

После размера через косую черту можно указать межстрочный интервал: 1.25rem/1.5. Его мы рассмотрим в уроке «Форматирование текста».

Сокращённое свойство font: попробуйте сами

Первые два абзаца выглядят одинаково: четыре свойства и одно font. В третьем абзаце font у span не указывает начертание и насыщенность, поэтому они сброшены в normal. Удалите sans-serif из правила .reset — объявление станет ошибочным, и курсив вернётся.

index.html
HTML
<!doctype 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>

Проверьте себя

Выберите ответ — объяснение появится сразу. Ответ можно менять.

1. Задано font-family: Verdana, Tahoma, sans-serif. Verdana на устройстве нет, Tahoma есть. Каким шрифтом будет показан текст?
Показать ответ

Tahoma — Браузер перебирает шрифты слева направо и берёт первый найденный. Verdana нет, следующий — Tahoma.

2. Зачем в конце значения font-family указывают общее семейство, например serif?
Показать ответ

Чтобы при отсутствии всех перечисленных шрифтов текст показался шрифтом того же типа — Общее семейство есть на любом устройстве: браузер подставит шрифт с засечками, без засечек или моноширинный, как задумано.

3. В какой записи font-family последнее имя не обозначает общее семейство шрифтов?
Показать ответ

font-family: Arial, "sans-serif"; — Запись синтаксически допустима, но в кавычках "sans-serif" — это название конкретного шрифта, а не общее семейство. Для общего семейства кавычки не нужны.

4. Задано p { font-style: italic; } и для span внутри абзаца — font: 1rem sans-serif;. Будет ли текст span курсивом?
Показать ответ

Нет: сокращённое свойство font сбросило пропущенное начертание в normal — Сокращённое свойство задаёт все свои составляющие. Не указанный font-style получил начальное значение normal.

5. Какое значение font-weight соответствует ключевому слову bold?
Показать ответ

700 — bold — 700, normal — 400.

6. Что означает общее семейство system-ui в значении font-family?
Показать ответ

Шрифт интерфейса операционной системы: Segoe UI в Windows, San Francisco в macOS и iOS, Roboto в Android — system-ui подставляет шрифт, которым система рисует свои меню и окна, поэтому на разных устройствах он разный.

7. Для абзаца задано font-family: Georgia; font-weight: 300;, но тонкого начертания 300 у шрифта Georgia нет. Что покажет браузер?
Показать ответ

Ближайшее имеющееся начертание — обычное — Если нужного начертания нет, браузер берёт ближайшее из имеющихся; для 300 у Georgia это обычное (400).

Задание

Ожидаемый результат: основной текст на всех страницах — системным шрифтом без засечек, заголовки — жирным шрифтом без засечек, цитата из «Каштанки» на главной — курсивом с засечками.

Выполните задание

css/style.css
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
<!doctype 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&nbsp;кг и люблю гулять в любую погоду. Хозяин говорит: <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="Мой канат &quot;Удав&quot;">
          <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>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>
pages/signup.html
HTML
<!doctype 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>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>
pages/toys.html
HTML
<!doctype 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>&copy; 2026 Тони и его хозяин</small></p>
      <address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
    </footer>
  </body>
</html>
pages/walks.html
HTML
<!doctype 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, сохраните файл и откройте сайт в браузере. Проверка: текст, заголовки и цитата выглядят так же, как в редакторе. Если результат отличается, нажмите в редакторе «Показать решение» и сравните его со своим кодом.