🎨

Модуль 2. CSS и оформление

Занятие 16
Классы и id

Сегодня мы научимся красить не все абзацы сразу, а только нужные блоки — с помощью классов и id.

👀

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

🤔

Как покрасить не всё?

p { … } красит все абзацы.

А нам нужно выделить только предупреждение ⚠️

Дадим элементам имена: class и id.

👕

Класс — форма команды

  • HTML: class="note" — без точки
  • CSS: .note — с точкой
  • Можно дать многим элементам
<p class="note">Не забудь домашку</p>
<p>Обычный абзац</p>
<p class="note">Завтра выставка</p>
.note {
  background: #ffeaa7;
  padding: 12px;
  border-left: 6px solid #fdcb6e;
}
🏷🏷

Несколько классов сразу

class="note important"

  • Классы разделяются пробелом
  • Элемент получает стили обоих
<p class="note">Обычная заметка</p>
<p class="note important">Завтра контрольная!</p>
.note { background: #ffeaa7; padding: 12px; }
.important {
  border: 3px solid #d63031;
  font-weight: bold;
}
🪪

id — паспорт элемента

  • HTML: id="hero"
  • CSS: #hero — с решёткой
  • Только один на странице

Оформляем классами, id — для якорей и форм.

<div id="hero">Добро пожаловать!</div>
#hero {
  background: #6c5ce7;
  color: white;
  font-size: 28px;
  padding: 24px;
  text-align: center;
}
🃏

Каскад: кто сильнее?

  1. 🂦 тег < 👸 класс < 🂡 id < style=""
  2. Сила равна — побеждает тот, кто ниже

Какого цвета абзацы? 🤔

<p class="note">С классом note</p>
<p>Без класса</p>
p { color: black; }
.note { color: green; }
p { color: red; }
👨‍👩‍👧

Наследование

  • Дети получают от родителя шрифт и цвет текста
  • Не наследуются: рамка, отступы, фон

Шрифт и цвет пишем один раз — для body.

<section>
  <h2>Заголовок</h2>
  <p>Абзац внутри</p>
</section>
section {
  font-family: Georgia, serif;
  color: #0984e3;
  border: 3px solid #0984e3;
  padding: 10px;
}
🐞

Почему стили не применились?

Найди 3 ошибки.

<!-- HTML -->
<p class=".note">Заметка</p>
<div id="box">1</div>
<div id="box">2</div>

/* CSS */
note { background: yellow; }
🃏

Запомни!

  • .nameСелектор класса
  • #nameСелектор id
  • class="a b"Два класса сразу
  • .card pВсе p внутри .card
  • h1, h2Сразу несколько селекторов
  • id > класс > тегСила селекторов
⌨️

Практика: Стилизуем разные блоки

  1. Сделай три блока-заметки с классом note: жёлтый фон и отступы.
  2. Добавь одному из них второй класс important с красной рамкой.
  3. Задай id="hero" верхнему баннеру и оформи его.
  4. Проверь наследование: поменяй цвет у body и посмотри на абзацы.

🚀 Со звёздочкой: Попробуй CSS-переменные: задай :root { --main: #6c5ce7; } и используй color: var(--main); в нескольких местах.

🔒 Без входа в аккаунт работу из практики нельзя сохранить на сайте, а занятие — отметить пройденным.

🪞

Подведём итоги

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

✨ По желанию: Придумай названия классов для частей своего будущего сайта (шапка, карточка, кнопка).