Теория

Цвета и шрифты

Зачем это нужно

Цвет и шрифт — первое, что замечает человек на сайте. По ним узнают бренд (красный YouTube, зелёный Сбер), от них зависит, легко ли читать текст. Хорошая типографика (оформление текста) незаметна: просто приятно читать. Плохая — утомляет за минуту.

Как записать цвет

Один и тот же цвет можно записать по-разному:

h1 { color: red; }                 /* по имени: red, blue, gold, tomato… (около 140 имён) */
h1 { color: #ff0000; }             /* HEX: шестнадцатеричный код */
h1 { color: #f00; }                /* короткий HEX: каждая цифра удваивается */
h1 { color: rgb(255, 0, 0); }      /* RGB: красный, зелёный, синий от 0 до 255 */
h1 { color: rgba(255, 0, 0, 0.5); } /* RGB + прозрачность от 0 до 1 */
h1 { color: hsl(0, 100%, 50%); }   /* HSL: оттенок, насыщенность, яркость */

Результат: все шесть строк дают красный цвет; пятая — полупрозрачный красный.

Как читать HEX. #RRGGBB — три пары цифр: сколько красного, зелёного и синего света. Цифры шестнадцатеричные: 0…9, затем a…f (f = 15). 00 — ноль, ff — максимум (255).

HEX	Цвет
`#000000`	чёрный (всё выключено)
`#ffffff`	белый (всё на максимум)
`#ff0000`	красный
`#00ff00`	зелёный
`#0000ff`	синий
`#808080`	серый (всего поровну, наполовину)

Код цвета обычно берут из дизайна или из «пипетки» в графическом редакторе.

Фон

body { background-color: #f5f5f5; }
.hero { background: linear-gradient(to right, purple, orange); }

Результат: светло-серая страница; блок .hero с плавным переходом от фиолетового к оранжевому.

background — «общее» свойство: в нём можно задать и цвет, и градиент, и картинку (background: url(bg.jpg);).

Прозрачность

У rgba четвёртое число — альфа-канал: 1 — непрозрачно, 0 — совсем прозрачно.

.overlay { background: rgba(0, 0, 0, 0.5); }

Результат: полупрозрачное затемнение — через него видно, что лежит ниже.

Есть ещё свойство opacity: 0.5; — но оно делает прозрачным весь элемент вместе с текстом, а rgba — только тот цвет, где оно указано.

Шрифты

body {
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 16px;
  font-weight: 400;   /* 400 — обычный, 700 — жирный */
  font-style: italic; /* курсив */
  line-height: 1.5;   /* межстрочный интервал */
}

font-family — список шрифтов через запятую. Браузер берёт первый, который есть на компьютере. Последним пишут семейство: serif (с засечками), sans-serif (без засечек), monospace (моноширинный). Название из нескольких слов — в кавычках.
font-weight — жирность числом от 100 до 900 или словом bold.
line-height: 1.5 — расстояние между строками в 1,5 раза больше размера шрифта. Для основного текста удобно 1.4–1.7.

Оформление текста

h2 {
  text-align: center;          /* left, right, center, justify */
  text-transform: uppercase;   /* ВСЕ ПРОПИСНЫЕ; lowercase; capitalize */
  letter-spacing: 2px;         /* расстояние между буквами */
  text-decoration: underline;  /* underline, line-through, none */
}

Результат: заголовок по центру, прописными буквами, буквы чуть разрежены и подчёркнуты.

text-decoration: none часто ставят ссылкам, чтобы убрать подчёркивание, а при наведении (a:hover) возвращают его обратно.

Как это работает внутри

Экран состоит из пикселей, каждый пиксель — три лампочки: красная, зелёная и синяя. Любой формат цвета браузер переводит в три числа 0–255. Поэтому в инструментах разработчика (и в проверке задач) цвет #ff0000 показывается как rgb(255, 0, 0).

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

Частые ошибки

HEX без решётки. color: ff0000; не работает. Нужно #ff0000.
Нет запасного шрифта. font-family: "Roboto"; — у кого Roboto нет, увидят шрифт по умолчанию. Добавь , sans-serif.
Светло-серый текст на белом. Красиво, но читать невозможно. Текст должен сильно отличаться от фона.
line-height: 16px вместо числа. С пикселями интервал не растёт вместе со шрифтом. Пиши число без единиц: 1.5.
opacity вместо rgba. Хотел полупрозрачный фон — а прозрачным стал и текст.

Шпаргалка

Свойство / запись	Что делает
`red`, `#ff0000`, `#f00`, `rgb(255,0,0)`	один и тот же красный
`rgba(0,0,0,0.5)`	цвет с прозрачностью
`background`	фон: цвет, градиент, картинка
`opacity`	прозрачность всего элемента
`font-family: …, sans-serif`	шрифт с запасными вариантами
`font-size`, `font-weight`, `font-style`	размер, жирность, курсив
`line-height: 1.5`	межстрочный интервал
`text-align`, `text-transform`	выравнивание, регистр букв
`letter-spacing`, `text-decoration`	разрядка, подчёркивание