09. Цвета, шрифты и фон
Ты уже умеешь создавать HTML-страницы и подключать CSS. Теперь пришло время сделать сайт красивым, ярким и уникальным!
Цвета, шрифты и фон — это как краски, кисти и холст для художника. Они задают настроение всему сайту!
Как задаются цвета
Цвет в CSS можно указать тремя способами:- По названию: red, blue, green
- По коду: #ff0000, #00ff00, #0000ff
- По RGB: rgb(255, 0, 0) — тоже красный
body {
color: white; /* цвет текста */
background-color: #222; /* цвет фона */
}h1 {
color: gold;
}
p {
color: lightgreen;
}
Попробуй менять цвета и наблюдай, как всё меняется. Цвета с # — это шестизначные «коды», которые определяют оттенок.
Как выбрать красивую палитру
Хочешь, чтобы сайт выглядел как из игры или мультфильма? Выбери 2–3 основных цвета, которые будут сочетаться. Например:- Minecraft — зелёный, коричневый, серый
- Among Us — красный, чёрный, голубой
- Frozen — голубой, белый, серебристый
Шрифты — почерк твоего сайта
Шрифт показывает характер твоего сайта: игровой, весёлый, строгий или мультяшный.Пример:
body {
font-family: Arial, sans-serif;
}h1 {
font-family: 'Comic Sans MS', cursive;
}
Можно подключать шрифты из Google Fonts! Например:
<link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">body {
font-family: 'Press Start 2P', cursive;
}
Добавляем фон
Фон можно сделать любым цветом или даже картинкой.
body {
background-color: #1a1a1a;
background-image: url('stars.jpg');
background-repeat: no-repeat;
background-size: cover;
}
Параметр background-size: cover делает так, чтобы картинка заполняла весь экран.
Украшаем блоки
Часто на сайте есть прямоугольные карточки (div или section), которые можно оформить.
.card {
background: #333;
padding: 16px;
border-radius: 12px;
color: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.3);
}
Попробуй создать несколько таких карточек с описанием любимых героев, фильмов или игр.
Мини-проект: Сайт в стиле игры
Создай сайт, вдохновлённый любимой игрой! Например — Minecraft, Roblox, Brawl Stars или Genshin Impact.- Сделай фон, подходящий к стилю игры.
- Выбери цвета сайта в духе персонажей.
- Подключи подходящий шрифт (например, пиксельный или мультяшный).
- Добавь карточки с героями, названиями уровней или предметами.
Пример:
body {
background-color: #3a5e3a;
color: #fff;
font-family: 'Press Start 2P', cursive;
}.card {
background: #2f2f2f;
padding: 20px;
border-radius: 10px;
margin: 10px;
border: 2px solid #00ff00;
}
Теперь у тебя сайт будто из самой игры!
Забавный факт
CSS появился в 1996 году! А первый цвет, который добавили в браузер, был… gray (серый)!Главное запомни
- CSS отвечает за внешний вид сайта: цвета, шрифты, фон.
- Цвет можно задать по названию, HEX-коду (#) или через rgb().
- Шрифт задаётся через свойство font-family.
- Фон можно сделать цветным или картинкой с помощью background-image.
Мини-тест
- Как задать фон картинкой?
- Что делает свойство font-family?
- Какой шрифт подходит для игрового стиля?