CSS — язык стилей для веб-страниц¶

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

¶История

Идея отделить оформление документа от его содержания возникла в начале 1990-х годов, когда веб-страницы оформлялись с помощью неуклюжих конструкций вроде <font> и <center>. Первую спецификацию CSS предложил в 1994 году Хакон Виум Ли, сотрудник Норвежского вычислительного центра. В 1996 году W3C опубликовал рекомендацию CSS Level 1, а в 1998 году — CSS Level 2. Стандарт CSS2.1, выпущенный в 2005 году, стал фактическим базисом для браузеров на многие годы.

Следующее поколение — CSS3 — не выпускалось как единый документ: спецификация разбилась на независимые модули (цвета, селекторы, анимации, гибкая раскладка и другие), что позволило внедрять их постепенно.

¶Основные принципы

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

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

¶Селекторы

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

``css h1 { color: navy; font-size: 2rem; } ``

Селекторы бывают простыми (по тегу, классу .block, идентификатору #header), комбинированными (потомок div p, сосед h2 + p) и псевдоклассами (:hover, :first-child). Псевдоэлементы (::before, ::after) позволяют добавлять декоративные узлы без изменения HTML.

¶Блочная модель

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

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

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

• Внешний файл — <link rel="stylesheet" href="style.css">. Наиболее распространённый вариант: стили кешируются и применяются ко всем страницам сайта.
• Внутренняя таблица — блок <style> в <head> документа.
• Инлайн-стили — атрибут style у конкретного элемента. Имеют наивысший приоритет, но считаются антипаттерном при массовом использовании.

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

Чтобы упростить написание больших таблиц стилей, используют препроцессоры — Sass, Less, Stylus — расширяющие CSS переменными, вложенными правилами и миксинами. Существуют и постпроцессоры (Autoprefixer), добавляющие вендорные префиксы автоматически. Для организации кода применяются методологии BEM, OOCSS, SMACSS и другие, задающие единые правила именования классов.

¶Критика и ограничения

CSS не является полноценным языком программирования: в нём нет переменных в привычном смысле (до появления кастомных свойств), циклов и условной логики. Сложные вычисления и динамическое поведение вынуждены реализоваться на JavaScript. Также критикуется избыточная каскадность — на больших проектах приоритеты правил становятся труднопредсказуемыми, что породило тенденцию к упрощению: утилитарные классы (Tailwind CSS) и изоляция стилей через Shadow DOM.

¶Применение

CSS применяется не только в браузерах: на его основе построены стили для электронной почты (ограниченный подмножество возможностей), документов в форматах EPUB, а также интерфейсы нативных приложений с использованием веб-технологий (Electron, React Native). Спецификация CSS Color Level 4 и модуль CSS Images расширяют возможности описания визуальных эффектов.

Источники:

• W3C. Cascading Style Sheets (CSS) Home Page
• Хакон Виум Ли. «Cascading Style Sheets: Designing for the Web»
• Дэвид Макдональд. «The CSS Anthology»
• MDN Web Docs. CSS — Cascading Style Sheets
• «HTML5 и CSS3. Разработка современных веб-сайтов», Б. Лауэр