Занятие 13
Введение в CSS

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

👀

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

👗

CSS — гардероб страницы

HTML — что на странице.

CSS — как это выглядит:

🎨 цвета · 🔤 шрифты · 📏 размеры · 📦 отступы · 🧭 расположение

Один HTML + разный CSS = разные сайты.

🔬

Анатомия CSS-правила

h1 — селектор: кого?
color — свойство: что меняем?
tomato — значение: на что?
: между ними, ; в конце

<h1>Привет, CSS!</h1>

h1 {
  color: tomato;
  background-color: lightyellow;
}

🔌

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

🥇 Внешний файл — для всего сайта
<link rel="stylesheet" href="style.css">
🥈 <style> в head — одна страница
🥉 style="…" у тега — только для проверок

🎯

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

p — все абзацы
body — вся страница
h1, h2 — несколько сразу, через запятую

<h1>Заголовок</h1>
<h2>Подзаголовок</h2>
<p>Первый абзац</p>
<p>Второй абзац</p>

body { background-color: #fff8e7; }
h1, h2 { color: #6c5ce7; }
p { color: #636e72; }

🌈

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

Имя: tomato, gold
HEX: #ff6b35 — красный · зелёный · синий
RGB: rgb(255, 107, 53)
С прозрачностью: rgba(0, 0, 0, 0.5)

<p class="a">tomato</p>
<p class="b">#6c5ce7</p>
<p class="c">rgb(0, 184, 148)</p>

p { padding: 8px; color: white; font-size: 22px; }
.a { background-color: tomato; }
.b { background-color: #6c5ce7; }
.c { background-color: rgb(0, 184, 148); }

🔴🟢🔵

Секрет HEX-кода

#ff0000 — только красный = 🔴

#00ff00 — только зелёный = 🟢

#0000ff — только синий = 🔵

#000000 — ничего = ⚫ · #ffffff — всё = ⚪

Экран смешивает свет трёх цветов.

🐞

Почему CSS не работает?

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

h1 (
  color tomato;
  background-color: ffeaa7
  colr: red;
)

🃏

Запомни!

<link rel="stylesheet" href="style.css">Подключить внешний CSS
селектор { свойство: значение; }CSS-правило
colorЦвет текста
background-colorЦвет фона
#ff6b35HEX-цвет
/* */Комментарий в CSS

⌨️

Практика: Раскрашиваем страницу

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

🚀 Со звёздочкой: Подбери гармоничную палитру из 3–4 цветов на сайте-генераторе палитр и примени её к странице.

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

🪞

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

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

✨ По желанию: Выбери 3 цвета для своего будущего сайта и запиши их HEX-коды.

Занятие 13Введение в CSS

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

Занятие 13
Введение в CSS