CSS: что это такое, расшифровка и как работает язык стилей

В 1994 году норвежский программист Хокон Виум Ли работал в CERN и наблюдал за тем, как первые веб-сайты выглядят одинаково ужасно: чёрный текст на белом фоне, одинаковые шрифты, никакого оформления. HTML давал структуру, но не внешний вид. Ли предложил идею отдельного языка для описания презентации — CSS. Через три недели концепция была готова. Прошло больше тридцати лет, и CSS превратился в мощный инструмент, без которого невозможно представить современный веб.

Что такое CSS и расшифровка аббревиатуры

Расшифровка: Cascading Style Sheets — каскадные таблицы стилей. Три слова, три ключевые идеи.

• Cascading (каскадные) — стили наследуются и накладываются друг на друга по определённым правилам приоритета. Если несколько правил применяются к одному элементу — выигрывает то, что специфичнее или стоит позже в коде. Именно эта «каскадность» — и мощь CSS, и источник путаницы для новичков.
• Style (стилей) — язык описывает визуальное оформление: цвета, шрифты, отступы, размеры, анимации, расположение элементов на странице.
• Sheets (таблицы) — правила оформления записываются в виде таблиц (наборов правил), которые можно хранить в отдельных файлах и применять к множеству HTML-страниц.

Стили это язык описания внешнего вида веб-страниц. Не язык программирования — в нём нет условий, циклов и переменных в классическом смысле (хотя в современном CSS3 появились переменные и вычисления). CSS — декларативный язык: вы описываете что должно выглядеть как, а браузер сам разбирается как это отрисовать.

Зачем нужен CSS: HTML без CSS

Без CSS веб-страница — это структурированный текст без оформления: чёрные буквы, белый фон, синие подчёркнутые ссылки, шрифт Times New Roman. Заголовки отличаются от текста только размером. Никаких цветных кнопок, боковых панелей, анимаций, адаптивных сеток.

• HTML отвечает на вопрос «что»: вот заголовок, вот абзац, вот кнопка, вот список.
• CSS отвечает на вопрос «как выглядит»: заголовок синий и размером 32 пикселя, кнопка красная с закруглёнными углами, список без маркеров с отступами.

Разделение структуры и оформления — фундаментальный принцип веб-разработки.

Как работает CSS: синтаксис и основные понятия

CSS-правило состоит из двух частей: селектора и блока объявлений.

селектор {
  свойство: значение;
  свойство: значение;
}

Пример:

h1 {
  color: #333333;
  font-size: 32px;
  font-weight: bold;
  margin-bottom: 16px;
}

Селектор — указывает на какой HTML-элемент применяется правило. Основные виды:

• тег (h1, p, div),
• класс (.button, .header),
• идентификатор (#main, #sidebar),
• атрибут ([type="text"]),
• псевдоклассы (:hover, :first-child).

Свойство — что именно изменяем:

• color (цвет текста),
• background-color (фон),
• font-size (размер шрифта),
• margin (внешний отступ),
• padding (внутренний отступ),
• display (способ отображения),
• width, height и сотни других.

Значение — конкретная величина:

• цвет в HEX (#ff0000), RGB (rgb(255,0,0)) или названием (red);
• размер в пикселях (16px), процентах (50%), em (1.5em), rem, vw, vh;
• ключевые слова (flex, none, auto, bold).

Каскад и специфичность: как CSS выбирает правило

Когда несколько CSS-правил претендуют на один элемент — вид стиля определяет победителя по трём критериям в порядке убывания важности.

• Важность (!important). Правило с !important перебивает всё остальное. Мощный инструмент и одновременно — антипаттерн. Злоупотребление !important — признак плохо структурированного файла стилей.
• Специфичность. Считается по трёхзначной системе. Инлайн-стиль (1,0,0,0) > ID-селектор (0,1,0,0) > класс/атрибут/псевдокласс (0,0,1,0) > тег/псевдоэлемент (0,0,0,1). Побеждает правило с большим «весом».

/* Специфичность 0,0,0,1 — тег */
p { color: black; }

/* Специфичность 0,0,1,0 — класс */
.intro { color: blue; }

/* Специфичность 0,1,0,0 — ID */
#main { color: red; }

/* Для элемента <p class="intro" id="main"> применится color: red */

• Порядок в коде. При равной специфичности побеждает правило, стоящее позже в файле стилей.

Основные свойства CSS: что нужно знать в первую очередь

Типографика:

• font-family (гарнитура шрифта),
• font-size (размер),
• font-weight (жирность: normal, bold, 100–900),
• line-height (межстрочный интервал),
• text-align (выравнивание),
• color (цвет текста).

Блочная модель (Box Model):

• каждый HTML-элемент — прямоугольник.
• Внутри — контент.
• Вокруг контента — padding (внутренний отступ).
• Затем — border (рамка).
• Снаружи — margin (внешний отступ).

Понимание Box Model критично для вёрстки.

Отображение и позиционирование:

• display (block, inline, flex, grid, none),
• position (static, relative, absolute, fixed, sticky),
• z-index (порядок наложения),
• float (обтекание — устаревший метод),
• overflow (поведение при переполнении).

Flexbox и Grid: современные системы раскладки.

• Flexbox — одномерная (строка или столбец): идеально для навигации, карточек в ряд, центрирования элементов.
• Grid — двумерная (строки и столбцы): для сложных макетов страниц.

Эти два инструмента заменили большинство старых трюков с float и позиционированием.

CSS3: что добавилось в третьей версии

CSS3 — не отдельный «язык», а набор модулей, расширяющих возможности CSS. Разработка велась модульно с 2000-х годов, отдельные модули принимались независимо друг от друга. Сегодня де-факто стандарт, поддерживаемый всеми современными браузерами.

Ключевые возможности, которых не было раньше:

• Скруглённые углы: border-radius: 8px — раньше для этого нужны были изображения.
• Тени: box-shadow и text-shadow — тени для блоков и текста без картинок.
• Градиенты: background: linear-gradient(to right, #ff0000, #0000ff) — плавные переходы цвета через CSS.
• Анимации и переходы: transition (плавное изменение свойств) и animation (ключевые кадры). Анимированные интерфейсы без JavaScript.
• Переменные (Custom Properties): --color-primary: #0066cc — переиспользуемые значения, которые можно менять в одном месте.
• Медиазапросы: @media (max-width: 768px) { ... } — адаптивная вёрстка под разные размеры экранов. Основа всего responsive web design.
• Flexbox и Grid — появились именно в CSS3 и полностью изменили подход к вёрстке макетов.

CSS-стили: инлайн, внутренние и внешние

CSS можно применять тремя способами.

• Внешний файл (рекомендуется): отдельный .css файл, подключённый через <link> в <head>. Один файл — для всего сайта. Изменение в одном месте меняет внешний вид везде.
• Внутренние стили: тег <style> внутри <head>. Подходит для одностраничных документов и email-рассылок.
• Инлайн-стили: атрибут style прямо в HTML-теге. Максимальная специфичность, но минимальная поддерживаемость. Использовать только как исключение.

CSS — один из трёх фундаментальных языков веба наряду с HTML и JavaScript. HTML создаёт структуру, JavaScript добавляет логику, CSS делает всё это красивым и удобным. За тридцать лет  прошёл путь от простого списка свойств шрифта до мощного языка с анимациями, сетками, переменными и медиазапросами. Веб без CSS — это 1993 год. Хороший CSS — это то, что пользователь не замечает, потому что всё выглядит именно так, как должно.