Перейти к основному содержимому

3.10. CSS

ОБЯЗАТЕЛЬНОДЛЯ НОВИЧКОВНЕ ДЛЯ НОВИЧКОВВ РАЗРАБОТКЕ

Разработчику Аналитику Тестировщику
Архитектору Инженеру

Общее о стилях​

Что такое CSS?​

★ CSS (Cascading Style Sheets) – язык стилей, который определяет внешний вид HTML-документа, отвечающий за цвета, шрифты, расположение элементов, визуальные эффекты на веб-странице.

Какие возможности предоставляет CSS?

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

При работе с CSS можно встретить и LESS – препроцессор CSS, который расширяет возможности CSS, добавляя переменные, вложенные правила, функции и миксины, что упрощает написание и поддержку стилей. LESS-код компилируется в обычный CSS перед использованием в браузере.

Как устроен CSS?​

К примеру, можно детально настроить оформление и сделать кнопку красивой, добавив цветов, теней и других особенностей: image.png

CSS состоит из:

  • стилей – наборов свойств (например, color: red; )
  • селекторов – указателей, какие элементы стилизовать (h1, .class, #id);
  • правил – комбинаций селекторов и стилей.

CSS называется каскадным, потому что стили применяются по определённому порядку:

  1. Приоритет источника (стиль браузера – авторские стили - !important);
  2. Специфичность селектора (например, #id важнее .class);
  3. Порядок объявления (поздние стили переопределяют ранние).

Каскадность — механизм, по которому браузер определяет итоговые стили элемента, учитывая несколько источников правил: стили браузера по умолчанию, стили разработчика, стили пользователя, и директиву !important.

Каскадность включает:

  • приоритет источника объявления (например, стили с !important получают максимальный вес);
  • специфичность селектора (больше деталей в селекторе — выше вес: #id > .class > tag);
  • порядок следования правил в коде (позднее объявление переопределяет более раннее при равной специфичности).
    Такой подход позволяет переиспользовать и постепенно уточнять стили, не дублируя код.

Представим, что HTML — это каркас дома, а CSS — всё то, что делает этот дом красивым, удобным и живым: краска, мебель, свет, оформление.

Давайте разберёмся, как с помощью CSS «добраться» до нужных частей этого дома, чтобы их изменить.

Когда вы пишете HTML, вы используете теги, например:

<h1>Заголовок</h1>
<p>Абзац текста</p>
<a href="#">Ссылка</a>

Каждый тег — это элемент: <h1>, <p>, <a> и т.д.

Тег — базовая единица разметки HTML, обозначающая определённый тип содержимого или структуру на странице.

Примеры: <p> для абзаца, <h1> для заголовка первого уровня, <div> для универсального контейнера.

Каждый тег становится HTML-элементом в DOM-дереве. Элемент может содержать текст, другие элементы или оставаться пустым, как <br>.

В CSS тег используется как селектор по типу, например p { color: black; }.

Элемент — это основной строительный блок страницы. В CSS вы можете выбирать элементы по их имени и задавать им стиль.

Пример:

p {
    color: blue;
}

— это значит: «все абзацы (<p>) сделай синими».

Иногда нужно стилизовать только некоторые элементы. Например, только особые ссылки должны быть красными.

Для этого в HTML есть атрибут class:

<a href="#" class="button">Нажми меня</a>
<a href="#">Обычная ссылка</a>

Теперь в CSS можно выбрать только те элементы, у которых есть класс button:

.button {
    background-color: red;
    padding: 10px;
    text-decoration: none;
}

Классы и селекторы​

★ Класс (например, .button) – именованный стиль, который можно применять к разным элементам. Это как ярлык или бирка, которую вы прикрепляете к элементу, чтобы потом легко найти его и применить нужный стиль. Один и тот же класс может быть у нескольких элементов. Класс начинается с точки: .button.

★ Стиль – конкретное свойство (например, font-size: 16px).

CSS применяется к элементам HTML через селекторы.

Селекторы (англ. select – выбор), «выборщики», определяют к каким элементам DOM применять стили. Селектор — синтаксическая конструкция в CSS, которая указывает, к каким элементам применяется набор стилевых правил.

Селекторы могут быть простыми или составными:

  • по тегу — h2;
  • по классу — .highlight;
  • по идентификатору — #sidebar;
  • по атрибуту — [disabled] или [type="email"];
  • псевдоклассам — :hover, :focus, :nth-child(2n);
  • псевдоэлементам — ::before, ::first-line.
    Селекторы задают контекст применения правил и позволяют адресовать элементы с высокой точностью.

Идентификатор — уникальное имя элемента, задаваемое в HTML через атрибут id. Каждый идентификатор должен встречаться на странице только один раз.

Пример: <div id="main-navigation">…</div>.

В CSS идентификатор выбирается с помощью символа решётки: #main-navigation { background: white; }.

Идентификаторы применяются для точечной стилизации уникальных компонентов или для внутренних ссылок (<a href="#main-navigation">Перейти</a>).

Атрибут — дополнительная информация, присоединённая к HTML-тегу в виде пары «имя=значение».
Примеры: class="button", href="/home", src="image.jpg", id="search-box".

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

CSS поддерживает селекторы по атрибутам:

  • [target] — любой элемент с атрибутом target;
  • [type="submit"] — кнопки с type="submit";
  • [lang^="ru"] — элементы с языком, начинающимся на ru.

Комбинирование селекторов — способ создания более точных и контекстно-зависимых правил, где применяется одновременно несколько условий.
Основные типы комбинаций:

  • Последовательное указание — элемент должен соответствовать всем селекторам:
    div.button.active — <div class="button active">.

  • Дочерний селектор — div > p — применить стиль к <p>, если он непосредственный дочерний элемент <div>.

  • Потомок — nav a — применить стиль к любой ссылке внутри <nav>, на любом уровне вложенности.

  • Соседний (следующий) — h1 + p — применить стиль к первому <p>, идущему сразу после <h1>.

  • Общий сосед — h1 ~ p — применить стиль ко всем <p>, идущим после <h1> в одном родительском контейнере.

Комбинирование повышает точность адресации и позволяет избегать лишних классов.

Примеры:

  • по тегу – p {…};
  • по классу - .header {…};
  • по идентификатору - #main {…};
  • по атрибуту – [type= "text"] {…};
  • комбинированные –
    • div.button.active {…},
    • div > p (дочерний),
    • h1 + p (соседний). То есть, исходные данные для селекторов – это:
  • теги (<p>, <div>, <h1>) – p { color: red; };
  • классы (атрибут class="button") - .button { … }’
  • идентификаторы (атрибут id="header") - #header { … };
  • атрибуты (значения атрибутов).

Соответственно, выбираются данные так - #id, .class, тег. Пример: у нас есть HTML для стилизации:

<div class="box" id="main-box">Привет, мир!</div>

Подключаем CSS к этому элементу:

/* По тегу, напрямую */  
div { font-size: 16px; }  
/* По классу, через точку*/  
.box { background: yellow; }  

/* По ID, через # */  
#main-box { border: 1px solid black; }

Логика написания самого селектора и свойств такова:

  1. выбираем элемент (селектор);
  2. пишем свойства (параметры стиля).
  селектор {
    свойство: значение;
    свойство: значение;
}

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

Порядок работы​

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

  • Браузер загружает HTML и строит DOM (объектную модель документа);
  • Браузер загружает CSS и формирует CSSOM (объектную модель CSS);
  • DOM и CSSOM объединяются в Render Tree – дерево отрисовки, где каждому элементу присваиваются стили;
  • Браузер отображает страницу на основе дерева отрисовки.

image-1.png

CSS предоставляет мощные инструменты для управления внешним видом и поведением элементов:

  • Трансформации и анимации — добавляют движение.
  • Блочная модель — основа компоновки.
  • Позиционирование — контроль над расположением.
  • Фон и текст — визуальная выразительность.
  • Эффекты — завершающие штрихи.

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

Блочная модель состоит из:

  • контента — внутреннего содержимого (текст, изображение);
  • padding — внутренних отступов от контента до границы;
  • border — границы вокруг padding;
  • margin — внешних отступов от границы до соседей.

Ширина и высота элемента по умолчанию описывают только контентовую область. Свойство box-sizing: border-box позволяет включать padding и border в расчёт ширины/высоты — это удобнее при верстке адаптивных макетов.

Блоки бывают блочными (display: block), строчными (display: inline) и гибридными (display: inline-block, flex, grid).

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

Основные функции:

  • translate(x, y) — смещение по горизонтали и вертикали;
  • scale(n) — масштабирование (увеличение/уменьшение);
  • rotate(angle) — поворот на заданный угол;
  • skew(ax, ay) — наклон по осям;
  • matrix() — произвольная аффинная трансформация.

Трансформации исполняются на GPU и почти не нагружают CPU, что делает их оптимальными для интерактивных эффектов. Могут применяться к 2D- и 3D-пространству.

Анимация — последовательное изменение стилевых свойств элемента во времени, создающее ощущение движения или перехода.

CSS-анимации строятся на двух составляющих:

  1. @keyframes — описание ключевых кадров, где задаются начальное, промежуточные и конечное состояния;
  2. свойства animation-* — параметры воспроизведения: длительность, задержка, количество повторов, направление, плавность, имя анимации.

Пример использования: кнопка, которая плавно «прыгает» при наведении, или индикатор загрузки, вращающийся бесконечно.

Анимации управляются целиком через CSS, без JavaScript, если не требуется сложная логика взаимодействия.

Позиционирование — способ размещения элемента на странице относительно других элементов или области просмотра.

CSS предлагает несколько стратегий:

  • static — положение по умолчанию, элемент участвует в обычном потоке документа.

  • relative — смещение относительно исходного положения в потоке; сам поток не нарушается.

  • absolute — элемент вынимается из потока и позиционируется относительно ближайшего позиционированного предка (с relative, absolute, fixed или sticky). Если такого предка нет — относительно <html>.

  • fixed — элемент фиксируется относительно окна просмотра, даже при прокрутке страницы.

  • sticky — гибрид relative и fixed: элемент остаётся в потоке, но при прокрутке до заданной точки «прилипает» к границе окна.

Позиционирование управляет координатами через свойства top, right, bottom, left. Оно критически важно для всплывающих подсказок, модальных окон, боковых панелей и шапок сайтов.

Добавление​

★ Как добавить CSS в HTML?

  1. Встроенные стили (в теге через style=);
  2. Внутри HTML (добавив тег <style></style>);
  3. Внешний файл:
<link rel="stylesheet" href="style.css">

Интересный факт
До появления HTML5 и CSS3 анимации и интерактивность реализовывались через Flash. Сегодня всё это можно сделать даже в CSS, что делало его даже движком интерфейсов.

Как проверять и отлаживать стили​

Консоль разработчика и инструменты отладки​

Браузеры предоставляют встроенные инструменты разработчика — DevTools — которые позволяют исследовать и изменять стили в реальном времени.

В панели Elements (или «Элементы») отображается DOM-дерево страницы. При выборе любого элемента справа появляется панель Styles, где перечисляются все CSS-правила, применяемые к этому элементу:

  • активные правила отмечаются галочкой;
  • перечёркнутые свойства — те, что были переопределены другими, более приоритетными правилами;
  • рядом с каждым правилом указан источник: имя файла стилей и номер строки;
  • можно прямо в панели редактировать значения — изменения мгновенно отражаются на странице;
  • есть возможность временно отключать правила, ставя/снимая галочку слева от строки с селектором.

Также доступны:

  • вкладка Computed — показывает итоговые вычисленные значения всех CSS-свойств для элемента, сгруппированные по категориям (цвет, размеры, отступы и т.д.);
  • интерактивные инструменты: «инспектор элемента» (значок курсора), «режим для устройств» (адаптивный просмотр под разные экраны), «отслеживание медиазапросов».

Эти инструменты критически важны для понимания того, какие стили реально работают, и почему элемент выглядит именно так.

Агент пользователя и стили по умолчанию​

Агент пользователя — это браузер. У каждого браузера есть своя реализация так называемых стилей по умолчанию — базовый CSS, который применяется ко всем HTML-элементам, если разработчик не задал своих.

Например:

  • <h1> по умолчанию крупный, жирный, с отступами сверху и снизу;
  • <ul> имеет отступ слева и маркеры у пунктов;
  • <a> — синий и подчёркнутый.

Эти стили встроены в движок браузера (Blink в Chrome, Gecko в Firefox и т.д.). Они могут немного различаться между браузерами — именно поэтому дизайнеры часто подключают CSS-ресеты (например, normalize.css) — небольшие файлы, сглаживающие различия и приводящие стартовую точку к единому виду.

В DevTools стили агента пользователя отображаются в нижней части панели Styles, в разделе user agent stylesheet. Их можно просмотреть, но не отредактировать напрямую — только переопределить своими правилами.

Таблица стилей​

Таблица стилей — это полный набор CSS-правил, загруженных для текущей страницы:

  • внешние файлы, подключённые через <link rel="stylesheet">;
  • внутренние стили из тега <style> в <head>;
  • встроенные стили через атрибут style="".

Браузер парсит все эти источники, объединяет их в единую CSSOM (CSS Object Model) — древовидную структуру, где каждое правило привязано к элементам DOM.

Таблица стилей не фиксирована: можно динамически добавлять или удалять <style> и <link> через JavaScript — браузер обновит CSSOM и пересчитает отображение.

Важно: таблица стилей — глобальный ресурс страницы. Даже если правило написано в самом конце файла, оно участвует в расчёте стилей для всех элементов, на которые распространяется селектор.

Наследование стилей​

Некоторые CSS-свойства передаются от родительского элемента к дочерним — это называется наследованием.

Примеры наследуемых свойств:

  • color — цвет текста;
  • font-family, font-size, line-height;
  • text-align, letter-spacing;
  • visibility.

Если у <div> задан color: darkblue, то весь текст внутри его дочерних элементов (<p>, <span>, <a> и т.д.) будет тёмно-синим — если только явно не переопределить.

Наследуются только вычисленные значения, и только если дочерний элемент не имеет собственного объявления.

Существуют три ключевых ключевых слова, управляющих наследованием:

  • inherit — явно указать: «возьми значение у родителя»;
  • initial — сбросить к значению по умолчанию для этого свойства (не путать со стилями браузера);
  • unset — «верни поведение по умолчанию»: если свойство наследуемое — действует как inherit, если нет — как initial.

Иерархия применения стилей​

Браузер строит итоговый внешний вид элемента по строгой иерархии:

  1. Источник объявления
    Приоритет:

    • !important в стилях пользователя (если заданы);
    • !important в авторских стилях (ваши CSS);
    • обычные авторские стили;
    • !important в стилях агента пользователя — почти не встречается;
    • стили агента пользователя (по умолчанию).

  2. Специфичность селектора
    Рассчитывается по формуле (в порядке убывания веса):

    • инлайн-стили (style="") — вес 1000;
    • идентификаторы (#id) — 100 за каждый;
    • классы, псевдоклассы, атрибуты ([type], :hover, .btn) — 10 за каждый;
    • теги и псевдоэлементы (p, ::before) — 1 за каждый.
      Пример: #header .nav-item:hover → 100 + 10 + 10 = 120.

  3. Порядок следования
    При равной специфичности выигрывает правило, объявленное позже в таблице стилей — или позже по порядку загрузки файлов.

Порядок записи правил в CSS-файле​

CSS не требует соблюдения строгого порядка объявления правил. Можно писать стили в любом порядке — сначала для заголовков, потом для кнопок, затем снова для заголовков, если это удобно для организации кода.

При сборке итоговой таблицы стилей браузер учитывает:

  • порядок подключения CSS-файлов в HTML;
  • порядок правил внутри одного файла — позже объявленное правило имеет приоритет при равной специфичности.

Это позволяет группировать стили логически: например, вынести все анимации в конец файла, или собрать все адаптивные медиазапросы отдельным блоком. Никаких технических ограничений нет.

Повторное объявление одного и того же свойства​

Для одного элемента можно несколько раз задать одно и то же CSS-свойство — в одном правиле, в разных правилах, даже в одном селекторе.

Пример:

.button {
  color: red;
  font-size: 14px;
  color: blue;
}

В этом случае браузер применит последнее объявление в рамках одного блока: color: blue.

Если повторение происходит в разных правилах:

.highlight { color: yellow; }
.button { color: red; }
.highlight.button { color: green; }

…и элемент имеет оба класса — <div class="button highlight">, то сработает правило с наибольшей специфичностью (highlight.button = 20), и цвет будет green.

Если специфичность равна — побеждает позже объявленное правило в порядке загрузки.

Директива !important​

!important — модификатор, прикрепляемый к значению свойства:

.title {
  color: red !important;
}

Он повышает приоритет этого объявления до максимального уровня в своей категории (авторских стилей).

!important применяется только к одному свойству, а не ко всему блоку. В примере выше color получает высший приоритет, но другие свойства (font-size, margin) — нет.

Когда !important уместен:

  • быстрая отладка в DevTools (браузеры добавляют его автоматически при редактировании);
  • переопределение сторонних библиотек, где нет контроля над исходным CSS;
  • экстренные исправления, когда переписать селектор невозможно.

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