Цветовое оформление в CSS
Чтение — около 9 минут· без учёта практики
В уроке о размере шрифта мы задали
размеры текста на сайте Тони. Цвета на нём тоже уже есть: фон linen, заголовки saddlebrown,
подвал в формате hsl(). Пора разобраться, какие бывают записи цвета, чем они отличаются и как проверить,
что текст хорошо читается на своём фоне.
Свойство color
Цвет текста элемента задаёт свойство
color:
селектор {
color: значение;
}
Те же значения принимают другие свойства с цветом, например цвет фона
background-color
и цвет рамки. Фон элемента подробнее рассмотрим в уроке
«Работа с фоном элемента». Начнём с
самой старой записи цвета — шестнадцатеричной (англ. hexadecimal, отсюда сокращение HEX).
Шестнадцатеричные значения
Шестнадцатеричное значение начинается со знака # и состоит из трёх пар цифр:
селектор {
color: #RRGGBB;
}
/* RR — красный, GG — зелёный, BB — синий */
Каждая пара (RR, GG и BB) — число от 00 до FF, то есть от 0 до 255 в десятичной
записи. В шестнадцатеричной системе счёт ведётся так: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, F. Цвет
получается смешиванием трёх составляющих: красной, зелёной и синей. Например, #0000FF — синий цвет:
синяя составляющая на максимуме (FF), остальные на минимуме (00). Регистр букв не важен:
#8B4513 и #8b4513 — один и тот же цвет.
Значение можно сократить до трёх цифр, если в каждой паре обе цифры одинаковы: #0000FF записывается
как #00F, а #777777 — как #777:
p.intro {
color: #777; /* тёмно-серый цвет для всех абзацев с классом intro */
}
Шестнадцатеричные значения: попробуйте сами
Заголовок окрашен в #8b4513 — тот же коричневый, что у заголовков на сайте Тони. Поменяйте местами пары цифр: #13458b даст синий цвет, потому что максимальной станет синяя составляющая.
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Шестнадцатеричные значения цвета</title>
<style>
h2 {
color: #8b4513; /* RR = 8b, GG = 45, BB = 13 — коричневый цвет заголовков Тони */
}
.blue {
color: #0000ff; /* только синяя составляющая на максимуме */
}
.gray {
color: #777; /* сокращённая запись #777777 */
}
</style>
</head>
<body>
<h2>Моя любимая игрушка</h2>
<p class="blue">Синий текст: #0000ff, коротко #00f.</p>
<p class="gray">Тёмно-серый текст: #777777, коротко #777.</p>
</body>
</html>
Тони готовит пример…Функция rgb()
Функция rgb() задаёт те же три составляющие — R (англ. red — красный), G
(green — зелёный), B (blue — синий) — десятичными числами:
селектор {
color: rgb(R, G, B);
}
Каждое число задаёт яркость составляющей от 0 до 255. Например, rgb(0, 0, 255) — синий цвет:
синяя составляющая на максимуме, красная и зелёная — на минимуме:
p {
color: rgb(0, 0, 255); /* синий цвет для всех абзацев */
}
Составляющие можно задавать и в процентах, где 100% соответствует 255. Например, оранжевый цвет для всех заголовков второго уровня:
h2 {
color: rgb(100%, 65%, 0%); /* оранжевый цвет для всех заголовков второго уровня */
}
В современном CSS числа в функциях цвета можно разделять пробелами без запятых: rgb(139 69 19). Обе
записи работают во всех современных браузерах; в учебнике встретятся обе.
Функция rgb(): попробуйте сами
rgb(139, 69, 19) и #8b4513 — один цвет: 8b, 45 и 13 в шестнадцатеричной записи — это 139, 69 и 19 в десятичной. Задайте всем трём составляющим одинаковое значение, например rgb(120, 120, 120), — получится серый.
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Функция rgb()</title>
<style>
h2 {
color: rgb(139, 69, 19); /* тот же коричневый, что #8b4513 */
}
.blue {
color: rgb(0, 0, 255); /* синий */
}
.orange {
color: rgb(100%, 65%, 0%); /* оранжевый: составляющие в процентах */
}
.modern {
color: rgb(139 69 19); /* современная запись: числа через пробел */
}
</style>
</head>
<body>
<h2>Мой режим дня</h2>
<p class="blue">rgb(0, 0, 255)</p>
<p class="orange">rgb(100%, 65%, 0%)</p>
<p class="modern">rgb(139 69 19)</p>
</body>
</html>
Прозрачность и альфа-канал
Цвету можно добавить четвёртую составляющую — альфа-канал, который задаёт непрозрачность. Раньше для этого
была отдельная функция rgba():
селектор {
color: rgba(R, G, B, A);
}
- R — красная составляющая;
- G — зелёная составляющая;
- B — синяя составляющая;
- A (англ. alpha) — степень смешивания с фоном.
Альфа-канал принимает значения от 0 до 1 или от 0% до 100%, где:
- 0 — цвет полностью прозрачный, невидимый;
- 1 — цвет непрозрачный.
Сравним зелёный фон блоков с альфа-каналом от rgba(0, 255, 0, 0.1) до rgba(0, 255, 0, 1) с
шагом 0.1:
Прозрачность цвета: попробуйте сами
Чем меньше альфа-канал, тем сильнее сквозь зелёный проступает фон страницы linen. Замените фон body на black — полупрозрачные блоки потемнеют, а непрозрачный последний блок не изменится.
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Прозрачность цвета: rgba() и альфа-канал</title>
<style>
body {
background-color: linen;
}
div {
display: inline-block; /* блоки стоят в строку, но им можно задать размеры */
width: 60px;
height: 60px;
}
.a1 { background-color: rgba(0, 255, 0, 0.1); }
.a2 { background-color: rgba(0, 255, 0, 0.2); }
.a3 { background-color: rgba(0, 255, 0, 0.3); }
.a4 { background-color: rgba(0, 255, 0, 0.4); }
.a5 { background-color: rgba(0, 255, 0, 0.5); }
.a6 { background-color: rgba(0, 255, 0, 0.6); }
.a7 { background-color: rgba(0, 255, 0, 0.7); }
.a8 { background-color: rgba(0, 255, 0, 0.8); }
.a9 { background-color: rgba(0, 255, 0, 0.9); }
.a10 { background-color: rgba(0, 255, 0, 1); }
.modern { background-color: rgb(0 255 0 / 50%); } /* современная запись: прозрачность после косой черты */
.hex { background-color: #00ff0080; } /* восемь цифр: последние две — прозрачность */
</style>
</head>
<body>
<div class="a1">0.1</div>
<div class="a2">0.2</div>
<div class="a3">0.3</div>
<div class="a4">0.4</div>
<div class="a5">0.5</div>
<div class="a6">0.6</div>
<div class="a7">0.7</div>
<div class="a8">0.8</div>
<div class="a9">0.9</div>
<div class="a10">1</div>
<p>Та же прозрачность 50% в другой записи:</p>
<div class="modern">/ 50%</div>
<div class="hex">#00ff0080</div>
</body>
</html>
Чем меньше значение альфа-канала, тем прозрачнее цвет. Блоки стоят в строку благодаря свойству
display
со значением inline-block: такие элементы располагаются в строку, как текст, но им можно задать размеры.
Блочную и строчную модель мы подробно рассмотрим в уроке
«Блочная и строчная модель».
В современном CSS альфа-канал можно добавить в саму функцию rgb() после косой черты:
rgb(0 255 0 / 0.5) или rgb(0 255 0 / 50%). Функция rgba() осталась для
совместимости и работает так же. Шестнадцатеричная запись тоже поддерживает прозрачность: четвёртая пара цифр —
альфа-канал, например #00ff0080 (80 в шестнадцатеричной системе — 128 из 255, около 50%).
Ноль перед точкой в дробных числах можно не писать: вместо 0.3 — .3, вместо
0.625 — .625. В учебнике я записываю ноль: так значение легче прочитать.
Альфа-канал и opacity
Если полупрозрачным нужен только фон карточки, задайте альфа-канал её цвету:
background-color: rgb(139 69 19 / 30%). Текст внутри останется непрозрачным.
Свойство opacity
(непрозрачность элемента) действует на весь отрисованный элемент вместе с потомками: opacity: 0.3 сделает бледными и фон, и текст.
Значение opacity: 1 у ребёнка этого не отменит. Контраст полупрозрачного текста проверяйте после смешивания с реальным фоном.
Прозрачный фон или весь блок: попробуйте сами
У первой карточки прозрачен только фон, у второй — также текст. Задайте второму абзацу opacity: 1: непрозрачность родителя всё равно действует на весь блок.
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Альфа-канал и opacity</title>
</head>
<body>
<section class="alpha"><h2>Любимая игрушка</h2><p>Тони приносит канат.</p></section>
<section class="whole"><h2>Любимая игрушка</h2><p>Тони приносит канат.</p></section>
</body>
</html>
style.css
body { background: linen; color: black; }
.alpha { background-color: rgb(139 69 19 / 30%); }
.whole { background-color: rgb(139 69 19); opacity: 0.3; }
Функция hsl()
Функция hsl() описывает цвет не смесью составляющих, а тремя понятными человеку характеристиками.
Название составлено из первых букв:
- H (англ. hue) — тон;
- S (англ. saturation) — насыщенность;
- L (англ. lightness) — светлота.
hsl(тон от 0 до 360, насыщенность от 0% до 100%, светлота от 0% до 100%)
Тон задаётся углом на круге оттенков в градусах, единицу deg можно не писать:
Красный цвет соответствует значениям 0 и 360, жёлтый — 60,
зелёный — 120, голубой — 180, синий — 240,
фиолетовый — 300.
Насыщенность определяет, насколько чистый цвет: 0% — серый без оттенка, 100% — чистый
и яркий цвет.
Светлота меняется от 0% (чёрный) до 100% (белый); при 50% и насыщенности 100% получается
чистый цвет. При нулевой насыщенности светлота 50% даёт серый.
Рассмотрим красный цвет (тон 0): в первом ряду растёт насыщенность, во втором — светлота.
Функция hsl(): попробуйте сами
В первом ряду насыщенность растёт от тусклого серо-красного к чистому красному, во втором светлота идёт от почти чёрного к белому. Замените тон 0 на 240 во всех правилах — ряды станут синими.
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Функция hsl(): насыщенность и светлота</title>
<style>
div {
display: inline-block;
width: 60px;
height: 60px;
font-size: 12px;
}
/* Тон 0 — красный, светлота 50%, насыщенность растёт от 10% до 100% */
.s1 { background-color: hsl(0, 10%, 50%); }
.s2 { background-color: hsl(0, 20%, 50%); }
.s3 { background-color: hsl(0, 30%, 50%); }
.s4 { background-color: hsl(0, 40%, 50%); }
.s5 { background-color: hsl(0, 50%, 50%); }
.s6 { background-color: hsl(0, 60%, 50%); }
.s7 { background-color: hsl(0, 70%, 50%); }
.s8 { background-color: hsl(0, 80%, 50%); }
.s9 { background-color: hsl(0, 90%, 50%); }
.s10 { background-color: hsl(0, 100%, 50%); }
/* Тон 0, насыщенность 100%, светлота растёт от 10% (почти чёрный) до 100% (белый) */
.l1 { background-color: hsl(0, 100%, 10%); }
.l2 { background-color: hsl(0, 100%, 20%); }
.l3 { background-color: hsl(0, 100%, 30%); }
.l4 { background-color: hsl(0, 100%, 40%); }
.l5 { background-color: hsl(0, 100%, 50%); }
.l6 { background-color: hsl(0, 100%, 60%); }
.l7 { background-color: hsl(0, 100%, 70%); }
.l8 { background-color: hsl(0, 100%, 80%); }
.l9 { background-color: hsl(0, 100%, 90%); }
.l10 { background-color: hsl(0, 100%, 100%); }
.dark {
color: white; /* на тёмных образцах белый текст читается лучше */
}
</style>
</head>
<body>
<p>Насыщенность:</p>
<div class="s1">10%</div>
<div class="s2">20%</div>
<div class="s3">30%</div>
<div class="s4">40%</div>
<div class="s5">50%</div>
<div class="s6">60%</div>
<div class="s7">70%</div>
<div class="s8">80%</div>
<div class="s9">90%</div>
<div class="s10">100%</div>
<p>Светлота:</p>
<div class="l1 dark">10%</div>
<div class="l2 dark">20%</div>
<div class="l3 dark">30%</div>
<div class="l4 dark">40%</div>
<div class="l5">50%</div>
<div class="l6">60%</div>
<div class="l7">70%</div>
<div class="l8">80%</div>
<div class="l9">90%</div>
<div class="l10">100%</div>
</body>
</html>
HSL удобна, чтобы получить оттенки одного цвета: тон остаётся прежним, меняется только светлота. Так подобраны фоны
на сайте Тони: вводный блок hsl(30, 80%, 95%) и подвал hsl(30, 50%, 90%) — один
тёплый тон 30, разные насыщенность и светлота.
Как и в RGB, в HSL можно добавить альфа-канал: прежняя запись — функция hsla(), современная —
hsl(300 100% 50% / 0.5). Рассмотрим фиолетовый цвет (тон 300) с прозрачностью от 0.1 до 1:
Прозрачность в hsl(): попробуйте сами
Фиолетовый становится всё плотнее с ростом альфа-канала. Последний блок записан современным синтаксисом: hsl(300 100% 50% / 0.5) — то же, что hsla(300, 100%, 50%, 0.5).
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Прозрачность в hsl()</title>
<style>
div {
display: inline-block;
width: 60px;
height: 60px;
}
/* Тон 300 — фиолетовый; прозрачность растёт от 0.1 до 1 */
.a1 { background-color: hsla(300, 100%, 50%, 0.1); }
.a2 { background-color: hsla(300, 100%, 50%, 0.2); }
.a3 { background-color: hsla(300, 100%, 50%, 0.3); }
.a4 { background-color: hsla(300, 100%, 50%, 0.4); }
.a5 { background-color: hsla(300, 100%, 50%, 0.5); }
.a6 { background-color: hsla(300, 100%, 50%, 0.6); }
.a7 { background-color: hsla(300, 100%, 50%, 0.7); }
.a8 { background-color: hsla(300, 100%, 50%, 0.8); }
.a9 { background-color: hsla(300, 100%, 50%, 0.9); }
.a10 { background-color: hsla(300, 100%, 50%, 1); }
.modern { background-color: hsl(300 100% 50% / 0.5); } /* современная запись */
</style>
</head>
<body>
<div class="a1">0.1</div>
<div class="a2">0.2</div>
<div class="a3">0.3</div>
<div class="a4">0.4</div>
<div class="a5">0.5</div>
<div class="a6">0.6</div>
<div class="a7">0.7</div>
<div class="a8">0.8</div>
<div class="a9">0.9</div>
<div class="a10">1</div>
<div class="modern">/ 0.5</div>
</body>
</html>
Попробуйте функции rgb() и hsl()
Настройте компоненты rgb() или hsl() и непрозрачность. При переключении функции устанавливается начальный образец для выбранной модели. Шахматный фон помогает увидеть прозрачность.
.sample {
background-color: rgb(40 120 210 / 1);
}HTML примера
<div class="sample"></div>Именованные цвета
Кроме числовых записей, в CSS есть именованные цвета: linen, saddlebrown,
dimgray и ещё около 150 названий. Каждое имя соответствует определённому значению: saddlebrown
— это #8b4513, linen — #faf0e6. Полный перечень — в справочнике HTML в разделе
HTML цвета.
p.intro {
color: gray; /* серый цвет для всех абзацев с классом intro */
}
i {
color: orange; /* оранжевый цвет для всех элементов <i> */
}
h2:first-child {
color: red; /* красный цвет для заголовков <h2>, которые идут первыми в своём родителе */
}
Два особых ключевых слова не обозначают конкретный цвет. transparent — полностью прозрачный цвет, то же,
что rgb(0 0 0 / 0). currentColor — текущее значение color элемента: например,
рамка с currentColor всегда того же цвета, что текст.
Именованные цвета: попробуйте сами
Рамка второго абзаца взяла цвет текста через currentColor. Замените dimgray на saddlebrown в правиле .note — рамка поменяет цвет вместе с текстом.
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Именованные цвета, currentColor и transparent</title>
<style>
body {
background-color: linen; /* #faf0e6 */
}
h2 {
color: saddlebrown; /* #8b4513 */
}
.note {
color: dimgray; /* #696969 */
border: 2px solid currentColor; /* рамка того же цвета, что текст */
}
.clear {
background-color: transparent; /* полностью прозрачный фон */
}
</style>
</head>
<body>
<h2>Где я гуляю</h2>
<p class="note">Рамка этого абзаца взяла цвет текста через currentColor.</p>
<p class="clear">Фон этого абзаца прозрачный — видно фон страницы.</p>
</body>
</html>
Имена удобны в учебных примерах и для быстрых правок. Но набор имён ограничен, а близкие оттенки названы
непредсказуемо (darkgray светлее, чем gray). Для палитры сайта обычно выбирают точные
значения в HEX, rgb() или hsl().
Другие функции цвета
В современном CSS есть и другие функции цвета: hwb() (тон, примесь белого и чёрного),
lab(), lch(), oklab() и oklch(). Последние описывают цвет так, как
его воспринимает глаз: при одинаковой светлоте в oklch() жёлтый и синий выглядят одинаково светлыми, а в
HSL — нет. Кроме того, они позволяют задать цвета ярче, чем умеют HEX и RGB, на экранах, которые их показывают.
Перевести цвет между всеми этими записями можно в инструменте
«Генератор цветов». В учебнике мы будем
пользоваться HEX, rgb() и hsl(): их достаточно для оформления сайта.
Контраст текста и фона
Цвет текста выбирают не только по вкусу: текст должен читаться на своём фоне. Светло-серый на белом, бежевый на светло-бежевом могут выглядеть изящно, но людям со слабым зрением, на ярком солнце или на плохом экране такой текст не прочитать.
Контраст текста и фона рассчитывают по их относительной яркости. Отношение контрастности — число от 1:1 (относительная яркость одинакова, хотя цвета могут различаться) до 21:1 (чёрный на белом). Рекомендации по доступности WCAG (англ. Web Content Accessibility Guidelines — рекомендации по обеспечению доступности веб-контента) требуют для основного текста не меньше 4.5:1, для крупного — не меньше 3:1. Крупным считается текст от 24px или полужирный от 18.66px. Уровень повыше (AAA) требует 7:1 для обычного текста.
Проверим цвета сайта Тони на фоне linen:
| Цвет | Где используется | Контраст на linen |
|---|---|---|
#2b211b |
Основной текст | 13.97:1 — подходит |
saddlebrown |
Заголовки и меню | 6.31:1 — подходит |
dimgray |
Подписи к фотографиям, оглавление | 4.88:1 — подходит, но холодный серый выбивается из тёплой палитры |
tan |
Рамка оглавления | 1.75:1 — для текста не годится, для декоративной рамки допустимо |
Контраст в таблице посчитан по формуле WCAG. Проверьте его сами в виджете ниже.
Потренируйтесь
Введите цвет в любой записи — saddlebrown, #8b4513, rgb(139 69 19) или
hsl(25 76% 31%) — и посмотрите, как он записывается в других форматах. Под образцом — контраст этого цвета
как цвета текста на фоне linen. Проверьте dimgray, tan и
#6b5d52: какие из них подходят для текста?
Проверьте себя
Выберите ответ — объяснение появится сразу. Ответ можно менять.
}.tan{fill:var(--tony-tan,%23bf783f)}.inner{fill:var(--tony-ear,%23995b3c);stroke:none}.line{stroke:var(--tony-ink,%23191b20);stroke-width:6;stroke-linecap:round;stroke-linejoin:round}%3c/style%3e%3cdefs%3e%3cfilter%20id='border'%20x='-20%25'%20y='-20%25'%20width='140%25'%20height='140%25'%20color-interpolation-filters='sRGB'%3e%3cfeMorphology%20in='SourceAlpha'%20operator='dilate'%20radius='8'%20result='expanded'/%3e%3cfeFlood%20flood-color='%23fff'/%3e%3cfeComposite%20in2='expanded'%20operator='in'/%3e%3cfeMerge%3e%3cfeMergeNode/%3e%3cfeMergeNode%20in='SourceGraphic'/%3e%3c/feMerge%3e%3c/filter%3e%3c/defs%3e%3cg%20class='line'%20filter='url(%23border)'%3e%3cg%20id='body'%3e%3cpath%20class='fur'%20d='M210%20267%20Q179%20296%20163%20354%20Q148%20391%20164%20429%20Q194%20448%20251%20448%20Q318%20451%20348%20427%20Q356%20386%20332%20341%20L298%20268Z'/%3e%3cpath%20fill='%23555157'%20stroke='none'%20d='M217%20280%20Q250%20299%20290%20280%20L307%20339%20Q293%20371%20255%20371%20Q221%20367%20205%20340Z'/%3e%3cpath%20class='tan'%20stroke='none'%20d='M184%20347%20Q214%20364%20242%20357%20L249%20381%20Q205%20391%20181%20368Z%20M263%20358%20Q296%20368%20322%20346%20L326%20371%20Q300%20391%20265%20382Z'/%3e%3cpath%20class='tan'%20d='M165%20404%20Q142%20414%20153%20436%20Q169%20449%20210%20439%20L216%20422Z'/%3e%3cpath%20class='tan'%20d='M326%20402%20Q352%20408%20356%20430%20Q347%20447%20306%20439%20L296%20423Z'/%3e%3c/g%3e%3cg%20id='paw-left'%3e%3cpath%20class='fur'%20d='M190%20368%20L194%20432%20Q179%20446%20191%20458%20Q216%20467%20238%20457%20Q249%20449%20233%20432%20L237%20383'/%3e%3cpath%20class='tan'%20d='M194%20412%20L195%20433%20Q180%20448%20193%20457%20Q216%20466%20237%20456%20Q249%20448%20232%20431%20L233%20413'/%3e%3cpath%20fill='none'%20stroke-width='3'%20d='M205%20449%20L205%20460%20M220%20449%20L221%20461'/%3e%3c/g%3e%3cg%20id='paw-right'%3e%3cpath%20class='fur'%20d='M277%20383%20L282%20433%20Q267%20446%20279%20458%20Q304%20467%20326%20457%20Q337%20449%20321%20432%20L320%20366'/%3e%3cpath%20class='tan'%20d='M280%20413%20L283%20433%20Q268%20448%20281%20457%20Q304%20466%20325%20456%20Q337%20448%20320%20431%20L319%20412'/%3e%3cpath%20fill='none'%20stroke-width='3'%20d='M293%20449%20L293%20461%20M307%20449%20L310%20461'/%3e%3c/g%3e%3cg%20id='head'%3e%3cg%20id='ears'%3e%3cpath%20class='fur'%20d='M185%20177%20Q166%20119%20175%2045%20Q203%2077%20211%20161Z%20M291%20160%20Q300%2090%20329%2039%20Q339%20115%20320%20179Z'/%3e%3cpath%20class='inner'%20d='M187%20145%20Q179%20112%20181%2072%20Q195%20101%20199%20151Z%20M305%20149%20Q312%20102%20323%2069%20Q328%20115%20317%20152Z'/%3e%3c/g%3e%3cpath%20class='fur'%20d='M179%20188%20Q181%20154%20218%20146%20Q252%20137%20288%20148%20Q321%20157%20326%20191%20L317%20237%20Q303%20258%20285%20277%20L272%20296%20Q251%20309%20230%20297%20L216%20278%20Q197%20264%20188%20239Z'/%3e%3cpath%20fill='%2341434a'%20stroke='none'%20d='M196%20169%20Q214%20149%20250%20150%20L235%20166Z'/%3e%3cg%20class='tan'%20stroke='none'%3e%3cellipse%20cx='212'%20cy='181'%20rx='10'%20ry='6'/%3e%3cellipse%20cx='291'%20cy='180'%20rx='10'%20ry='6'/%3e%3c/g%3e%3cg%20id='eyes'%3e%3cellipse%20fill='%2378523a'%20cx='210'%20cy='204'%20rx='13'%20ry='16'/%3e%3cellipse%20fill='%2313171c'%20stroke='none'%20cx='211'%20cy='203'%20rx='10'%20ry='14'/%3e%3ccircle%20fill='%23fffaf0'%20stroke='none'%20cx='206'%20cy='198'%20r='4'/%3e%3cellipse%20fill='%2378523a'%20cx='291'%20cy='203'%20rx='13'%20ry='16'/%3e%3cellipse%20fill='%2313171c'%20stroke='none'%20cx='292'%20cy='202'%20rx='10'%20ry='14'/%3e%3ccircle%20fill='%23fffaf0'%20stroke='none'%20cx='287'%20cy='197'%20r='4'/%3e%3c/g%3e%3cg%20id='muzzle'%3e%3cpath%20class='tan'%20d='M222%20231%20Q211%20246%20213%20270%20L221%20292%20Q250%20311%20279%20291%20Q291%20279%20288%20257%20L277%20232%20Q265%20243%20251%20242Z'%20stroke='none'/%3e%3cpath%20fill='%2334363b'%20stroke='none'%20d='M237%20211%20Q250%20205%20263%20211%20L274%20261%20Q249%20275%20226%20261Z'/%3e%3cpath%20fill='%2317191e'%20d='M229%20261%20Q251%20251%20273%20261%20L269%20277%20Q253%20290%20235%20277Z'/%3e%3cpath%20fill='none'%20stroke='%2368676b'%20stroke-width='3'%20d='M238%20262%20Q250%20259%20260%20262'/%3e%3cg%20id='expression-mouth'%3e%3cpath%20fill='%2317191e'%20stroke-width='3'%20d='M232%20287%20Q252%20294%20273%20286%20Q270%20308%20252%20309%20Q237%20307%20232%20287Z'/%3e%3cpath%20fill='%23d88b86'%20stroke='none'%20d='M243%20300%20Q253%20295%20263%20300%20L262%20308%20Q253%20316%20245%20309Z'/%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/g%3e%3c/svg%3e)
Задание
Ожидаемый результат: подписи к фотографиям и пункты оглавления — тёплого серо-коричневого цвета, а фраза
«Пожалуйста, не кормите меня со стола!» на главной — тёмно-коричневая. Контраст #6b5d52 на
linen — 5.64:1, #6e3510 — 8.57:1 (на чуть более светлом фоне вводного блока — ещё выше): оба
цвета подходят для основного текста.
Выполните задание
Условие задания
css/style.css
/* Общие стили сайта Тони */
body {
background-color: linen;
color: #2b211b; /* цвет для потомков без собственного значения */
font-size: 1.0625rem; /* 17px при настройке браузера по умолчанию */
}
/* Общий цвет заголовков — групповой селектор */
h1,
h2 {
color: saddlebrown;
}
/* Размеры заголовков в rem — от размера шрифта корня, а не родителя */
h1 {
text-align: center;
font-size: 2.5rem;
}
h2 {
font-size: 1.75rem;
}
/* Вводный блок главной страницы */
.intro {
background-color: hsl(30, 80%, 95%);
}
/* Оглавление главной страницы */
.toc {
background-color: white;
border: 1px solid tan;
}
/* Ссылки меню в шапке — селектор потомков */
nav a {
color: saddlebrown;
text-decoration: none;
}
/* Ссылки оглавления главной страницы */
.toc a {
color: dimgray;
}
figcaption {
color: dimgray;
font-size: 0.95rem;
}
footer {
background-color: hsl(30, 50%, 90%);
text-align: center;
}
/* Ссылка в подвале берёт цвет текста подвала */
footer a {
color: inherit;
}
/* Поля формы получают шрифт страницы вместо шрифта браузера */
input,
select,
textarea,
button {
font: inherit;
}
/* Ссылки темнеют при наведении указателя */
a:hover {
color: #5c2d0c;
}
/* Ссылки меню подчёркиваются при наведении и фокусе с клавиатуры */
nav a:hover,
nav a:focus-visible {
text-decoration: underline;
}
/* Заметная рамка фокуса у ссылок, полей и кнопок при работе с клавиатуры */
:focus-visible {
outline: 3px solid #1f6feb;
outline-offset: 3px;
}
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Сайт карликового пинчера Тони: игрушки, режим дня и запись на прогулку.">
<title>Сайт Тони</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<header>
<!-- Меню сайта -->
<nav>
<ul>
<li><a href="index.html">Главная</a></li>
<li><a href="pages/toys.html">Мои игрушки</a></li>
<li><a href="pages/signup.html">Запись на прогулку</a></li>
</ul>
</nav>
</header>
<main>
<div class="intro">
<h1 id="top">Привет! Меня зовут Тони</h1>
<p>Я карликовый пинчер. Мне три года, я вешу 8 кг и люблю гулять в любую погоду. Хозяин говорит: <q>Тони — лучший сторож в доме</q>.</p>
<p>Мой день рождения — <time datetime="2023-09-22">22 сентября</time>. <strong>Пожалуйста, не кормите меня со стола!</strong></p>
<p>Моя родословная записана в Российской кинологической федерации (<abbr title="Российская кинологическая федерация">РКФ</abbr>).</p>
</div>
<ul class="toc">
<li><a href="#toy">Моя любимая игрушка</a></li>
<li><a href="#commands">Команды, которые я знаю</a></li>
<li><a href="#schedule">Мой режим дня</a></li>
<li><a href="#walks">Где я гуляю</a></li>
<li><a href="#song">Песня для прогулок</a></li>
</ul>
<section>
<h2 id="toy">Моя любимая игрушка</h2>
<p data-toy-id="17">Это канат с мячиком. Хозяин бросает его, а я приношу обратно — <em>почти</em> всегда. <a href="pages/toys.html">Посмотреть все игрушки Тони</a>.</p>
<figure>
<img src="assets/tony-toy.png" alt="Тони сидит и держит в зубах канат с красным мячиком" width="300" height="400" title="Мой канат "Удав"">
<figcaption>Я и мой канат «Удав»</figcaption>
</figure>
<p><a href="assets/tony-toy.png" download>Скачать фотографию</a></p>
<p>Подробнее о моей породе — в статье <a href="https://ru.wikipedia.org/wiki/Карликовый_пинчер" target="_blank">«Карликовый пинчер» в Википедии</a>.</p>
<hr>
<p>Вечером игра закончилась. Канат остался на полу, а я свернулся калачиком в кресле.</p>
</section>
<section>
<h2>Мой стишок</h2>
<p>
Я маленький, но смелый,<br>
Гуляю целый день,<br>
А вечером на кресле<br>
Сплю — и мне не лень.
</p>
</section>
<section>
<h2 id="commands">Команды, которые я знаю</h2>
<p>Хозяин научил меня командам на немецком:</p>
<dl>
<dt lang="de">Sitz!</dt>
<dd>сидеть</dd>
<dt lang="de">Platz!</dt>
<dd>лежать</dd>
<dt lang="de">Fuß!</dt>
<dd>рядом</dd>
</dl>
<details>
<summary>Почему команды на немецком?</summary>
<p>Карликовый пинчер — немецкая порода, и хозяину понравилась эта традиция.</p>
</details>
</section>
<section>
<h2 id="schedule">Мой режим дня</h2>
<table>
<caption>Режим дня Тони</caption>
<thead>
<tr>
<th scope="col">Время</th>
<th scope="col">Будни</th>
<th scope="col">Выходные</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">07:00</th>
<td>Прогулка, 20 минут</td>
<td>Сплю</td>
</tr>
<tr>
<th scope="row">08:00</th>
<td colspan="2">Завтрак</td>
</tr>
<tr>
<th scope="row">13:00</th>
<td>Жду хозяина и сплю</td>
<td>Прогулка в парке, 1 час</td>
</tr>
<tr>
<th scope="row">19:00</th>
<td colspan="2">Ужин</td>
</tr>
<tr>
<th scope="row">21:00</th>
<td colspan="2">Вечерняя прогулка</td>
</tr>
</tbody>
</table>
</section>
<section>
<h2 id="progress">Мои успехи</h2>
<p>Учу команду «Апорт»: пройдено 3 занятия из 5. <progress value="3" max="5">3 из 5</progress></p>
<p>Прогулка сегодня: 40 минут. <meter value="40" min="0" max="90" low="30" high="60" optimum="75">40 из 90 минут</meter></p>
</section>
<section>
<h2 id="walks">Где я гуляю</h2>
<p>Я люблю гулять в сквере у дома.</p>
<p>
<a href="pages/walks.html" target="walk">Маршрут</a> |
<a href="assets/tony.png" target="walk">Фото с прогулки</a>
</p>
<iframe src="pages/walks.html" name="walk" title="Маршрут и фото прогулки Тони" width="320" height="420"></iframe>
<h3>Видео с прогулки</h3>
<p>Субтитры помогут, если вы смотрите видео без звука.</p>
<video width="180" height="320" poster="assets/walk.jpg" controls>
<source src="assets/walk.mp4" type="video/mp4">
<track src="assets/ru.vtt" kind="subtitles" srclang="ru" label="Русский" default>
<p><a href="assets/walk.mp4">Скачать видео</a></p>
</video>
<h3>Как я лаю</h3>
<p>Так я разговариваю с хозяином — у нас целый диалог!</p>
<audio controls>
<source src="assets/bark.mp3" type="audio/mpeg">
<p><a href="assets/bark.mp3">Скачать запись</a></p>
</audio>
</section>
<section>
<h2 id="song">Песня для прогулок</h2>
<p>Хозяин включает эту песню, когда мы выходим гулять.</p>
<iframe width="480" height="270" src="https://www.youtube.com/embed/ojULkWEUsPs?start=17" title="Baha Men — Who Let the Dogs Out" loading="lazy" allow="fullscreen"></iframe>
<p><a href="https://www.youtube.com/watch?v=ojULkWEUsPs">Baha Men — Who Let the Dogs Out на YouTube</a></p>
</section>
<section>
<h2>Моя любимая книга</h2>
<p>Хозяин читал мне вслух рассказ <cite>«Каштанка»</cite> Антона Чехова. Он начинается так:</p>
<figure>
<blockquote>
<p>Молодая рыжая собака — помесь таксы с дворняжкой — очень похожая мордой на лисицу, бегала взад и вперёд по тротуару и беспокойно оглядывалась по сторонам.</p>
</blockquote>
<figcaption>— Антон Чехов, <cite>«Каштанка»</cite></figcaption>
</figure>
</section>
<p><a href="#top">Наверх</a></p>
</main>
<footer>
<p><small>© 2026 Тони и его хозяин</small></p>
<address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
</footer>
</body>
</html>
pages/signup.html
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Запишитесь на совместную прогулку с карликовым пинчером Тони.">
<title>Запись на прогулку с Тони</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="../index.html">Главная</a></li>
<li><a href="toys.html">Мои игрушки</a></li>
<li><a href="signup.html">Запись на прогулку</a></li>
</ul>
</nav>
</header>
<main>
<h1>Запись на прогулку</h1>
<p>Гуляйте вместе с Тони! Оставьте заявку, и хозяин Тони напишет вам, чтобы договориться о встрече.</p>
<p><a href="../index.html#walks">Где мы гуляем</a></p>
<form>
<fieldset>
<legend>О вас</legend>
<p>
<label for="owner">Ваше имя</label>
<input type="text" id="owner" name="owner" autocomplete="name" required>
</p>
<p>
<label for="email">Электронная почта</label>
<input type="email" id="email" name="email" autocomplete="email" placeholder="anna@example.com" required>
</p>
</fieldset>
<fieldset>
<legend>Ваша собака</legend>
<p>
<label for="breed">Порода</label>
<input type="text" id="breed" name="breed" list="breeds">
<datalist id="breeds">
<option value="Карликовый пинчер"></option>
<option value="Такса"></option>
<option value="Йоркширский терьер"></option>
<option value="Беспородная"></option>
</datalist>
</p>
<p>
<label for="dogs">Сколько собак придёт</label>
<input type="number" id="dogs" name="dogs" min="1" max="3" value="1">
</p>
</fieldset>
<fieldset>
<legend>Когда гулять</legend>
<p>
<label for="date">Дата</label>
<input type="date" id="date" name="date" required>
</p>
<label><input type="radio" name="time" value="morning" checked> Утром</label>
<label><input type="radio" name="time" value="evening"> Вечером</label>
</fieldset>
<fieldset>
<legend>Прогулка</legend>
<p>
<label for="leader">Ведёт прогулку</label>
<input type="text" id="leader" name="leader" value="Тони" readonly>
</p>
<p>
<label for="route">Маршрут</label>
<select id="route" name="route">
<optgroup label="В городе">
<option value="square">Сквер у дома</option>
<option value="pond" selected>Пруд с утками</option>
</optgroup>
<optgroup label="За городом">
<option value="forest">Лес</option>
<option value="river" disabled>Берег реки — закрыт до весны</option>
</optgroup>
</select>
</p>
<p>
<label for="wishes">Пожелания</label><br>
<textarea id="wishes" name="wishes" rows="4" cols="40" maxlength="300" placeholder="Например: моя собака боится велосипедов"></textarea>
</p>
</fieldset>
<fieldset>
<legend>Что взять с собой</legend>
<label><input type="checkbox" name="take" value="ball"> Мячик</label>
<label><input type="checkbox" name="take" value="rope"> Канат</label>
</fieldset>
<p>
<button type="submit">Записаться на прогулку</button>
<button type="reset">Очистить форму</button>
</p>
</form>
</main>
<footer>
<p><small>© 2026 Тони и его хозяин</small></p>
<address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
</footer>
</body>
</html>
pages/toys.html
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Любимые игрушки Тони и правила игры в канат.">
<title>Игрушки Тони</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="../index.html">Главная</a></li>
<li><a href="toys.html">Мои игрушки</a></li>
<li><a href="signup.html">Запись на прогулку</a></li>
</ul>
</nav>
</header>
<main>
<h1>Мои игрушки</h1>
<ul>
<li>Канат с мячиком «Удав» — моя любимая игрушка</li>
<li>Резиновая косточка — для вечеров, когда гулять уже поздно</li>
<li>Пищащий ёжик — его я прячу <del>под диваном</del> <ins>в своей лежанке</ins></li>
</ul>
<img src="../assets/tony.png" alt="Тони сидит и смотрит в камеру" width="300" height="400">
<h2>Как играть со мной в канат</h2>
<ol>
<li>Покажите мне канат.</li>
<li>Бросьте его подальше.</li>
<li>Подождите, пока я принесу его обратно.</li>
<li>Похвалите меня — и всё сначала!</li>
</ol>
<section>
<h2 id="album">Мой фотоальбом</h2>
<ul>
<li>
<figure>
<img src="../assets/album-puppy.png" alt="Тони-щенок сидит и смотрит в камеру" width="300" height="400">
<figcaption>Я в детстве</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-squirrel.png" alt="Тони лежит в обнимку с плюшевой белкой" width="300" height="400">
<figcaption>С плюшевой белкой</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-hoodie.png" alt="Тони стоит в бежевой толстовке с капюшоном" width="300" height="400">
<figcaption>В худи для холодной погоды</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-harness.png" alt="Тони в оранжевой шлейке ждёт прогулку" width="300" height="400">
<figcaption>Шлейка надета — идём гулять!</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-laugh.png" alt="Тони лежит, запрокинув голову, и широко открыл пасть, будто смеётся" width="300" height="400">
<figcaption>Смеюсь над шуткой хозяина</figcaption>
</figure>
</li>
<li>
<figure>
<img src="../assets/album-sleep.png" alt="Тони спит, положив голову на лапы" width="300" height="319">
<figcaption>После прогулки</figcaption>
</figure>
</li>
</ul>
</section>
<p><a href="../index.html#commands">Какие команды я знаю</a></p>
<p><a href="../index.html">Вернуться на главную</a></p>
</main>
<footer>
<p><small>© 2026 Тони и его хозяин</small></p>
<address>Написать хозяину Тони: <a href="mailto:tony@example.com">tony@example.com</a></address>
</footer>
</body>
</html>
pages/walks.html
<html lang="ru">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="Маршрут прогулки Тони: сквер, пруд и поляна для игры с канатом.">
<title>Где гуляет Тони</title>
<link rel="stylesheet" href="../css/style.css">
</head>
<body>
<h1>Мой маршрут</h1>
<ol>
<li>Сквер у дома.</li>
<li>Пруд с утками.</li>
<li>Поляна для игры с канатом.</li>
</ol>
</body>
</html>
Продолжите в VS Code
Внесите те же изменения в css/style.css своей папки my-site, сохраните файл и откройте
главную страницу в браузере. Если результат отличается, нажмите в редакторе «Показать решение» и сравните его со своим
кодом.
Дополнительная задача
Оформите афишу «Ночь короткого кино» тремя цветами: красным, чёрным и белым. Хотя бы по одному разу используйте
именованный цвет, шестнадцатеричное значение и функцию rgba().
Ожидаемый результат: на странице только красный, чёрный и белый цвета, а в CSS встречаются все три записи цвета. Выделите название события, сохранив читаемость описания и времени встречи. Сочетания могут быть любыми, но проверьте контраст: красный текст на чёрном фоне (5.25:1) читается, а красный на белом (4:1) подходит только для крупного заголовка. В решении — один из вариантов.
Выполните дополнительную задачу
Условие задания
index.html
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Дополнительное задание</title>
<style>
</style>
</head>
<body>
<h2>Ночь короткого кино</h2>
<p>Пять коротких историй и один строгий кинокритик — Тони. Фильм про белку уже получил пять лап из пяти.</p>
<p><b>Суббота, 19:00.</b> Малый зал. Вход свободный. Место у прохода занято: Тони ждёт, когда выведут главного героя.</p>
</body>
</html>