Цвет, размер и скругление

Урок 2.1 · Интерфейсы и сайты с нуля · Модуль 2. Как это выглядит: семь простых настроек · Бесплатно

Цель урока: Научиться задавать цвет фона, цвет текста, размер шрифта и скругление — четыре базовые настройки CSS.

Нужно знать заранее: Урок 1.3

Объяснение

Зачем это нужно: Почти любой «красивый» блок на сайте — это одно и то же короткое правило CSS. Разобравшись в семи настройках, вы сможете нарисовать что угодно: от карточки товара до кнопки в игре. Первые четыре — цвет фона, цвет текста, размер шрифта и скругление.

Как это работает: Правило CSS выбирает элемент и задаёт ему настройки. Выбрать можно по тегу (p), по классу (.note) или по идентификатору (#result). Класс — самый удобный способ: вы даёте имя блоку в HTML и потом обращаетесь к нему по имени. Цвет можно задать тремя способами: словом (red), кодом (#e11d48) или через rgb(225, 29, 72). Все три работают одинаково. Размер шрифта задаётся в пикселях: font-size: 20px. Скругление — border-radius: 12px.

Пример с разбором: .note { background: #fff7ed; color: #9a3412; font-size: 18px; border-radius: 12px; } Класс .note выбирает элемент с атрибутом class="note". Дальше четыре настройки: светлый фон, тёмный текст, крупнее обычного и скруглённые углы.

Разбор по шагам: 1. В HTML у блока есть class="note". 2. В CSS пишем .note (точка — значит «класс»). 3. Внутри фигурных скобок перечисляем настройки: background, color, font-size, border-radius. 4. Проверяем, что текст читается на фоне.

Частая ошибка: Забыть точку перед именем класса. Селектор note ищет тег <note>, которого не существует, и правило молча не работает. Если «ничего не изменилось» — первым делом проверьте точку. Вторая ошибка — цвет текста совпадает с фоном: надписи не видно.

Важно: Цвет — не только украшение. Он задаёт настроение и показывает важность. Но сначала — читаемость: тёмный текст на светлом фоне или светлый на тёмном. Контраст мы разберём отдельно в уроке 2.5.

Проверь себя: Как выбрать класс .note в CSS? .note. Что задаёт background? Цвет фона. Что задаёт color? Цвет текста. Что задаёт border-radius? Скругление углов.

Итог: Цвет фона, цвет текста, размер шрифта, скругление — четыре настройки из семи. Три оставшиеся (отступы, рамка, тень) — в следующих уроках.

Что дальше: В уроке 2.2 — отступы: снаружи и внутри.

.note {
  background: #fff7ed;
  color: #9a3412;
  font-size: 18px;
  border-radius: 12px;
}

Уроки модуля 2

• 2.1 Цвет, размер и скругление — вы здесь (бесплатно)
• 2.2 Отступы: снаружи и внутри (по подписке)
• 2.3 Рамка, тень и шрифт (по подписке)
• 2.4 Семь настроек вместе: карточка (по подписке)
• 2.5 Цвет и контраст: чтобы текст читался (по подписке)
• 2.6 Шрифт: размер, насыщенность и интервал (по подписке)
• 2.7 Состояния кнопки: hover, focus, active (по подписке)
• 2.8 Разбор карточки: что поправить в оформлении (по подписке)