Форматирование текста в CSS

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

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

Выравнивание текста

Свойство text-align выравнивает строки текста внутри элемента: по левому или правому краю, по центру или по ширине, как в печатных изданиях.

Значение Описание
start Выравнивает текст по началу строки: по левому краю для языков с письмом слева направо, по правому — для письма справа налево. Это начальное значение.
end Выравнивает текст по концу строки: для русского текста — по правому краю.
left Выравнивает текст по левому краю.
right Выравнивает текст по правому краю.
center Выравнивает текст по центру.
justify Растягивает строки так, что все они, кроме последней, одинаковой ширины (выравнивание по ширине).

Выравнивание текста: попробуйте сами

Фон показывает ширину абзацев: текст выровнен внутри неё. Сузьте окно — у абзаца с justify между словами появятся неровные промежутки.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Выравнивание текста: text-align</title>
    <style>
      p {
        background-color: rgba(0, 255, 0, 0.1); /* фон показывает ширину абзаца */
      }
      .left {
        text-align: left; /* по левому краю */
      }
      .center {
        text-align: center; /* по центру */
      }
      .right {
        text-align: right; /* по правому краю */
      }
      .justify {
        text-align: justify; /* по ширине */
      }
    </style>
  </head>
  <body>
    <p class="left">left: Я карликовый пинчер. Мне три года, я вешу 8 кг и люблю гулять в любую погоду. Хозяин бросает мне канат с мячиком, а я приношу его обратно — почти всегда.</p>
    <p class="center">center: Я карликовый пинчер. Мне три года, я вешу 8 кг и люблю гулять в любую погоду. Хозяин бросает мне канат с мячиком, а я приношу его обратно — почти всегда.</p>
    <p class="right">right: Я карликовый пинчер. Мне три года, я вешу 8 кг и люблю гулять в любую погоду. Хозяин бросает мне канат с мячиком, а я приношу его обратно — почти всегда.</p>
    <p class="justify">justify: Я карликовый пинчер. Мне три года, я вешу 8 кг и люблю гулять в любую погоду. Хозяин бросает мне канат с мячиком, а я приношу его обратно — почти всегда.</p>
  </body>
</html>

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

Отступ первой строки

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

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

Отступ первой строки: попробуйте сами

У первого абзаца отступа нет, у второго — 40px, у третьего первая строка сдвинута на 20px влево, у четвёртого отступ — половина ширины абзаца. Измените 40px на 2em.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Отступ первой строки: text-indent</title>
    <link rel="stylesheet" href="style.css">
  </head>
  <body>
    <p class="indent-0">text-indent: 0. Я карликовый пинчер. Мне три года, я вешу 8 кг и люблю гулять в любую погоду. Хозяин бросает мне канат с мячиком, а я приношу его обратно — почти всегда.</p>
    <p class="indent-40">text-indent: 40px. Я карликовый пинчер. Мне три года, я вешу 8 кг и люблю гулять в любую погоду. Хозяин бросает мне канат с мячиком, а я приношу его обратно — почти всегда.</p>
    <p class="indent-negative">text-indent: -20px. Я карликовый пинчер. Мне три года, я вешу 8 кг и люблю гулять в любую погоду. Хозяин бросает мне канат с мячиком, а я приношу его обратно — почти всегда.</p>
    <p class="indent-half">text-indent: 50%. Я карликовый пинчер. Мне три года, я вешу 8 кг и люблю гулять в любую погоду. Хозяин бросает мне канат с мячиком, а я приношу его обратно — почти всегда.</p>
  </body>
</html>
style.css
CSS
.indent-0 {
  text-indent: 0; /* без отступа — значение по умолчанию */
}
.indent-40 {
  text-indent: 40px; /* красная строка 40 пикселей */
}
.indent-negative {
  text-indent: -20px; /* первая строка сдвинута влево, за край абзаца */
}
.indent-half {
  text-indent: 50%; /* половина ширины абзаца */
}

Отступ -20px сдвигает первую строку за левый край абзаца: если слева нет свободного места, её начало обрезается краем окна. Процентное значение считается от ширины родительского элемента, в котором находится абзац, поэтому при изменении ширины окна отступ меняется.

Междустрочный интервал

Расстояние между базовыми линиями соседних строк называют интерлиньяжем или междустрочным интервалом. В CSS за него отвечает свойство line-height — высота строки. Чем больше значение, тем дальше строки друг от друга.

Значение по умолчанию — normal. Браузер берёт его из самого шрифта, и у большинства шрифтов оно около 1.2 от размера шрифта. Для основного текста на экране этого мало: строки кажутся плотными. Удобный интервал для абзацев — от 1.4 до 1.6.

Для простой строки с одним шрифтом разность line-height и font-size удобно считать добавкой к размеру шрифта. Это не точный видимый зазор между буквами соседних строк: он зависит от метрик шрифта и очертаний букв. Изображения и крупные фрагменты внутри строки могут увеличить её фактическую высоту:

Например, размер шрифта 20 пикселей, а высота строки 150%, то есть 30 пикселей:

Высоту строки можно задать числом без единицы измерения. Число — это множитель размера шрифта:

CSS
селектор {
  line-height: 1.5;
}

Например, размер шрифта родителя — 16px, размер шрифта абзаца — 2em, а высота строки — 1.5:

CSS
p {
  font-size: 2em;
  line-height: 1.5;
}

В font-size единица em считается от шрифта родителя, а в line-height — от шрифта самого абзаца. Поэтому line-height: 3em здесь даст 96px, а не 48px.

Междустрочный интервал: попробуйте сами

Фон показывает высоту строк. При 10px строки меньше шрифта и наезжают друг на друга, normal — около 1.2, 150% и 2 считаются от размера шрифта. Задайте p { font-size: 24px; } — интервал в пикселях останется 10px, а остальные вырастут вместе со шрифтом.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Междустрочный интервал: line-height</title>
    <style>
      p {
        background-color: linen; /* фон показывает высоту строк */
      }
      .px {
        line-height: 10px; /* меньше размера шрифта — строки наезжают друг на друга */
      }
      .normal {
        line-height: normal; /* значение по умолчанию, около 1.2 */
      }
      .percent {
        line-height: 150%; /* 150% от размера шрифта абзаца */
      }
      .number {
        line-height: 2; /* множитель: 2 × размер шрифта */
      }
    </style>
  </head>
  <body>
    <p class="px">line-height: 10px<br>line-height: 10px</p>
    <p class="normal">line-height: normal<br>line-height: normal</p>
    <p class="percent">line-height: 150%<br>line-height: 150%</p>
    <p class="number">line-height: 2<br>line-height: 2</p>
  </body>
</html>

Высота строки в пикселях не зависит от размера шрифта: если шрифт увеличить, а line-height: 10px оставить, строки начнут наезжать друг на друга. Значения в процентах, em и множитель считаются от размера шрифта.

Почему интервал удобно задавать числом

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

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

Оба блока задают интервал 1.5 от шрифта 16px. Крупный абзац в первом блоке умножает множитель на свои 32px, а во втором получает готовые 24px — меньше своего шрифта, и строки наезжают. Замените 150% на 1.5.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Наследование line-height: множитель и проценты</title>
    <style>
      .number {
        line-height: 1.5; /* потомки получают множитель 1.5 */
      }
      .percent {
        line-height: 150%; /* потомки получают готовые 24px */
      }
      .big {
        font-size: 2rem; /* крупный текст внутри блока */
      }
    </style>
  </head>
  <body>
    <div class="number">
      <p class="big">Множитель 1.5: крупный текст получает интервал 1.5 × 32px = 48px.</p>
    </div>
    <div class="percent">
      <p class="big">150%: крупный текст наследует готовые 24px, и строки наезжают.</p>
    </div>
  </body>
</html>

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

Длина строки

Слишком короткие строки заставляют часто переходить на следующую строку, а в слишком длинных сложнее находить её начало. Для основного текста можно ориентироваться примерно на 45–75 символов в строке, включая пробелы. Это не строгое правило: подходящая длина зависит от шрифта, его размера и междустрочного интервала. На широком экране текст, растянутый на всю ширину окна, может заметно превышать этот диапазон.

Ограничить ширину текста можно свойством max-width — максимальная ширина элемента. Её удобно задавать в единицах ch из урока «Единицы измерения»: значение 60ch — ширина 60 символов «0» выбранного шрифта. Это удобный ориентир, но не ограничение количества букв: в пропорциональном шрифте они имеют разную ширину. Если задать обычному абзацу max-width: 60ch, оставив автоматическую ширину (width: auto), он будет занимать доступную ширину родителя, но не станет шире 60ch. Поэтому в узком контейнере абзац сможет сужаться. Размеры элементов подробно рассмотрим в уроке «Размеры блочных элементов».

Длина строки: попробуйте сами

Разверните пример на всю ширину: первый абзац растягивается на всё окно, второй ограничен шириной 60ch. Количество букв в строке зависит от шрифта и текста. Попробуйте 45ch и 75ch.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Длина строки: max-width в ch</title>
    <style>
      body {
        line-height: 1.6;
      }
      .measure {
        max-width: 60ch; /* ширина 60 символов «0», а не ограничение количества букв */
      }
    </style>
  </head>
  <body>
    <p>Без ограничения: Я карликовый пинчер. Мне три года, я вешу 8 кг и люблю гулять в любую погоду. Хозяин бросает мне канат с мячиком, а я приношу его обратно — почти всегда. Я карликовый пинчер. Мне три года, я вешу 8 кг и люблю гулять в любую погоду. Хозяин бросает мне канат с мячиком, а я приношу его обратно — почти всегда.</p>
    <p class="measure">max-width: 60ch: Я карликовый пинчер. Мне три года, я вешу 8 кг и люблю гулять в любую погоду. Хозяин бросает мне канат с мячиком, а я приношу его обратно — почти всегда. Я карликовый пинчер. Мне три года, я вешу 8 кг и люблю гулять в любую погоду. Хозяин бросает мне канат с мячиком, а я приношу его обратно — почти всегда.</p>
  </body>
</html>

Переносы и длинные слова

Запись text-wrap: balance делает строки короткого заголовка примерно одинаковыми по длине. Используйте её для заголовков и других коротких текстов, а не для всей статьи. Для абзацев подходит text-wrap: pretty: браузер старается сделать переносы аккуратнее, например не оставлять одно слово на последней строке. Результат может отличаться в разных браузерах. Если браузер не поддерживает эти значения, текст переносится обычным способом.

Запись hyphens: auto позволяет переносить слова по частям, добавляя дефис в конце строки. Чтобы браузер знал правила переноса, укажите язык текста: для русского — lang="ru" у <html> или элемента с текстом. Переносы сработают, если в браузере или системе есть словарь этого языка.

Для длинных адресов используйте overflow-wrap: anywhere: если адрес не помещается в строку, браузер сможет перенести его в любом месте. Дефис при этом не добавляется.

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

Сузьте результат: длинный адрес переносится внутри абзаца. Уберите overflow-wrap: anywhere и сравните. Переключайте text-wrap: balance на wrap; переносы с hyphens: auto зависят от наличия русского словаря.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Переносы текста</title>
  </head>
  <body>
    <h1>Любимые прогулки Тони по осеннему парку</h1>
    <p>Любознательный Тони рассматривает достопримечательности и возвращается домой к ужину.</p>
    <p class="address">tony.example/album/verylongphotographnamewithoutspaces</p>
  </body>
</html>
style.css
CSS
body { max-width: 24rem; }
h1 { text-wrap: balance; }
p { text-wrap: pretty; hyphens: auto; }
.address { hyphens: none; overflow-wrap: anywhere; }

Интервал между символами и словами

Иногда нужно изменить расстояние не между строками, а между символами или словами. Например, уменьшенный интервал делает длинный заголовок компактнее, а увеличенный придаёт ему растянутый вид — разрядку.

Интервал между символами задаёт свойство letter-spacing, между словами — word-spacing. Значение — длина в любых единицах (px, em, rem), оно добавляется к обычному интервалу. Положительные значения увеличивают интервал, отрицательные уменьшают — вплоть до наложения символов или слов друг на друга. Значение normal — обычный интервал шрифта.

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

Первые четыре абзаца меняют интервал между символами, последние два — между словами. Значение в em растёт вместе со шрифтом: задайте абзацу .letter-1em размер 2rem.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Интервал между символами и словами</title>
    <style>
      .letter-tight { letter-spacing: -1px; } /* символы ближе друг к другу */
      .letter-normal { letter-spacing: normal; } /* значение по умолчанию */
      .letter-2px { letter-spacing: 2px; }
      .letter-1em { letter-spacing: 1em; }
      .word-1em { word-spacing: 1em; } /* слова дальше друг от друга */
      .word-tight { word-spacing: -5px; } /* слова ближе друг к другу */
    </style>
  </head>
  <body>
    <p class="letter-tight">letter-spacing: -1px</p>
    <p class="letter-normal">letter-spacing: normal</p>
    <p class="letter-2px">letter-spacing: 2px</p>
    <p class="letter-1em">letter-spacing: 1em</p>
    <p class="word-1em">word-spacing: 1em. Я карликовый пинчер. Мне три года, я вешу 8 кг и люблю гулять в любую погоду. Хозяин бросает мне канат с мячиком, а я приношу его обратно — почти всегда.</p>
    <p class="word-tight">word-spacing: -5px. Я карликовый пинчер. Мне три года, я вешу 8 кг и люблю гулять в любую погоду. Хозяин бросает мне канат с мячиком, а я приношу его обратно — почти всегда.</p>
  </body>
</html>

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

Декорирование текста

Свойство text-decoration добавляет к тексту линии: подчёркивание, перечёркивание или линию над текстом. Одно из самых частых применений — наоборот, убрать подчёркивание у ссылок, как мы сделали в меню сайта Тони:

CSS
nav a {
  text-decoration: none; /* убираем подчёркивание у ссылок меню */
}
Значение Описание
none Текст без линий. Это начальное значение.
underline Линия под текстом.
overline Линия над текстом.
line-through Линия через текст (перечёркивание).

В одном объявлении можно указать несколько линий:

CSS
text-decoration: underline line-through; /* линия под текстом и перечёркивание */

Свойство text-decoration — сокращённое. Кроме вида линии, оно задаёт её стиль (text-decoration-style: solid, double, dotted, dashed, wavy) и цвет (text-decoration-color), например underline wavy saddlebrown. Толщину линии задаёт свойство text-decoration-thickness, а расстояние подчёркивания от текста — text-underline-offset.

Декорирование текста: попробуйте сами

Первые четыре абзаца показывают виды линий. Пятый — волнистое подчёркивание с заданными цветом, толщиной и отступом. Замените wavy на dotted, а 4px — на 8px.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Декорирование текста: text-decoration</title>
    <style>
      .underline {
        text-decoration: underline; /* линия под текстом */
        color: red;
      }
      .overline {
        text-decoration: overline; /* линия над текстом */
        color: green;
      }
      .line-through {
        text-decoration: line-through; /* перечёркивание */
        color: blue;
      }
      .both {
        text-decoration: underline overline; /* две линии сразу */
        color: orange;
      }
      .styled {
        text-decoration: underline wavy saddlebrown; /* вид и цвет линии */
        text-decoration-thickness: 2px; /* толщина */
        text-underline-offset: 4px; /* расстояние от текста */
      }
      .plain {
        text-decoration: none; /* ссылка без подчёркивания */
      }
    </style>
  </head>
  <body>
    <p class="underline">text-decoration: underline</p>
    <p class="overline">text-decoration: overline</p>
    <p class="line-through">text-decoration: line-through</p>
    <p class="both">text-decoration: underline overline</p>
    <p class="styled">Волнистое подчёркивание цвета saddlebrown</p>
    <p><a href="#" class="plain">Ссылка без подчёркивания</a> и <a href="#">обычная ссылка</a></p>
  </body>
</html>

Верхний и нижний регистр

Свойство text-transform меняет регистр букв при показе: делает все буквы заглавными или строчными, или делает заглавной первую букву каждого слова. Текст в HTML-коде при этом не меняется.

Значение Описание
none Текст показан как есть, регистр не меняется. Это начальное значение.
capitalize Первая буква каждого слова — заглавная.
uppercase Все буквы заглавные.
lowercase Все буквы строчные.

Регистр текста: попробуйте сами

В HTML-коде первые два абзаца написаны строчными буквами, третий — заглавными. Замените uppercase на capitalize и посмотрите, какие слова получат заглавную букву.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Регистр текста: text-transform</title>
    <style>
      .capitalize {
        text-transform: capitalize; /* первые буквы слов — заглавные */
      }
      .uppercase {
        text-transform: uppercase; /* все буквы заглавные */
      }
      .lowercase {
        text-transform: lowercase; /* все буквы строчные */
      }
    </style>
  </head>
  <body>
    <p class="capitalize">команды, которые я знаю: сидеть, лежать, рядом.</p>
    <p class="uppercase">команды, которые я знаю: сидеть, лежать, рядом.</p>
    <p class="lowercase">КОМАНДЫ, КОТОРЫЕ Я ЗНАЮ: СИДЕТЬ, ЛЕЖАТЬ, РЯДОМ.</p>
  </body>
</html>

Заглавными буквами в CSS удобно оформлять короткие подписи и кнопки: если дизайн изменится, править текст в HTML не придётся. Длинный текст заглавными читается тяжелее, а capitalize в русском тексте делает заглавными предлоги и союзы, поэтому для заголовков на русском обычно не подходит.

Капитель

Малые заглавные, или капитель (англ. small caps), — начертание шрифта, в котором строчные буквы выглядят как уменьшенные заглавные. Капитель задаёт свойство font-variant:

CSS
селектор {
  font-variant: small-caps; /* капитель */
}

Капитель: попробуйте сами

Первый абзац показан обычным шрифтом, во втором строчные буквы стали уменьшенными заглавными, а первая буква осталась обычной заглавной. Добавьте letter-spacing: 0.1em — капитель с разрядкой читается легче.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Капитель: font-variant</title>
    <style>
      .small-caps {
        font-variant: small-caps; /* строчные буквы — уменьшенными заглавными */
      }
    </style>
  </head>
  <body>
    <p>Абзац показан обычным шрифтом.</p>
    <p class="small-caps">Строчные буквы показаны как заглавные уменьшенного размера.</p>
  </body>
</html>

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

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

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

1. Какое значение text-align выравнивает русский текст по правому краю, а текст на арабском — по левому?
Показать ответ

end — end — конец строки. Для письма слева направо это правый край, для письма справа налево — левый.

2. Абзац находится в обычном блочном контейнере с шириной области содержимого 600px. Абзацу задано text-indent: 10%. Каков отступ первой строки?
Показать ответ

60px — Процент в text-indent считается от ширины родительского блока абзаца, здесь — 600px.

3. Размер шрифта 20px, line-height: 1.5. Чему равна разность line-height и font-size?
Показать ответ

10px — 30px − 20px = 10px. Это разность заданных размеров, а не точный видимый зазор между буквами соседних строк.

4. У body задано line-height: 150% при шрифте 16px. Каким будет интервал у заголовка с размером шрифта 32px, если ему интервал не задан?
Показать ответ

24px — меньше размера шрифта, строки заголовка наедут друг на друга — Процент браузер переводит в пиксели у body (24px), и потомки наследуют готовые 24px.

5. Как ограничить ширину абзаца величиной, равной ширине 60 символов «0» его шрифта?
Показать ответ

max-width: 60ch — 1ch — ширина символа «0» в шрифте абзаца. На узком экране абзац займёт всю доступную ширину.

6. Что делает объявление letter-spacing: -1px?
Показать ответ

Уменьшает интервал между символами на 1px — Значение добавляется к обычному интервалу шрифта, отрицательное — сокращает его.

7. Как отодвинуть подчёркивание ссылки от букв, не меняя остальное оформление?
Показать ответ

text-underline-offset: 3px — Свойство задаёт расстояние подчёркивания от текста; вид, цвет и толщина линии остаются прежними.

8. В HTML-коде написано <h2>Мой режим дня</h2>, а в CSS — h2 { text-transform: uppercase; }. Что изменится?
Показать ответ

Заголовок будет показан заглавными буквами, а текст в HTML-коде останется прежним — text-transform меняет только отображение. Если оформление изменится, править текст не придётся.

9. Что задаёт font-variant: small-caps?
Показать ответ

Капитель: строчные буквы показаны уменьшенными заглавными — Заглавные буквы остаются обычного размера, строчные выглядят как уменьшенные заглавные.

10. Что нужно для автоматических переносов русских слов с hyphens: auto?
Показать ответ

Правильный lang и словарь переносов в браузере — Язык текста задают атрибутом lang; наличие словаря зависит от браузера и системы.

Задание

Ожидаемый результат: строки абзацев стоят свободнее, а строки заголовков — плотнее; на широком экране абзацы вводного блока главной ограничены шириной 60ch. Подчёркивание ссылок не касается букв с выносными элементами («у», «р», «д»). Подпись «— Антон Чехов, «Каштанка»» стоит у правого края, а подписи к фотографиям не изменились. Объясните, почему подписи к фотографиям не выровнялись вправо.

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

css/style.css
CSS
/* Общие стили сайта Тони */

/* Шрифт заголовков Nunito (лицензия SIL Open Font License): кириллица и латиница в разных файлах */
@font-face {
  font-family: "Nunito";
  src: url("../assets/nunito-cyrillic-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-display: swap; /* пока шрифт загружается, текст виден запасным шрифтом */
  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Nunito";
  src: url("../assets/nunito-latin-800-normal.woff2") format("woff2");
  font-weight: 800;
  font-display: swap;
  unicode-range: U+0000-00FF, U+2000-206F, U+20AC, U+2122;
}

body {
  background-color: linen;
  color: #2b211b; /* цвет для потомков без собственного значения */
  font-size: 1.0625rem; /* 17px при настройке браузера по умолчанию */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; /* системный шрифт устройства */
}

/* Общий цвет заголовков — групповой селектор */
h1,
h2 {
  color: saddlebrown;
  font-family: "Nunito", "Trebuchet MS", system-ui, sans-serif;
  font-weight: 800;
}

/* Размеры заголовков в 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;
}

/* Цитата из книги — шрифтом с засечками и курсивом */
blockquote {
  font-family: Georgia, "Times New Roman", serif;
  font-style: italic;
}
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, сохраните файл и откройте главную страницу в браузере на всю ширину окна. Если результат отличается, нажмите в редакторе «Показать решение» и сравните его со своим кодом.

Дополнительная задача

Оформите заметку о бурундуках: сделайте заголовки выразительными, а основной текст удобным для чтения:

  • главный заголовок — по центру, с линией над текстом, капителью и разрядкой (у заглавных и малых заглавных букв увеличенный интервал);
  • заголовки разделов — по центру, заглавными буквами, цвета firebrick;
  • основные абзацы — по левому краю, с красной строкой 1.5em, обычным начертанием и межстрочным интервалом 1.6;
  • короткая подпись под главным заголовком — с чуть увеличенным интервалом между словами.

Ожидаемый результат: заголовок «Бурундуки» с чертой сверху и широкой разрядкой, заголовки «НАЗВАНИЕ» и «ВНЕШНИЙ ВИД» — красно-коричневые и по центру. Основной текст сохраняет обычный регистр букв и неровный правый край, первая строка отступает. Точные значения разрядки и интервала между словами подписи можете подобрать сами.

Дополнительный опыт: временно задайте основным абзацам text-align: justify, сузьте область результата и сравните пробелы между словами. Затем попробуйте капитель для всего абзаца. Объясните, почему выразительный приём для короткого заголовка не всегда подходит длинному тексту, и верните основное оформление.

Дополнительное задание: страница о бурундуках

Воспроизведите оформление текста по образцу. Замените ??? в CSS своими значениями.

Подсказка

Сравните выравнивание, отступ первой строки, регистр и расстояния между буквами и словами. text-transform меняет регистр, font-variant — начертание капителью.

index.html
HTML
<!doctype html>
<html lang="ru">
  <head>
    <meta charset="utf-8">
    <title>Дополнительное задание</title>
    <style>
      h1 {
        text-align: ???;
        text-decoration: ???; /* линия над заголовком */
        font-variant: ???; /* капитель */
        letter-spacing: ???; /* разрядка */
      }
      h2 {
        text-align: ???;
        text-transform: ???; /* все буквы заглавные */
        color: ???;
      }
      p:not(.caption) {
        text-align: ???; /* по левому краю */
        text-indent: ???; /* красная строка */
        font-variant: ???;
        line-height: ???;
      }
      .caption {
        text-align: center;
        word-spacing: ???;
      }
    </style>
  </head>
  <body>
    <h1>Бурундуки</h1>
    <p class="caption">Заметки о лесных соседях</p>
    <p>Бурундуки (лат. Tamias) — род грызунов из семейства беличьих. К бурундукам относятся 25 видов, большинство из которых обитает в Северной Америке, за исключением одного евразийского вида — азиатского, или сибирского, бурундука (Tamias sibiricus).</p>
    <h2>Название</h2>
    <p>Русское название животного является заимствованием из татарского языка (тат. борындык). Также в первой половине 20 века существовала версия, что слово является заимствованием из марийского слова.</p>
    <h2>Внешний вид</h2>
    <p>В зависимости от вида, вес бурундуков может составлять от 30 до 120 г, а размер — от 5 до 15 см при длине хвоста от 7 до 12 см. Отличительным признаком всех видов являются пять тёмных полосок вдоль спины, разделённые белыми или серыми полосками. Остальная окраска бурундуков — красно-бурая или серо-бурая. Так как это является общей чертой всех бурундуков, отдельные виды на первый взгляд трудноразличимы.</p>
  </body>
</html>