CSS (Cascading Style Sheets — каскадные таблицы стилей) — это язык описания внешнего вида HTML-документов. HTML создаёт структуру страницы, CSS управляет её оформлением: цветами, шрифтами, отступами, расположением элементов и анимациями.
- Что такое CSS и зачем он нужен
- CSS расшифровка: что означает аббревиатура
- Синтаксис CSS — анатомия правила
- Три способа добавить CSS в HTML
- 1. Внешний файл — рекомендуемый способ
- 2. Тег <style> внутри HTML
- 3. Инлайн-стиль — атрибут style=»»
- Каскад — как CSS решает конфликты стилей
- Наследование в CSS
- Версии CSS: от CSS1 до современного CSS
- С чего начать изучение CSS — план для новичков
- Часто задаваемые вопросы
- CSS — это язык программирования?
- Нужно ли знать HTML перед изучением CSS?
- Нужно ли учить CSS если есть Bootstrap или Tailwind?
Что такое CSS и зачем он нужен
Представь сайт как дом. HTML — это кирпичи, балки, стены и перекрытия — структура. CSS — это отделка: цвет стен, форма мебели, расположение окон. Без CSS браузер отображает страницу как простой текстовый документ без какого-либо оформления.
Посмотри на разницу. Один и тот же HTML-код — без CSS и с CSS:
<!-- HTML без CSS: просто текст -->
<h1>Кулинарный блог</h1>
<p>Лучшие рецепты для всей семьи</p>
<button>Читать рецепты</button>/* Добавляем CSS — та же структура, но теперь выглядит как сайт */
body {
font-family: 'Inter', Arial, sans-serif;
background: #f9fafb;
color: #111827;
}
h1 {
font-size: 2.5rem;
font-weight: 800;
color: #1d4ed8;
margin-bottom: 0.5rem;
}
p {
font-size: 1.1rem;
color: #6b7280;
margin-bottom: 1.5rem;
}
button {
background: #2563eb;
color: white;
padding: 12px 28px;
border: none;
border-radius: 8px;
font-size: 1rem;
cursor: pointer;
}
CSS расшифровка: что означает аббревиатура
CSS расшифровывается как Cascading Style Sheets — «каскадные таблицы стилей». Каждое слово несёт смысл:
- Cascading (каскадные) — стили применяются в порядке приоритета, «каскадом». Если несколько правил задают один и тот же стиль — побеждает более специфичное или более позднее.
- Style (стиль) — определяет внешний вид: цвет, шрифт, размер, отступы, расположение.
- Sheets (таблицы) — набор правил, организованных в файл (или блок внутри HTML).
Синтаксис CSS — анатомия правила
CSS состоит из правил. Каждое правило включает селектор и блок объявлений. Разберём на примере:
/*
┌── СЕЛЕКТОР: к какому HTML элементу применяем стиль
│
h1 {
color: #2563eb ;
│ │ └── точка с запятой — завершает объявление
│ └── ЗНАЧЕНИЕ
└── СВОЙСТВО
}
*/
/* Реальный пример */
p {
color: #374151; /* цвет текста */
font-size: 1rem; /* размер шрифта */
line-height: 1.7; /* межстрочный интервал */
margin-bottom: 1rem; /* отступ снизу */
}
Правила могут объединяться через запятую — тогда стили применятся ко всем перечисленным элементам сразу:
/* Одинаковый стиль для нескольких элементов */
h1, h2, h3, h4, h5, h6 {
font-weight: 700;
line-height: 1.2;
color: #111827;
}Три способа добавить CSS в HTML
CSS можно подключить к HTML-странице тремя разными способами. У каждого — своё назначение.
1. Внешний файл — рекомендуемый способ
<!-- index.html -->
<head>
<link rel="stylesheet" href="styles.css">
</head>/* styles.css */
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
h1 { color: #2563eb; }Преимущества: файл кэшируется браузером, один файл стилей — для всех страниц сайта, код структурирован и легко поддерживается.
2. Тег <style> внутри HTML
<head>
<style>
body { background: #f5f5f5; }
h1 { color: #333; font-size: 2rem; }
</style>
</head>Удобно для: одностраничных HTML-файлов, прототипов, email-вёрстки. Для многостраничных сайтов — не рекомендуется (стили нельзя переиспользовать).
3. Инлайн-стиль — атрибут style=»»
<p style="color: red; font-size: 18px; margin: 0;">Текст</p>
<div style="background: yellow; padding: 10px;">Блок</div>Используй инлайн-стили только для динамических изменений через JavaScript. В обычной вёрстке — избегай: они сложны в поддержке и имеют слишком высокую специфичность.
| Способ | Применение | Переиспользование | Рекомендация |
|---|---|---|---|
| Внешний файл | Любые проекты | Да | ✅ Всегда |
| Тег <style> | Один файл, email | Нет | 🟡 Иногда |
| Инлайн style=»» | JS-манипуляции | Нет | ❌ Редко |
Каскад — как CSS решает конфликты стилей
Слово «каскадные» в названии CSS — ключевое. Когда несколько правил задают один и тот же стиль для одного элемента, браузер применяет правило с наибольшим приоритетом.
/* Правило 1: все параграфы — синие */
p { color: blue; }
/* Правило 2: параграфы с классом .warning — красные */
/* Класс (.warning) имеет более высокую специфичность, чем тег (p) */
.warning { color: red; }
/* Правило 3: ID — ещё выше приоритет */
#important { color: green; }
/* Порядок приоритета (от низшего к высшему): */
/* 1. Стили браузера по умолчанию (user agent styles) */
/* 2. Внешний CSS файл */
/* 3. Внутренний тег <style> */
/* 4. Инлайн атрибут style="" */
/* 5. !important (перебивает всё) */
Наследование в CSS
Многие CSS свойства наследуются от родительского элемента к дочерним. Это очень удобно: задал шрифт и цвет для body — все элементы внутри автоматически их унаследуют.
/* Задаём шрифт и цвет один раз для body */
body {
font-family: 'Inter', Arial, sans-serif;
color: #333;
font-size: 16px;
line-height: 1.6;
}
/* Не нужно повторять для каждого элемента:
<p>, <span>, <a>, <li>, <h2>...
— они автоматически наследуют шрифт и цвет */
/* Наследуются: color, font-*, line-height, text-*, list-style */
/* НЕ наследуются: margin, padding, border, width, height, background */
Версии CSS: от CSS1 до современного CSS
CSS разрабатывается организацией W3C с 1994 года. В отличие от HTML, CSS не имеет единого номера версии — он развивается по отдельным модулям.
- CSS1 (1996) — базовые стили: шрифты, цвета, классы, ID
- CSS2 (1998) — позиционирование, z-index, медиатипы
- CSS3 (2011+) — модульная структура: flexbox, grid, анимации, переменные, медиазапросы
- CSS 2024–2025 — :has(), oklch цвета, container queries, nesting
Когда говорят «CSS» — обычно имеют в виду современный CSS3 и более новые возможности. Учить CSS нужно начиная с базовых концепций (синтаксис, селекторы, блочная модель) и постепенно переходя к flexbox, grid и анимациям.
С чего начать изучение CSS — план для новичков
- Основы: синтаксис, селекторы, каскад, блочная модель (margin/padding/border)
- Цвета и типографика: цвета (HEX/RGB), шрифты, font-size, line-height
- Позиционирование: display, position, overflow
- Современная раскладка: Flexbox → CSS Grid
- Адаптивность: медиазапросы (@media), mobile-first подход
- Анимации: transition, animation, transform
- Продвинутое: CSS переменные, псевдоклассы, ::before/::after
Часто задаваемые вопросы
CSS — это язык программирования?
Нет. CSS — это язык описания представления (style sheet language), а не язык программирования. В CSS нет переменных (в традиционном смысле), циклов или условий. CSS просто описывает, как HTML-элементы должны выглядеть. Однако CSS custom properties (переменные) и новые возможности вроде @layer значительно приблизили его к программированию.
Нужно ли знать HTML перед изучением CSS?
Да, обязательно. CSS стилизует HTML-элементы — без понимания HTML (теги, классы, вложенность) изучение CSS будет бессмысленным. Рекомендуется сначала освоить базовый HTML: теги структуры, текстовые теги, ссылки, изображения, формы — и только потом переходить к CSS.
Нужно ли учить CSS если есть Bootstrap или Tailwind?
Да. Bootstrap и Tailwind CSS — это надстройки поверх CSS, которые ускоряют вёрстку. Но когда что-то не работает как ожидается, или нужно выйти за рамки фреймворка — без понимания базового CSS не обойтись. Фреймворки не отменяют CSS, они лишь автоматизируют часть работы.
