Каскадные таблицы стилей CSS
Одежда и макияж твоего сайта. Делаем HTML красивым.
Что такое CSS?
CSS (Cascading Style Sheets) — это язык оформления веб-страниц. Он отвечает за то, как выглядит сайт: цвета, шрифты, расположение блоков, анимации, отступы и многое другое.
Вернемся к аналогии с домом: если HTML — это каркас, то CSS — это отделка: обои на стенах, цвет пола, форма мебели. Один и тот же HTML-каркас может выглядеть совершенно по-разному с разными CSS-стилями.
📖 Интересный факт: CSS был создан в 1996 году норвежцем Хоконом Виумом Ли. До появления CSS дизайн сайтов делался прямо внутри HTML с помощью атрибута
bgcolor и тега <font>. Это было очень неудобно!
Синтаксис CSS
CSS состоит из правил. Каждое правило имеет селектор и блок объявлений:
селектор {
свойство1: значение1;
свойство2: значение2;
}
/* Пример */
p {
color: blue;
font-size: 16px;
text-align: center;
}
💡 Разбор примера:
p— селектор (выбирает все абзацы)color: blue;— свойство: значение (цвет текста → синий)font-size: 16px;— размер шрифта → 16 пикселейtext-align: center;— выравнивание текста → по центру
Основные типы селекторов
Селекторы говорят браузеру, к каким элементам применять стили:
| Тип селектора | Пример | Что делает |
|---|---|---|
| Селектор по тегу | p { } | Выбирает все элементы с тегом <p> |
| Селектор по классу | .my-class { } | Выбирает все элементы с классом class="my-class" |
| Селектор по ID | #my-id { } | Выбирает элемент с id id="my-id" (уникальный!) |
| Универсальный | * { } | Выбирает ВСЕ элементы на странице |
| Вложенный | div p { } | Выбирает <p> внутри <div> |
| Дочерний | div > p { } | Выбирает только прямых детей <p> внутри <div> |
| Псевдокласс | a:hover { } | Стили при наведении мыши |
<!-- HTML -->
<p>Обычный абзац</p>
<p class="special">Особый абзац</p>
<p id="unique">Уникальный абзац</p>
/* CSS */
p { color: gray; } /* все абзацы — серые */
.special { color: green; } /* только .special — зеленые */
#unique { color: red; } /* только #unique — красный */
🔥 Важно: ID должен быть уникальным на странице (один элемент с таким id). Классы можно использовать многократно. Для стилизации чаще используют классы!
Три способа подключить CSS
1. Встроенный стиль (inline)
Добавляется прямо в HTML-тег через атрибут style.
<p style="color: red;">Красный текст</p>
❌ Не рекомендуется для больших проектов — сложно поддерживать.
2. Внутренний стиль (internal)
Прописывается внутри тега <style> в разделе <head>.
<style> p { color: blue; } </style>
⚠️ Подходит для небольших страниц, но стили не переиспользуются.
3. Внешний стиль (external) — ЛУЧШИЙ!
CSS пишется в отдельном файле .css и подключается ссылкой.
<link rel="stylesheet" href="style.css">
✅ Рекомендуемый способ: один файл стилей для всего сайта.
Основные CSS-свойства
| Свойство | Что делает | Пример значения |
|---|---|---|
| 🎨 Цвета и фон | ||
color | Цвет текста | red, #3366ff, rgb(0,0,0) |
background-color | Фоновый цвет | #f5f5f5, rgba(0,0,0,0.5) |
background-image | Фоновое изображение | url('bg.jpg') |
| 📝 Шрифты и текст | ||
font-size | Размер шрифта | 16px, 1.5rem, 1.2em |
font-family | Шрифт текста | Arial, sans-serif |
font-weight | Жирность (bold/normal) | bold, 400, 700 |
text-align | Выравнивание текста | left, center, right, justify |
text-decoration | Подчеркивание/зачеркивание | underline, none |
line-height | Межстрочный интервал | 1.5, 24px |
| 📦 Отступы и размеры | ||
margin | Внешний отступ (от элемента до границы) | 10px, 20px auto |
padding | Внутренний отступ (от границы до контента) | 15px, 5px 10px |
width | Ширина элемента | 300px, 100%, 50vw |
height | Высота элемента | 200px, auto |
border | Рамка вокруг элемента | 1px solid black |
border-radius | Скругление углов | 10px, 50% (круг) |
| 📐 Позиционирование и расположение | ||
display | Тип отображения элемента | block, inline, flex, grid, none |
position | Тип позиционирования | static, relative, absolute, fixed |
| ✨ Эффекты и анимация | ||
opacity | Прозрачность (0 — невидим, 1 — полностью видим) | 0.5 |
box-shadow | Тень блока | 2px 2px 5px rgba(0,0,0,0.3) |
transition | Плавные переходы | all 0.3s ease |
transform | Трансформация (поворот, масштаб) | scale(1.1), rotate(10deg) |
Единицы измерения в CSS
| Единица | Описание | Пример |
|---|---|---|
px | Пиксели (абсолютная единица) | font-size: 16px; |
% | Проценты от родительского элемента | width: 50%; |
em | Относительно размера шрифта родителя | margin: 2em; |
rem | Относительно размера шрифта корня (<html>) | padding: 1rem; |
vw | 1% от ширины окна браузера | width: 50vw; |
vh | 1% от высоты окна браузера | height: 100vh; |
💎 Совет: Для отзывчивого дизайна используй
rem и проценты. Пиксели лучше оставить для границ и мелких деталей.
Flexbox — современный способ верстки
Flexbox позволяет легко выравнивать элементы по горизонтали и вертикали. Это настоящий прорыв в CSS!
.container {
display: flex; /* Включаем Flexbox */
justify-content: center; /* Выравнивание по горизонтали */
align-items: center; /* Выравнивание по вертикали */
gap: 20px; /* Расстояние между элементами */
flex-wrap: wrap; /* Перенос на новую строку */
}
🎯 Часто используемые свойства Flexbox:
justify-content— горизонтальное выравнивание:flex-start,center,space-between,space-aroundalign-items— вертикальное выравнивание:flex-start,center,stretchflex-direction— направление:row(по горизонтали),column(по вертикали)
CSS Grid — для сложных сеток
Grid позволяет создавать сложные сетки (как таблицы, но гибче). Идеален для создания галерей и макетов страниц.
.grid-container {
display: grid;
grid-template-columns: repeat(3, 1fr); /* 3 колонки равной ширины */
gap: 20px;
}
/* Адаптивная сетка */
.responsive-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}Адаптивный дизайн (Media Queries)
Медиа-запросы позволяют применять разные стили в зависимости от ширины экрана. Без них сайт будет плохо выглядеть на телефонах!
/* Для компьютеров */
.container {
width: 1200px;
}
/* Для планшетов (ширина меньше 768px) */
@media (max-width: 768px) {
.container {
width: 100%;
}
}
/* Для телефонов (ширина меньше 480px) */
@media (max-width: 480px) {
.menu {
flex-direction: column;
}
}
📱 Важно: Всегда добавляй метатег
<meta name="viewport" content="width=device-width, initial-scale=1.0"> в <head> — без него адаптивность не будет работать правильно!
Живой пример: ДО и ПОСЛЕ CSS
Без CSS
Это просто текст
Скучно, всё сливается, нет стиля.
С CSS
Это красивый текст
Цвета, отступы, скругления — живой и приятный дизайн!
/* CSS, который это делает */
.with-css-demo {
background: linear-gradient(135deg, #667eea20, #764ba220);
padding: 20px;
border-radius: 15px;
}
.demo-btn {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
border: none;
padding: 10px 20px;
border-radius: 25px;
transition: transform 0.3s ease;
}
.demo-btn:hover {
transform: scale(1.05);
}
🎨 Главные советы по CSS для начинающих:
- Используй внешний файл
.css— так код чище и легче поддерживать - Изучи Flexbox и Grid — они заменяют сложные костыли с float и таблицами
- Используй инструменты разработчика в браузере (F12) — там можно экспериментировать со стилями в реальном времени
- Давай классам осмысленные имена (не
.red-text, а.error-message) - Начинай с мобильной версии (Mobile First) — это современный стандарт