Наследование в CSS

Чтение — около 10 минут· без учёта практики

В предыдущем уроке мы выбирали элементы по их положению в дереве документа. Дерево понадобится и сейчас: от него зависит, какие стили элемент получит, даже если ни одно правило его не выбирает. Говорят: «яблоко от яблони недалеко падает» — так и вложенные элементы получают часть оформления от своих предков.

Как работает наследование

Наследование — механизм, при котором значение CSS-свойства элемента передаётся вложенным в него элементам (потомкам). Рассмотрим его на примере элемента <body>, который содержит видимое содержимое страницы. Внутри него — заголовок, абзац, а в абзаце — элемент <strong>:

Дерево документа: body содержит h2 и p, в p вложен strong.
Схема наследования: body передаёт значения h2, p и через p — strong.

Зададим элементу <body> цвет текста и семейство шрифта, а для сравнения — рамку:

CSS
body {
  color: saddlebrown; /* цвет текста */
  font-family: Arial, sans-serif; /* семейство шрифта */
  border: 2px solid tan; /* рамка */
}

Свойства color и font-family наследуются: их значения получают потомки <body>, если у них нет собственного значения этих свойств. Рамка свойства border не наследуется: она появляется только у самого <body>, а не у каждого абзаца.

Наследование от body: попробуйте сами

Заголовок, абзац и strong получили цвет и шрифт body, хотя правил для них нет. Рамка осталась только у body. Замените цвет в правиле и посмотрите, как изменится весь текст.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Наследование цвета и шрифта</title>
    <style>
      body {
        color: saddlebrown; /* цвет текста */
        font-family: Arial, sans-serif; /* семейство шрифта */
        border: 2px solid tan; /* рамка — не наследуется */
      }
    </style>
  </head>
  <body>
    <h2>Моя любимая игрушка</h2>
    <p>Это канат с <strong>красным мячиком</strong>. Хозяин бросает его, а я приношу обратно.</p>
  </body>
</html>

Наследование распространяется не только на дочерние элементы, но и на потомков любого уровня вложенности. Элемент <strong> вложен в абзац, а не прямо в <body>, но тоже получил его цвет и шрифт: абзац унаследовал значения от <body> и передал их дальше.

Наследование значительно сокращает CSS-код. Без него для заголовков, абзацев, <strong> и других элементов пришлось бы отдельно задавать один и тот же цвет и шрифт. Поэтому общие настройки текста обычно задают элементу <body>, а отдельным элементам — только отличия.

Наследование не зависит от того, каким селектором выбран родитель. Если добавить <body> класс и задать цвет селектором класса, вложенные элементы так же унаследуют этот цвет. Наследуется значение свойства, а не правило или селектор.

Какие свойства наследуются

Наследуются в основном свойства текста: цвет, шрифт, межстрочный интервал, выравнивание текста. Не наследуются свойства, которые относятся к самому элементу как к прямоугольной области: фон, границы, внутренние и внешние отступы, размеры и размещение на странице. Все эти свойства мы подробно рассмотрим далее в учебнике.

Многие свойства не наследуются по объективным причинам. Представьте, что рамку родителя унаследовали бы все его потомки: каждый абзац, каждое выделенное слово получили бы собственную рамку. Это выглядело бы абсурдно, и такие рамки пришлось бы отменять отдельными правилами.

Фон не наследуется, но кажется, что вложенные элементы его получили. Начальное значение цвета фона — прозрачный (transparent), поэтому сквозь абзац виден фон родителя. Это разные механизмы: если родителю задать рамку, «просвечивания» не произойдёт.

Унаследованное значение проигрывает правилам элемента

Правила, по которым браузер выбирает между объявлениями для одного элемента, называют каскадом. Подробно мы разберём их в следующем уроке «Каскадность». Сейчас важно понять, чем собственное значение свойства отличается от унаследованного.

Для наследуемого свойства значение родителя используется по умолчанию, когда каскад не дал элементу собственного значения. Объявление этого свойства для самого элемента имеет приоритет перед таким наследованием; при этом значением inherit можно явно запросить значение родителя. На сайте Тони цвет заголовков saddlebrown задан правилом h1, h2; если задать цвет текста <body>, заголовки сохранят свой цвет, а остальной текст получит цвет <body>.

Это правило действует при любом селекторе родителя. Даже если цвет <body> задан селектором по идентификатору, правило h2 для самого заголовка всё равно сильнее унаследованного значения.

Стили браузера тоже задаются элементу

Правила элементу задаёт не только автор страницы. У каждого браузера есть встроенная таблица стилей: благодаря ей заголовки крупные и жирные, а ссылки синие и подчёркнутые. Эти значения по умолчанию можно посмотреть у конкретного элемента в справочнике HTML (раздел о значении CSS по умолчанию).

Рассмотрим, почему ссылка (элемент <a>) не наследует некоторые свойства предка. Зададим <body> зелёный цвет текста и уберём линии у текста свойством text-decoration:

Текст абзаца зелёный, а ссылка осталась синей и подчёркнутой. Добавьте правило a { color: inherit; } — ссылка станет зелёной, но подчёркивание останется.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Ссылка и наследование</title>
    <style>
      body {
        color: green; /* цвет текста */
        text-decoration: none; /* убираем линии у текста — не наследуется */
      }
    </style>
  </head>
  <body>
    <p>Все мои игрушки — на странице <a href="#toys">«Мои игрушки»</a>.</p>
  </body>
</html>

Откройте инструменты разработчика на ссылке (в Google Chrome — щелчок правой кнопкой мыши и «Просмотреть код», Inspect). На вкладке Styles видно правило из стилей браузера (user agent stylesheet) для любой ссылки: цвет -webkit-link (синий по умолчанию в Chrome), подчёркивание text-decoration: underline и курсор-указатель cursor: pointer.

Ниже, в разделе Inherited from body, показано правило body. Цвет в нём перечёркнут: у ссылки есть собственное значение цвета из стилей браузера, и оно сильнее унаследованного. Свойство text-decoration показано бледнее: оно не наследуется. Даже если бы оно наследовалось, то не применилось бы — у ссылки это свойство тоже задано стилями браузера.

Такие конфликты между стилями разрешает браузер. По каким правилам он определяет, какое значение победит, — тема каскада. Подробно мы разберём его в следующем уроке.

Глобальные значения CSS-свойств

Это более продвинутая тема. Сейчас раздел носит ознакомительный характер. Не нужно сразу запоминать все значения и случаи их применения. Для дальнейшей работы достаточно понять inherit — получение значения от родителя. К остальным значениям можно вернуться после урока о каскаде, когда понадобится сбросить или изменить оформление конкретного элемента.

У каждого свойства есть свои значения: например, color принимает цвет, а width — размер. Но есть и глобальные значения (англ. CSS-wide keywords) — ключевые слова, которые можно использовать у любого CSS-свойства. Они указывают браузеру, откуда взять значение: от родителя, из начальных настроек свойства или из других источников стилей.

«Глобальные» означает общие для свойств, а не действующие сразу на всю страницу. Например, color: inherit меняет только способ получения цвета у выбранного элемента, а border: inherit позволяет унаследовать границу, хотя сама по себе она не наследуется. Здесь разберём четыре таких значения: inherit, initial, unset и revert. Ещё одно — revert-layer — связано с каскадными слоями. Основы слоёв разберём в следующем уроке «Каскадность».

  • inherit — взять значение родителя, даже если свойство не наследуется само;
  • initial — установить начальное значение свойства из спецификации. У color это системный цвет CanvasText: обычно чёрный в светлой цветовой схеме и светлый в тёмной, а не цвет родителя;
  • unset — работает как inherit для наследуемых свойств и как initial — для ненаследуемых;
  • revert — в авторском CSS откатить значение свойства у этого элемента к стилям пользователя или браузера. Если они не задают значение, сработает обычное наследование или начальное значение свойства.

Глобальные значения: попробуйте сами

Все абзацы коричневые. Ссылки с inherit и unset получают цвет абзаца, initial — системный цвет текста, revert — цвет ссылки из стилей браузера. Замените color на text-decoration только в четырёх правилах классов: у inherit, initial и unset подчёркивание исчезнет, у revert останется.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Ключевые слова inherit, initial, unset и revert</title>
    <style>
      p {
        color: saddlebrown; /* цвет абзацев */
      }
      .inherit {
        color: inherit; /* цвет родителя — абзаца */
      }
      .initial {
        color: initial; /* начальное значение свойства color */
      }
      .unset {
        color: unset; /* color наследуется, поэтому как inherit */
      }
      .revert {
        color: revert; /* значение из стилей браузера */
      }
    </style>
  </head>
  <body>
    <p><a href="#toys">Обычная ссылка</a> — стиль браузера.</p>
    <p><a href="#toys" class="inherit">inherit</a> — цвет абзаца.</p>
    <p><a href="#toys" class="initial">initial</a> — начальное значение.</p>
    <p><a href="#toys" class="unset">unset</a> — наследуемое свойство, как inherit.</p>
    <p><a href="#toys" class="revert">revert</a> — снова стиль браузера.</p>
  </body>
</html>

Где глобальные значения пригодятся на практике

  • Подстроить элемент под окружающий текст — inherit. Правило footer a { color: inherit; } делает ссылку цвета текста подвала: если цвет подвала изменится, ссылка тоже изменится. А button { font: inherit; } передаёт кнопке настройки шрифта родителя вместо шрифта браузера. Этот приём разберём ниже.
  • Вернуть начальное значение конкретного свойства — initial. Например, карточке задали цветной фон, а у её особого варианта фон не нужен: .card--plain { background-color: initial; } вернёт прозрачный фон. Это значение из спецификации, а не прежний цвет карточки и не фон родителя.
  • Вернуть обычное поведение свойства — unset. Если отдельному абзацу задали свой цвет, color: unset снова позволит ему наследовать цвет родителя. А background-color: unset сделает фон прозрачным: фон не наследуется, поэтому здесь unset работает как initial.
  • Вернуть оформление пользователя или браузера — revert. Например, общее правило сделало все заголовки одного размера, а отдельному h2 нужно вернуть привычный браузерный размер: задайте ему font-size: revert. В отличие от initial, которое установило бы начальный размер medium, revert позволяет примениться стилям браузера именно для заголовка. Если свои стили задал пользователь, результат может зависеть от них.

Глобальное значение сработает, если браузер выберет именно это объявление среди правил для элемента. Само слово inherit или revert не делает правило важнее остальных. Если применилось color: revert, браузер ищет цвет в стилях пользователя или браузера, а не в предыдущем правиле нашего CSS-файла. Если там цвет не задан, элемент получает его по наследству.

Сброс нескольких свойств через all

Свойство all применяет глобальное значение почти ко всем свойствам элемента сразу. Например, all: unset используют как основу для собственного оформления кнопки: наследуемые свойства, в том числе цвет и шрифт, берутся от родителя, остальные получают начальные значения. После такого сброса нужно заново задать нужные отступы, рамку, фон и заметное оформление фокуса. Если требуется поменять только шрифт кнопки, достаточно font: inherit — сбрасывать всё оформление незачем.

all: revert подходит для возврата элемента к оформлению пользователя или браузера. Оно не сбрасывает отдельные правила, заданные потомкам: all действует на выбранный элемент. Исключения — direction (направление текста: слева направо или справа налево), unicode-bidi (правила отображения текста, в котором сочетаются разные направления письма) и пользовательские свойства (CSS-переменные). Переменные мы изучим позже, в уроке «Пользовательские свойства» раздела «Повторное использование стилей».

Поля формы не наследуют шрифт

Стили браузера задают шрифт и полям формы: <input>, <select>, <textarea> и <button>. Поэтому они не наследуют шрифт страницы и часто выглядят мельче окружающего текста. Ключевое слово inherit исправляет это:

CSS
input,
select,
textarea,
button {
  font: inherit; /* все настройки шрифта — от родителя */
}

font — сокращённое свойство, которое объединяет размер, семейство и другие настройки шрифта. Подробно мы рассмотрим его в уроке «Работа со шрифтами».

Поля формы и наследование шрифта: попробуйте сами

В первой строке поле и кнопка используют шрифт браузера, во второй — шрифт страницы благодаря font: inherit. Измените font-size у body: размер полей изменится только во второй строке.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Поля формы и наследование шрифта</title>
    <style>
      body {
        font-family: Georgia, serif; /* семейство шрифта страницы */
        font-size: 20px; /* размер шрифта страницы */
      }
      .inherit-font input,
      .inherit-font button {
        font: inherit; /* все настройки шрифта — от родителя */
      }
    </style>
  </head>
  <body>
    <p>Шрифт браузера:</p>
    <p><input type="text" value="Тони"> <button type="button">Записаться</button></p>
    <p>Шрифт страницы (<code>font: inherit</code>):</p>
    <p class="inherit-font"><input type="text" value="Тони"> <button type="button">Записаться</button></p>
  </body>
</html>

Наследование в инструментах разработчика

В уроке «Инструменты разработчика» мы видели на вкладке Styles разделы Inherited from …. В них перечислены правила предков, от которых элемент получил значения. Наследуемые свойства, которые применились, показаны обычным цветом, перечёркнутые — проиграли собственным правилам элемента, а бледные не наследуются. На вкладке Computed видно итоговое значение; если раскрыть свойство, браузер покажет, из какого правила оно взято.

Потренируйтесь

Предскажите, какой цвет получит элемент <p>: от собственного правила, от предка или через inherit. После ответа тренажёр объяснит, почему победило это значение.

Определите, каким цветом будет текст элемента <p>.

1 из 3

HTML

CSS

Какого цвета будет текст элемента <p>?

Для проверки ответов включите JavaScript. Пример: .note { color: red } сильнее записанного ниже p { color: blue } для <p class="note">: класс имеет вес (0, 1, 0), тег — (0, 0, 1).

Больше заданий и калькулятор специфичности — в тренажёре каскада

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

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

1. Что такое наследование в CSS?
Показать ответ

Передача значений свойств элемента вложенным в него элементам (потомкам) — Значения наследуемых свойств передаются от родителя к детям и далее, если потомкам не задано собственное значение.

2. Задано body { color: green; }. Какого цвета будет текст элемента <strong> внутри абзаца?
Показать ответ

Зелёного — Свойство color наследуется потомками любого уровня: абзац получил цвет от <body> и передал его <strong>.

3. Задано body { border: 2px solid tan; }. Что получится на странице?
Показать ответ

Рамка появится только у <body> — Свойство border не наследуется: иначе рамку получил бы каждый вложенный элемент.

4. Задано body { color: green; }. Какого цвета будет непосещённая ссылка с href в абзаце при стандартных настройках Chrome, если других авторских правил нет?
Показать ответ

Синего — цвет из стилей браузера — Стили браузера задают цвет самой ссылке, а правило для элемента всегда сильнее унаследованного значения.

5. Задано #page { color: green; } для <body id="page"> и h2 { color: saddlebrown; }. Какого цвета заголовок <h2>?
Показать ответ

saddlebrown — Правило h2 задано самому заголовку, а от #page он получил бы только унаследованное значение. Селектор родителя на это не влияет.

6. Абзац коричневый, у ссылки внутри него задано color: unset. Какого цвета ссылка?
Показать ответ

Коричневого — как у абзаца — color наследуется, поэтому unset работает как inherit и берёт значение родителя.

7. Почему текст в полях формы часто мельче текста страницы?
Показать ответ

Стили браузера задают полям собственный шрифт, и он сильнее унаследованного — Как и у ссылок, у полей есть собственное значение из стилей браузера. Правило font: inherit возвращает им шрифт родителя.

8. Где проще всего узнать, наследуется ли свойство и какое значение браузер задаёт элементу по умолчанию?
Показать ответ

Наследование — на странице свойства в справочнике CSS, значения по умолчанию — на странице элемента в справочнике HTML — В справочнике CSS у каждого свойства указано, наследуется ли оно, а в справочнике HTML у элемента — значение CSS по умолчанию. Значения браузера видно и на вкладке Styles.

Задание

Ожидаемый результат: текст абзацев, списков и таблицы на всех страницах тёмно-коричневый, а заголовки и ссылки меню по-прежнему цвета saddlebrown. Адрес почты в подвале — того же цвета, что и текст подвала, и остаётся подчёркнутым. На странице «Запись на прогулку» текст в полях и на кнопках того же размера, что и подписи. Объясните, почему заголовки не стали тёмно-коричневыми, хотя они находятся внутри <body>.

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

css/style.css
CSS
/* Общие стили сайта Тони */
body {
  background-color: linen;
}

/* Общий цвет заголовков — групповой селектор */
h1,
h2 {
  color: saddlebrown;
}

h1 {
  text-align: center;
}

/* Вводный блок главной страницы */
.intro {
  background-color: hsl(30, 80%, 95%);
}

/* Оглавление главной страницы */
.toc {
  background-color: white;
  border: 1px solid tan;
}

/* Ссылки меню в шапке — селектор потомков */
nav a {
  color: saddlebrown;
  text-decoration: none;
}

/* Ссылки оглавления главной страницы */
.toc a {
  color: dimgray;
}

figcaption {
  color: dimgray;
}

footer {
  background-color: hsl(30, 50%, 90%);
  text-align: center;
}
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, сохраните файл и пройдите все страницы сайта. Если результат отличается, нажмите в редакторе «Показать решение» и сравните его со своим кодом.