Что такое CSS

CSS (Cascading Style Sheets) — язык стилей, который описывает внешний вид HTML-документа: цвета, шрифты, отступы, расположение элементов на странице.

Зачем нужно

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

Где используется

  • Стилизация веб-страниц и веб-приложений
  • Адаптивная вёрстка для разных устройств (мобильные, планшеты, десктоп)
  • Создание анимаций и переходов
  • Стилизация email-рассылок
  • Генерация PDF через print-стили
  • Оформление SVG-графики

Предпосылки

  • _MOC HTML — базовая структура документа

Краткая история CSS

Год Версия Что нового
1996 CSS 1 Базовые свойства: шрифты, цвета, отступы
1998 CSS 2 Позиционирование, z-index, media types
2011+ CSS 3 Модульная система, анимации, flexbox, grid
Сейчас CSS 4+ Отдельные модули развиваются независимо

С CSS 3 спецификация разбита на модули, каждый из которых развивается отдельно. Поэтому «CSS4» как единой версии не существует — есть Selectors Level 4, Colors Level 4 и т.д.

Как работает CSS

Браузер разбирает CSS в несколько шагов:

  1. Парсинг HTML — строится DOM (Document Object Model)
  2. Парсинг CSS — строится CSSOM (CSS Object Model)
  3. Объединение — DOM + CSSOM = Render Tree
  4. Layout — вычисление размеров и позиций
  5. Paint — отрисовка пикселей на экране
  6. Composite — наложение слоёв

Базовый синтаксис

/* CSS-правило */
селектор {
  свойство: значение;
  свойство: значение;
}

Пример:

/* Все параграфы — синие, с отступом снизу */
p {
  color: blue;
  margin-bottom: 16px;
}

/* Элемент с классом .card — белый фон, тень */
.card {
  background-color: white;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 8px;
  padding: 20px;
}

Комментарии

/* Это однострочный комментарий */

/*
  Это многострочный
  комментарий
*/

Что CSS НЕ может

  • Изменять структуру DOM (для этого нужен JavaScript)
  • Выполнять вычисления с логикой (условия, циклы) — только ограниченные функции вроде calc
  • Отправлять запросы на сервер

Частые ошибки

  1. Забытая точка с запятой — следующее свойство не применится:
    /* ОШИБКА */
p {
  color: red    /* <-- нет ; */
  font-size: 16px; /* не применится */
}
  2. Путаница с единицами — px, em, rem ведут себя по-разному
  3. Попытка стилизовать псевдоэлементы как обычные элементы — ::before и ::after требуют свойства content
  4. Открытый комментарий — незакрытый /* сломает все стили ниже

Практика

  • Создать HTML-файл и подключить к нему CSS
  • Написать 5 CSS-правил для разных селекторов
  • Изменить цвет, шрифт и отступы элементов
  • Открыть DevTools (F12) и найти вкладку Styles
  • Изменить стили через DevTools в реальном времени

Связанные темы

Ресурсы