Как работает CSS и почему без него сайты выглядят ужасно

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

Представьте себе сайт без Cascading Style Sheets— это просто текст, таблицы и изображения, расположенные один за другим без какого-либо визуального форматирования. Такой подход был приемлем в начале 90-х, когда интернет только зарождался, но сегодня пользователи ожидают от веб-ресурсов современного интерфейса и удобной навигации.

В этом руководстве мы рассмотрим все ключевые аспекты CSS — от базового синтаксиса до продвинутых техник позиционирования и анимации. Материал структурирован таким образом, чтобы вы могли не только получить теоретические знания, но и сразу применить их на практике. Изучив основы Cascading Style Sheets, вы сделаете первый значительный шаг к тому, чтобы стать востребованным веб-разработчиком.

Что такое CSS и зачем он нужен?

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

Название «каскадные таблицы стилей» прекрасно отражает суть технологии. «Каскадные» указывает на иерархическую природу применения стилей, где правила могут наследоваться и перезаписываться. «Таблицы стилей» подразумевают набор инструкций по оформлению, которые браузер интерпретирует и применяет к HTML-элементам.

В современной веб-разработке CSS работает в тесной связке с HTML (отвечающим за структуру) и JavaScript (обеспечивающим интерактивность). Вместе они образуют фундаментальную триаду технологий, на которой строится фронтенд практически любого веб-проекта.

Использование Cascading Style Sheets предоставляет разработчикам ряд значительных преимуществ:

• Разделение содержания и представления — позволяет изменять внешний вид сайта без вмешательства в его содержимое
• Повторное использование стилей — один файл CSS может применяться к множеству страниц сайта
• Кэширование — однажды загруженный файл Cascading Style Sheets сохраняется в памяти браузера, ускоряя последующие загрузки страниц
• Адаптивность — CSS позволяет создавать сайты, которые корректно отображаются на различных устройствах

Таким образом, Cascading Style Sheets — это не просто инструмент «украшения» веб-страниц, а мощная технология, обеспечивающая гибкость и эффективность в современной веб-разработке.

Краткая история CSS и его эволюция

История Cascading Style Sheets началась в середине 90-х годов, когда веб-разработка стремительно набирала обороты, а возможности для визуального оформления страниц были крайне ограничены. До появления CSS веб-дизайнеры использовали теги форматирования HTML, а для более сложных макетов приходилось прибегать к табличной верстке и другим неэлегантным решениям.

17 декабря 1996 года Консорциум Всемирной паутины (W3C) выпустил первую официальную спецификацию CSS1. Это был революционный шаг, позволивший отделить содержание документа от его представления. Однако первая версия Cascading Style Sheets обладала весьма скромными возможностями — в основном она позволяла форматировать текст, задавать цвета и выравнивание элементов.

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

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

В современных веб-проектах все чаще используются препроцессоры CSS (такие как Sass, Less, Stylus), которые добавляют в язык дополнительные возможности: переменные, вложенные правила, функции. Также набирают популярность методологии написания Cascading Style Sheets (BEM, SMACSS, Atomic CSS) и CSS-in-JS решения, интегрирующие стили непосредственно в JavaScript-компоненты.

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

Основы синтаксиса и структуры

Как устроены CSS-правила?

В основе Cascading Style Sheets лежит довольно простая, но при этом гибкая система правил. Каждое правило CSS состоит из двух основных частей: селектора и блока объявлений. Селектор указывает, к каким элементам HTML будет применяться стиль, а блок объявлений содержит одно или несколько свойств с их значениями.

Структура Cascading Style Sheets-правила выглядит следующим образом:

селектор {

  свойство1: значение1;

  свойство2: значение2;

  /* и так далее */

}

Рассмотрим пример:

h1 {

  color: #32a846;

  font-size: 24px;

  font-family: Arial, sans-serif;

}

В этом правиле:

• h1 — селектор, указывающий, что стили будут применяться ко всем заголовкам первого уровня
• color, font-size и font-family — свойства, определяющие, что именно мы хотим изменить
• #32a846, 24px и Arial, sans-serif — значения этих свойств

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

• Селекторы элементов (h1, p, div)
• Селекторы классов (.my-class)
• Селекторы идентификаторов (#unique-id)
• Атрибутные селекторы ([type=»text»])
• Псевдоклассы (:hover, :first-child)
• Псевдоэлементы (::before, ::after)

Как подключить CSS к HTML?

Существует три основных способа подключения Cascading Style Sheets к HTML-документу, каждый из которых имеет свои преимущества и недостатки.

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

<!DOCTYPE html>

<html lang=»ru»>

<head>

  <meta charset=»UTF-8″>

  <title>Мой сайт</title>

  <link rel=»stylesheet» href=»styles.css»>

</head>

<body>

  <h1>Добро пожаловать!</h1>

  <p>Это пример подключения внешнего CSS-файла.</p>

</body>

</html>

Помните, что порядок подключения CSS-файлов имеет значение: если два правила имеют одинаковую специфичность, то применяется то, которое было определено последним. Это важный аспект «каскадности» Cascading Style Sheets, который необходимо учитывать при разработке.

Основные свойства

Работа с текстом и шрифтами

Типографика является одним из ключевых аспектов дизайна веб-страниц, и Cascading Style Sheets предоставляет богатый набор инструментов для управления шрифтами и форматированием текста. Рассмотрим основные свойства:

p {

  font-family: 'Roboto', Arial, sans-serif;

  font-size: 16px;

  font-weight: 400;

  line-height: 1.5;

  text-align: justify;

  letter-spacing: 0.05em;

}

Свойство font-family определяет семейство шрифтов, которые будут использоваться для текста. Рекомендуется указывать несколько шрифтов в порядке предпочтения, а также завершать список общим типом шрифта (serif, sans-serif, monospace), чтобы обеспечить запасной вариант.

Для размера шрифта (font-size) можно использовать различные единицы измерения:

• px — пиксели, абсолютная единица
• em — относительно размера шрифта родительского элемента
• rem — относительно размера шрифта корневого элемента
• % — процент от размера шрифта родителя

Цвета и фоны

Cascading Style Sheets предлагает несколько способов задания цветов:

.color-examples {

  color: red;                   /* Именованный цвет */

  color: #ff0000;               /* Шестнадцатеричный (HEX) */

  color: rgb(255, 0, 0);        /* RGB */

  color: rgba(255, 0, 0, 0.5);  /* RGBA с прозрачностью */

  color: hsl(0, 100%, 50%);     /* HSL (оттенок, насыщенность, светлота) */

  color: hsla(0, 100%, 50%, 0.5); /* HSLA с прозрачностью */

}

Для работы с фоном существует набор свойств:

background-example {

  background-color: #f5f5f5;

  background-image: url('pattern.png');

  background-repeat: no-repeat;

  background-position: center;

  background-size: cover;

  /* Сокращенная запись */

  background: #f5f5f5 url('pattern.png') no-repeat center/cover;

}

CSS3 также позволяет создавать градиенты без использования изображений:

.gradient-example {

  background: linear-gradient(to right, #ff0000, #0000ff);

  background: radial-gradient(circle, #ff0000, #0000ff);

}

Размеры и отступы

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

.box-example {

  width: 300px;          /* Ширина содержимого */

  height: 200px;         /* Высота содержимого */

  padding: 20px;         /* Внутренний отступ */

  border: 2px solid #000; /* Граница */

  margin: 10px;          /* Внешний отступ */

}

Свойства padding и margin могут быть заданы как для всех сторон сразу, так и для каждой стороны отдельно:

.detailed-spacing {

  padding-top: 10px;

  padding-right: 20px;

  padding-bottom: 10px;

  padding-left: 20px;

  /* Сокращенная запись */

  padding: 10px 20px;

 

  margin-top: 15px;

  margin-right: 30px;

  margin-bottom: 15px;

  margin-left: 30px;

  /* Сокращенная запись */

  margin: 15px 30px;

}

Важно отметить, что значение auto для свойства margin часто используется для центрирования блочных элементов по горизонтали:

.centered-box {

  width: 300px;

  margin-left: auto;

  margin-right: auto;

  /* Сокращенная запись */

  margin: 0 auto;

}

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

CSS-бокс-модель и работа с блоками

Бокс-модель (Box Model) — одна из фундаментальных концепций Cascading Style Sheets, определяющая, как браузер интерпретирует и отображает элементы на странице. Понимание бокс-модели критически важно для эффективной верстки и предотвращения неожиданного поведения элементов при применении стилей.

Что такое бокс-модель?

В CSS каждый элемент представляется как прямоугольная «коробка» (box), состоящая из нескольких слоев, расположенных от центра к периферии:

1. Content (содержимое) — внутренняя область, где отображается текст, изображения или другие вложенные элементы
2. Padding (внутренний отступ) — прозрачное пространство между содержимым и границей
3. Border (граница) — линия, окружающая padding и content
4. Margin (внешний отступ) — прозрачное пространство между границей элемента и соседними элементами

.box-example {

  width: 200px;          /* Ширина содержимого */

  height: 100px;         /* Высота содержимого */

  padding: 20px;         /* Внутренний отступ */

  border: 5px solid #333; /* Граница */

  margin: 15px;          /* Внешний отступ */

}

Расчет фактических размеров элемента

В стандартной бокс-модели Cascading Style Sheets (content-box) свойства width и height определяют размеры только области содержимого, без учета padding, border и margin. Это часто приводит к путанице при расчете итоговых размеров элемента.

Рассмотрим пример расчета фактической ширины элемента:

Фактическая ширина = width + padding-left + padding-right + border-left + border-right

Для нашего примера .box-example:

Фактическая ширина = 200px + 20px + 20px + 5px + 5px = 250px

Важно понимать, что margin не влияет на фактические размеры элемента, но влияет на пространство, которое элемент занимает в макете.

Альтернативная бокс-модель: border-box

Чтобы упростить расчеты и сделать верстку более интуитивной, в CSS3 была введена альтернативная бокс-модель через свойство box-sizing:

.better-box {

  box-sizing: border-box;

  width: 200px;

  padding: 20px;

  border: 5px solid #333;

}

При использовании box-sizing: border-box значения width и height включают в себя content, padding и border. Таким образом, заданная ширина в 200px будет соответствовать фактической ширине element, а содержимое автоматически «сожмется» для учета padding и border.

Многие разработчики предпочитают применять данное правило ко всем element на странице:

*, *::before, *::after {

  box-sizing: border-box;

}

Это значительно упрощает расчеты и предотвращает многие типичные проблемы верстки.

Понимание бокс-модели — ключевой фактор в создании предсказуемых и стабильных макетов. Неправильная интерпретация того, как рассчитываются размеры element, может привести к «неожиданному» поведению страницы, особенно при создании адаптивного дизайна или работе с комплексными компонентами интерфейса.

Позиционирование и флоаты

Расположение элементов на странице — один из наиболее важных и часто сложных аспектов веб-разработки. CSS предлагает несколько подходов к позиционированию, которые развивались со временем от простых флоатов до современных систем вёрстки, таких как Flexbox и Grid.

Основные модели позиционирования

Свойство position является ключевым для управления расположением element. Оно может принимать следующие значения:

.positioning-example {

  position: static | relative | absolute | fixed | sticky;

}

Рассмотрим примеры использования:

/* Относительное позиционирование */

.relative-example {

  position: relative;

  top: 20px;

  left: 30px;

  /* Элемент сдвинется на 20px вниз и на 30px вправо от своего нормального положения */

}

/* Абсолютное позиционирование */

.parent {

  position: relative; /* Важно для ограничения области абсолютного позиционирования */

}

.absolute-example {

  position: absolute;

  top: 0;

  right: 0;

  /* Элемент будет помещён в правый верхний угол ближайшего позиционированного предка */

}

/* Фиксированное позиционирование */

.fixed-header {

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  /* Элемент будет закреплён в верхней части окна просмотра */

}

/* "Липкое" позиционирование */

.sticky-nav {

  position: sticky;

  top: 10px;

  /* Элемент будет вести себя как обычный до прокрутки до указанной позиции, затем "прилипнет" */

}

Flexbox и Grid – современные способы верстки

Flexbox (Flexible Box Layout) и Grid Layout — это два мощных инструмента для создания сложных и гибких макетов, которые значительно упростили задачи, ранее требовавшие сложных хаков с использованием флоатов и позиционирования.

Flexbox

Flexbox оптимизирован для одномерного расположения element — либо в ряд, либо в колонку.

.flex-container {

  display: flex;

  flex-direction: row; /* или column */

  justify-content: space-between; /* распределение по основной оси */

  align-items: center; /* выравнивание по перпендикулярной оси */

  flex-wrap: wrap; /* перенос элементов */

}

.flex-item {

  flex: 1 0 auto; /* сокращённая запись для flex-grow, flex-shrink, flex-basis */

}

Grid

Grid предназначен для двумерных макетов — одновременно для рядов и колонок.

.grid-container {

  display: grid;

  grid-template-columns: repeat(3, 1fr); /* три равные колонки */

  grid-template-rows: 100px auto 50px; /* высота рядов */

  grid-gap: 10px; /* отступы между ячейками */

}

.grid-item {

  grid-column: 1 / 3; /* элемент занимает первые две колонки */

  grid-row: 2 / 3; /* элемент занимает второй ряд */

}

Выбор между Flexbox и Grid зависит от конкретной задачи. Часто оба подхода используются вместе: Grid для общей структуры страницы, а Flexbox для размещения element внутри отдельных секций.

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

CSS-анимации и переходы

В современном веб-дизайне динамичность и интерактивность играют важную роль в создании привлекательного пользовательского опыта. CSS предоставляет мощные инструменты для добавления движения и плавных изменений без необходимости использования JavaScript или сторонних библиотек.

Псевдоклассы и псевдоэлементы

Псевдоклассы и псевдоэлементы — важные составляющие динамического cascading style sheets, позволяющие стилизовать element в зависимости от их состояния или добавлять дополнительное содержимое.

Псевдоклассы определяют особое состояние выбранного element:

/* Стиль ссылки при наведении курсора */

a:hover {

  color: #ff6b00;

  text-decoration: underline;

}

/* Стиль кнопки при нажатии */

button:active {

  transform: scale(0.98);

  box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);

}

/* Стиль первого дочернего элемента */

li:first-child {

  font-weight: bold;

}

/* Каждый второй элемент списка */

li:nth-child(2n) {

  background-color: #f5f5f5;

}

Псевдоэлементы позволяют добавлять содержимое до или после element, а также выбирать специфические части элемента:

/* Добавляет иконку перед каждой ссылкой */

a::before {

  content: "→ ";

  color: #999;

}

/* Стилизует первую букву абзаца */

p::first-letter {

  font-size: 2em;

  color: #333;

}

/* Добавляет декоративный элемент после заголовка */

h2::after {

  content: "";

  display: block;

  width: 50px;

  height: 3px;

  background-color: #ff6b00;

  margin-top: 8px;

}

CSS-анимации

CSS предлагает два основных механизма для создания анимаций: переходы (transition) и покадровые анимации (animation с @keyframes).

Свойство transition

Переходы позволяют плавно изменять значения cascading style sheets-свойств при изменении состояния element:

.button {

  background-color: #3498db;

  color: white;

  padding: 10px 20px;

  border-radius: 4px;

  transition: background-color 0.3s ease, transform 0.2s ease;

}

.button:hover {

  background-color: #2980b9;

  transform: translateY(-2px);

}

Свойство transition принимает следующие параметры:

• Какие свойства анимировать (all для всех или конкретные свойства)
• Продолжительность анимации
• Функция времени (linear, ease, ease-in, ease-out, cubic-bezier)
• Задержка перед началом анимации

Keyframes-анимации

Для более сложных анимаций, которые не привязаны к изменению состояния, используются @keyframes и свойство animation:

@keyframes pulse {

  0% {

    transform: scale(1);

    opacity: 1;

  }

  50% {

    transform: scale(1.1);

    opacity: 0.8;

  }

  100% {

    transform: scale(1);

    opacity: 1;

  }

}

.notification {

  animation: pulse 2s infinite ease-in-out;

}

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

• Имя анимации (определенное в @keyframes)
• Продолжительность
• Функция времени
• Задержка
• Количество повторений (infinite для бесконечного повторения)
• Направление анимации (normal, reverse, alternate)
• Состояние анимации после завершения (forwards, backwards, both, none)

Вот несколько полезных эффектов, которые можно реализовать с помощью cascading style sheets-анимаций:

1. Пульсация — привлекает внимание к element интерфейса
2. Загрузчики — индикаторы загрузки без использования изображений
3. Параллакс-эффекты — создание глубины при прокрутке
4. Анимированные переходы между страницами — улучшают навигационный опыт
5. Микроинтеракции — тонкие анимации, реагирующие на действия пользователя

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

Медиа-запросы и адаптивная верстка

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

cascading style sheets медиа-запросы (media queries) — ключевой инструмент, позволяющий реализовать адаптивный дизайн. Они позволяют применять определенные стили в зависимости от характеристик устройства, таких как ширина экрана, ориентация, разрешение и другие.

Основные breakpoints

Breakpoints (точки перелома) — это значения ширины экрана, при которых дизайн сайта должен измениться для оптимального отображения содержимого. Хотя универсальных правил не существует, часто используются следующие breakpoints:

/* Мобильные устройства (портретная ориентация) */

@media (max-width: 576px) {

  /* стили для малых экранов */

}

/* Мобильные устройства (альбомная ориентация), планшеты (портретная ориентация) */

@media (min-width: 577px) and (max-width: 768px) {

  /* стили для средних экранов */

}

/* Планшеты (альбомная ориентация), маленькие ноутбуки */

@media (min-width: 769px) and (max-width: 992px) {

  /* стили для больших экранов */

}

/* Десктопы, ноутбуки */

@media (min-width: 993px) and (max-width: 1200px) {

  /* стили для очень больших экранов */

}

/* Большие десктопы */

@media (min-width: 1201px) {

  /* стили для огромных экранов */

}

Вместо использования стандартных breakpoints, рекомендуется анализировать контент вашего сайта и определять точки, в которых дизайн начинает «ломаться». Этот подход называется «контентно-ориентированным», и он обеспечивает более гибкий и устойчивый адаптивный дизайн.

Примеры медиа-запросов

Рассмотрим практические примеры использования медиа-запросов для адаптации различных element:

/* Базовые стили для всех устройств */

.container {

  width: 90%;

  margin: 0 auto;

  max-width: 1200px;

}

/* Уменьшаем размер шрифта на маленьких экранах */

@media (max-width: 768px) {

  body {

    font-size: 14px;

  }

}

/* Меняем сетку с трехколоночной на одноколоночную */

.grid {

  display: grid;

  grid-template-columns: repeat(3, 1fr);

  gap: 20px;

}

@media (max-width: 992px) {

  .grid {

    grid-template-columns: repeat(2, 1fr);

  }

}

@media (max-width: 576px) {

  .grid {

    grid-template-columns: 1fr;

  }

}

/* Скрываем определенные элементы на маленьких экранах */

@media (max-width: 768px) {

  .sidebar {

    display: none;

  }

}

/* Изменяем навигацию для мобильных устройств */

@media (max-width: 768px) {

  .nav-links {

    flex-direction: column;

  }

}

Адаптация шрифтов и блоков

Особое внимание следует уделить адаптации типографики и основных блоков контента:

/* Адаптивные шрифты с помощью clamp() */

h1 {

  font-size: clamp(1.5rem, 5vw, 3rem);

  /* Минимум 1.5rem, максимум 3rem, между ними - 5% от ширины viewport */

}

/* Адаптивные отступы */

.section {

  padding: clamp(1rem, 5vw, 3rem);

}

/* Адаптивные изображения */

img {

  max-width: 100%;

  height: auto;

}

Частые ошибки при адаптивной верстке

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

Заключение и советы по изучению CSS

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

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

Практические советы для изучающих CSS:

• Начните с малого — сосредоточьтесь на базовых концепциях, таких как селекторы, цвета и типографика, прежде чем переходить к сложным макетам и анимациям.
• Учитесь на реальных проектах — теоретические знания закрепляются лучше всего, когда вы применяете их для решения практических задач. Создавайте небольшие проекты или воссоздавайте дизайны существующих сайтов.
• Используйте инструменты разработчика — исследуйте CSS-код на сайтах, которые вам нравятся. Инструменты разработчика в браузерах позволяют в реальном времени видеть, как изменения в CSS влияют на внешний вид element.
• Не бойтесь экспериментировать — CSS предоставляет множество способов достижения одного и того же результата. Пробуйте разные подходы, чтобы понять их преимущества и ограничения.
• Изучайте код других разработчиков — анализ проектов с открытым исходным кодом и решений опытных разработчиков поможет вам освоить более продвинутые техники и лучшие практики.

Направления для углубленного изучения:

По мере роста ваших навыков работы с CSS, вы можете расширить свои знания, изучая:

• Препроцессоры CSS — такие как SCSS, LESS или Stylus, которые добавляют переменные, функции, вложенность и другие возможности, делающие CSS более мощным и удобным.
• CSS-методологии — такие как БЭМ (Блок, Элемент, Модификатор), SMACSS или Atomic CSS, которые предлагают структурированные подходы к организации CSS-кода в крупных проектах.
• CSS-in-JS — подходы, при которых стили определяются непосредственно в JavaScript-коде, что обеспечивает лучшую инкапсуляцию и динамическую генерацию стилей.
• Утилитарные фреймворки — такие как Tailwind CSS, которые предлагают низкоуровневые утилитарные классы для быстрого создания пользовательских интерфейсов.

CSS продолжает эволюционировать, предлагая новые возможности, такие как CSS Houdini, Custom Properties (переменные) и логические свойства, которые расширяют границы возможного в веб-дизайне. Оставайтесь любопытными, продолжайте учиться и экспериментировать — и вы непременно достигнете мастерства в создании великолепных веб-интерфейсов.

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