Войти Регистрация
🔒 Ты не вошёл(вошла) в аккаунт — прогресс, работы и результаты теста не сохраняются. Что недоступно?

✅ Без входа можно

  • читать все 33 занятия, смотреть слайды и шпаргалку;
  • пробовать код в редакторе и песочнице.

⛔ Без входа нельзя

  • сохранять работы — черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве;
  • отмечать пройденные занятия и видеть свой прогресс;
  • выбрать тему итогового проекта и отмечать чек-лист;
  • отправить итоговый тест и сохранить результат.
Зарегистрироваться бесплатно У меня есть аккаунт
Модуль 2. CSS и оформление Занятие 13

Введение в CSS

Сегодня наша чёрно-белая страница станет цветной: мы подключим CSS и раскрасим фон, заголовки и текст.

Изучаем: Способы подключения CSS, селекторы тегов, цвет
Результат: Раскрашиваем страницу

🎬 Слайды для урока Листай стрелками ← →, F — весь экран, N — подсказки

👀 Сегодня сделаем вот такое

Показать код примера 
<h1>Цветная страница</h1>
<h2>Мои любимые цвета</h2>
<p>Оранжевый — цвет энергии, синий — цвет спокойствия.</p>
<ul>
  <li>Оранжевый</li>
  <li>Синий</li>
</ul>
body {
  background-color: #fff8e7;
}
h1 {
  color: #ff6b35;
}
h2 {
  color: rgb(46, 134, 222);
}
p {
  color: #444;
}
ul {
  background-color: #e3f2fd;
}

💡 Объяснение

Что умеет CSS

До сих пор наши страницы были чёрно-белыми и «скучными». HTML отвечал за содержание, а внешний вид браузер придумывал сам. CSS (Cascading Style Sheets — каскадные таблицы стилей) позволяет управлять всем, что видно глазами: цветом, шрифтами, размерами, отступами, расположением блоков, тенями, даже анимацией.

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

Как устроено CSS-правило

h1 {
  color: tomato;
  background-color: lightyellow;
}
  • h1 — селектор. Отвечает на вопрос «кого оформляем?». Здесь — все заголовки h1.
  • { } — фигурные скобки, внутри них блок объявлений.
  • color — свойство: «что меняем?» (цвет текста).
  • tomato — значение: «на что меняем?».
  • Между свойством и значением — двоеточие, в конце объявления — точка с запятой.

Точку с запятой легко забыть, и тогда следующее свойство «сломается». Возьми в привычку ставить её всегда, даже после последнего свойства.

Селекторы тегов

Самый простой селектор — имя тега без угловых скобок: p, h2, ul, body. Такое правило применяется ко всем элементам этого типа на странице. Если нужно оформить несколько тегов одинаково, их перечисляют через запятую: h1, h2, h3 { color: navy; }.

Три способа подключить CSS

  1. Внешний файл — лучший способ. Стили пишут в отдельном файле style.css, а в head страницы добавляют ссылку на него: 
    <link rel="stylesheet" href="style.css">
    Плюсы: один файл стилей подключается ко всем страницам сайта. Поменял цвет в одном месте — поменялся на всём сайте.
  2. Тег <style> внутри head: 
    <style>
  h1 { color: tomato; }
</style>
    Работает только для одной страницы.
  3. Атрибут style прямо у тега: <p style="color: red">. Удобно для быстрой проверки, но в проектах так делать не надо: стили разбросаны по всему коду, и их трудно менять.

Во встроенном редакторе на нашем сайте вкладка «CSS» работает как внешний файл — пиши туда правила без тега style.

Как задать цвет

  • Название: red, tomato, skyblue, gold — в CSS около 140 цветов с именами. Просто, но выбор ограничен.
  • HEX-код: #ff6b35. После решётки — три пары символов: сколько красного, зелёного и синего. Каждая пара от 00 (нет) до ff (максимум). #000000 — чёрный, #ffffff — белый, #ff0000 — красный.
  • RGB: rgb(255, 107, 53) — то же самое, но числами от 0 до 255.
  • RGBA: rgba(0, 0, 0, 0.5) — четвёртое число — прозрачность от 0 (невидимый) до 1 (сплошной).

Экран смешивает цвета из красного, зелёного и синего света — поэтому все цветовые коды построены на этих трёх цветах. Подбирать коды удобно в «пипетке» VS Code (наведи на цвет в CSS) или в онлайн-генераторах палитр.

Основные свойства сегодняшнего урока

  • color — цвет текста;
  • background-color — цвет фона элемента.

Цвет, заданный для body, получит вся страница. Это называется наследованием — подробнее на занятии 16.

Как подобрать цвета, чтобы было красиво

  • Используй 2–3 основных цвета, не больше.
  • Тёмный текст на светлом фоне (или наоборот) — чтобы легко читать. Жёлтый текст на белом фоне не прочитает никто.
  • Яркий цвет — для главного: заголовка, кнопки.

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

  • Пропущена точка с запятой или двоеточие.
  • Скобки круглые ( ) вместо фигурных { }.
  • Решётка забыта: color: ff6b35;.
  • Файл стилей не подключён или путь в href неверный — стили «не работают» совсем.
  • Написано colour или colr — браузер молча игнорирует неизвестные свойства.

Проверь себя

  1. Назови части правила p { color: gray; }.
  2. Почему внешний CSS-файл лучше атрибута style?
  3. Какой цвет получится: #00ff00?

⌨️ Практика

  1. Задай body светлый цвет фона.
  2. Сделай заголовки h1 и h2 разного цвета.
  3. Поменяй цвет абзацев на тёмно-серый.
  4. Сделай фон у списка другим цветом.
  5. В VS Code создай style.css и подключи его к странице увлечений.

🧪 Редактор

🔒 Работа не сохраняется на сайте. Черновик живёт только в этом браузере и пропадёт при очистке истории, в режиме инкогнито или на другом устройстве. Зарегистрируйся или войди, чтобы сохранить работу в «Мои работы».

Результат обновляется сам. Tab — отступ, Esc затем Tab — выйти из поля.

🪞 Рефлексия

  • Что нового я сегодня узнал(а)?
  • Что получилось лучше всего?
  • Где было трудно и что поможет в следующий раз?

🔒 Отметить занятие пройденным можно только после входа. Без аккаунта сайт не запомнит, до какого занятия ты дошёл(дошла). Регистрация · Вход