CSS — язык описания внешнего вида¶

CSS (англ. Cascading Style Sheets — «каскадные таблицы стилей») — формальный язык описания внешнего вида документа, написанного с использованием языка разметки. Чаще всего применяется совместно с HTML и XHTML для оформления веб-страниц, но может использоваться и с другими языками разметки, например XML, SVG или XUL. CSS определяет, как именно элементы документа должны отображаться на экране, в печати или при выводе на другие устройства.

¶Назначение и принцип работы

Основная идея CSS — разделение содержания документа и его представления. HTML-разметка описывает структуру и смысл содержимого (заголовки, абзацы, списки, ссылки), тогда как CSS отвечает за визуальное оформление: цвета, шрифты, отступы, расположение блоков. Такое разделение упрощает поддержку сайтов: изменение одного файла стилей может изменить оформление тысяч страниц одновременно.

Слово «каскадные» в названии отражает механизм разрешения конфликтов, когда к одному элементу применяется несколько правил. Приоритет определяется каскадом, специфичностью селекторов и порядком объявления. Правило, объявленное позже или обладающее большей специфичностью, переопределяет более слабое.

¶История

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

Первая спецификация CSS1 была опубликована консорциумом W3C в декабре 1996 года. Она включала базовые возможности: шрифты, цвета, выравнивание текста, отступы и границы. В 1998 году появилась CSS2, добавившая позиционирование, медиатипы и поддержку таблиц стилей для разных устройств. Спецификация CSS3, работа над которой началась в конце 1990-х, была разбита на отдельные модули, что позволило развивать функции независимо друг от друга.

¶Синтаксис

Правило CSS состоит из селектора и блока объявлений:

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

Селектор указывает, к каким элементам применяется правило. Блок объявлений заключается в фигурные скобки и содержит пары «свойство — значение», разделённые точкой с запятой.

Основные типы селекторов:

• по тегу — p, h1;
• по классу — .menu;
• по идентификатору — #header;
• по атрибуту — [type="text"];
• псевдоклассы и псевдоэлементы — :hover, ::before;
• комбинированные — .menu li a.

¶Способы подключения

CSS может быть связан с документом тремя способами:

Внешние таблицы стилей считаются предпочтительными, поскольку позволяют кэшировать оформление и повторно использовать его на множестве страниц.

¶Каскад и наследование

Каскад определяет порядок применения правил. Учитываются три фактора: важность объявления (в том числе директива !important), специфичность селектора и порядок появления в коде. Специфичность вычисляется по количеству идентификаторов, классов и тегов в селекторе.

Наследование означает, что некоторые свойства (например, color или font-family) передаются от родительского элемента дочерним автоматически, тогда как другие (например, margin или border) — нет.

¶Модель блока

Каждый элемент в CSS рассматривается как прямоугольный блок, состоящий из содержимого, внутренних отступов (padding), границы (border) и внешних отступов (margin). Свойство box-sizing позволяет изменить способ расчёта размеров, что важно при вёрстке.

¶Современные возможности

CSS3 и последующие модули существенно расширили инструментарий разработчиков:

• Flexbox — одномерная раскладка элементов;
• Grid — двумерная сетка;
• медиазапросы — адаптация оформления под размер экрана;
• анимации и переходы (transition, animation);
• переменные (--имя);
• функции calc(), clamp(), min(), max().

Эти средства сделали возможной адаптивную вёрстку, при которой один и тот же сайт корректно отображается на компьютерах, планшетах и смартфонах.

¶Препроцессоры и методологии

Для упрощения работы с крупными проектами применяются препроцессоры — Sass, Less, Stylus, — добавляющие переменные, вложенность и миксины с последующей компиляцией в обычный CSS. Распространены методологии организации стилей: БЭМ, OOCSS, SMACSS, а также утилитарные фреймворки вроде Bootstrap и Tailwind.

¶Значение

CSS является одной из базовых технологий Всемирной паутины наряду с HTML и JavaScript. Без него современный веб был бы лишён единообразного оформления и адаптивности. Стандартизацией языка занимается консорциум W3C, а актуальные спецификации поддерживаются всеми основными браузерами.

¶Источники

• Спецификации W3C по CSS
• Документация MDN Web Docs
• Хокон Виум Ли. «Cascading HTML Style Sheets»
• Учебные материалы по веб-разработке