Загрузка...

Цвета в CSS

Вы умеете нацеливаться на элементы. Теперь красьте. Первый навык цвета прост: задайте цвет текста свойством color. Фоны, градиенты и полная математика цвета — позже; сегодня читаемый, переиспользуемый цвет переднего плана.

Что делает color?

Свойство color задаёт цвет переднего плана — в основном цвет букв. Браузер также использует вычисленный цвет для того, что следует currentColor (рамки, часть SVG, украшения). Оно не заливает блок за текстом; это background-color (следующие модули).

Именованные цвета одним взглядом

В CSS много именованных цветов — ключевых слов вроде teal и navy. Сначала запомните небольшой повседневный набор. Точный hex и rgb() — в уроке значений цвета.

📊 Повседневные именованные цвета

Имя Ощущение Типичное использование
black / white Максимальный контраст Основной текст или холст страницы (осторожно)
navy / teal Спокойные акценты бренда Ссылки, заголовки, заметки
maroon / crimson Сильное предупреждение или акцент Ошибки, ярлыки акций (редко)
gray / silver Тихий вторичный текст Подписи, приглушённые метки
transparent Полностью прозрачный Спрятать рамку, не удаляя свойство

Цвет текста именем

Напишите обычное объявление: свойство color, значение — именованный цвет. Начните с абзаца, чтобы страница выглядела намеренно.

Именованный цвет на тексте абзаца

css
CSS Code 
p {
color: teal;
}

Как читать результат

Каждый подходящий <p> рисует буквы teal. Имя свойства всегда color — не text-color и не font-color.

Заголовки могут отличаться от тела

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

Акцент заголовка против тела

css
CSS Code 
h1 {
color: navy;
}

.lead {
color: gray;
}

Привычка дизайна

Контрастные заголовки помогают сканировать. Мягкий вторичный текст не даёт подписям кричать. Но контраста для чтения всё равно должно хватать.

Цвет наследуется

Дети берут color родителя, пока не зададут свой. Поэтому цвет на контейнере может оформить целый текстовый блок.

Унаследованный цвет на блоке заметки

css
CSS Code 
.note {
color: maroon;
}

Что наследуется?

Внутри <div class="note">…</div> абзацы и span остаются maroon, пока более сильное правило не изменит их. Наследование — возможность, не баг.

currentColor совпадает с текстом

currentColor значит «возьми вычисленный color элемента». Удобно, когда рамка или иконка должны идти в ногу с текстом.

Рамка следует за текстом через currentColor

css
CSS Code 
.badge {
color: teal;
border: 2px solid currentColor;
padding: 0.25rem 0.5rem;
}

Зачем стараться?

Меняете color один раз — рамка следует. Не нужна вторая жёстко прошитая teal для синхронизации.

Тематическая карточка (вместе)

Соедините цвет контейнера, более спокойный override у ребёнка и акцент currentColor.

Тема карточки с override + currentColor

css
CSS Code 
.card {
color: navy;
border: 1px solid currentColor;
padding: 1rem;
}

.card .muted {
color: gray;
}

color — не фон

Новички часто пишут color, когда имели в виду заливку за текстом. Разделяйте с первого дня:

  • color → текст (передний план)
  • background-color → окрашенный блок за содержимым (скоро)

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

  1. Страница с заголовком, <p class="lead"> и <div class="note"> с коротким абзацем.
  2. Задайте h1 { color: navy; }, p { color: teal; } и .note { color: maroon; } — проверьте каждую зону.
  3. Добавьте .badge { color: teal; border: 2px solid currentColor; } на маленький span — рамка должна совпасть с текстом.
  4. В .card navy на карточке и color: gray на .muted — override ребёнка побеждает для этой строки.
  5. По желанию: color: transparent на декоративной метке — текст исчезает, место в вёрстке остаётся.

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

  • Красить фон блока через color — позже background-color
  • Выдумывать имена (lightishblue) — держитесь реальных ключевых слов CSS или ждите hex/rgb
  • Ждать, что каждое свойство наследуется как color — многие нет
  • Сразу прыгать к длинным hex до того, как именованные цвета стали привычными
  • Игнорировать контраст (бледно-серый на белом) — красиво, но нечитаемо

Кратко

  • color задаёт цвет текста переднего плана
  • Именованных цветов (teal, navy, maroon, …) хватает для старта
  • Дети наследуют color, пока не переопределят
  • currentColor повторно использует вычисленный цвет текста для рамок и близких свойств
  • Глубокие форматы (hex, rgb, hsl) — в значениях цвета; фоны — в следующих уроках
  • Практикуйтесь с заголовком / lead / note, пока свойство не станет автоматическим

🧠 Проверьте Свои Знания

Готов к Началу

Проверьте Свои Знания

Бросьте себе вызов с помощью этой интерактивной викторины и узнайте, насколько хорошо вы понимаете тему

❓
8
Вопросы
🎯
70%
Для Прохождения
♾️
∞
Время
🔄
∞
Попытки

📝 Инструкции

  • Внимательно прочитайте каждый вопрос
  • Выберите лучший ответ на каждый вопрос
  • Вы можете пересдавать тест столько раз, сколько захотите
  • Ваш прогресс будет показан вверху
Тема 1 из 1
Css Урок