Содержание
С помощью CSS (каскадных таблиц стилей) вы можете полностью контролировать внешний вид веб-страницы: от цвета текста и фона до сложной анимации и адаптации сайта под разные устройства. CSS превращает голый HTML-документ в визуально привлекательный, удобный и брендированный интерфейс. Вы можете менять размеры и шрифты, позиционировать элементы, создавать сетки и флексы, добавлять тени, градиенты, трансформации, анимации, а также делать интерактивные эффекты при наведении и нажатии — всё это без единой строчки
JavaScript.
Базовые возможности: от цвета до типографики
Начнём с того, что CSS позволяет делать с каждым элементом на странице простые, но фундаментальные вещи. Это основа основ, которая меняет восприятие сайта.
Цвета и фоны
Вы можете задать цвет текста, фона, границ с помощью имён (red), HEX-кодов (#ff6600), RGB (rgb(255,99,71)) или современных HSL (hsl(200,50%,50%)). Прозрачность управляется через rgba() или opacity. Фон можно сделать градиентом (линейным, радиальным, коническим) или изображением с контролем повторения, положения и размера (background-size: cover).
Типографика
С CSS вы — типограф. Выбираете шрифты из системы пользователя или подключаете кастомные через Google Fonts. Задаёте размер (font-size), жирность (font-weight), высоту строки (line-height), межбуквенное расстояние (letter-spacing), регистр (text-transform), декорации (подчёркивание, зачёркивание). Выравниваете текст по левому, правому, центру или ширине. Контролируете перенос длинных слов (word-break, overflow-wrap).
Отступы, размеры и границы
Каждый элемент получает внутренние отступы (padding) и внешние (margin). Вы задаёте ширину (width), высоту (height), ограничения (max-width, min-height). Граница (border) может быть сплошной, пунктирной, двойной, с закруглёнными углами (border-radius). Это позволяет создавать как строгие табличные сетки, так и карточки с мягкими краями.
Продвинутое позиционирование и построение макетов
Здесь CSS проявляет свою настоящую мощь, позволяя размещать элементы где угодно и в любой взаимосвязи.
Flexbox (Flexible Box Layout)
Flexbox решает проблему выравнивания и распределения пространства внутри контейнера. С помощью нескольких свойств (display: flex, justify-content, align-items, flex-direction, gap) вы можете центрировать блок по вертикали и горизонтали, создавать «резиновые» колонки одинаковой высоты, менять порядок элементов. Это идеально для меню, карточек товаров, строк с иконками и кнопками.
CSS Grid (Grid Layout)
Двумерная сетка, которая даёт полный контроль над строками и колонками одновременно. Вы задаёте шаблон (grid-template-columns: 1fr 2fr 1fr), размещаете элементы в нужные ячейки (grid-column: span 2), создаёте сложные галереи, дашборды, макеты журналов. Grid позволяет делать то, что раньше требовало хакеров на таблицах и float.
Position (позиционирование)
- static — по умолчанию, элемент в потоке.
- relative — сдвиг относительно своего нормального положения (top, left).
- absolute — позиционирование относительно ближайшего позиционированного родителя (например, для выпадающих меню).
- fixed — элемент зафиксирован относительно окна браузера (липкие шапки, кнопки «наверх»).
- sticky — гибрид relative и fixed (заголовки таблиц, которые прилипают при скролле).
Адаптивный дизайн и медиа-запросы
С помощью CSS ваш сайт может выглядеть идеально на телефоне, планшете, ноутбуке и мониторе. Медиа-запросы (@media) позволяют применять разные стили в зависимости от ширины экрана, разрешения, ориентации устройства. Типичный паттерн: на десктопе — три колонки в ряд, на планшете — две, на мобильном — одна. Вы также можете скрывать или показывать определённые блоки, уменьшать шрифты, перестраивать навигацию (бургер-меню).
/* Десктоп: три колонки */
.container { display: grid; grid-template-columns: 1fr 1fr 1fr; }
/* Планшет: две колонки */
@media (max-width: 768px) {
.container { grid-template-columns: 1fr 1fr; }
}
/* Мобильный: одна колонка */
@media (max-width: 480px) {
.container { grid-template-columns: 1fr; }
}
Анимации и трансформации: оживляем интерфейс
CSS способен создавать плавные переходы и анимации без JavaScript. Это улучшает пользовательский опыт и делает сайт «живым».
Transition (переходы)
Плавное изменение свойства при смене состояния (например, при наведении мыши). Можно анимировать цвет, размер, прозрачность, тень. Пример: кнопка меняет фон за 0.3 секунды, а не мгновенно.
Transform (трансформации)
Вращение (rotate), масштабирование (scale), наклон (skew), перемещение (translate) без влияния на соседние элементы. Используется для иконок, карточек, модальных окон.
Keyframes (ключевые кадры) и @keyframes
Создание сложных многошаговых анимаций: пульсация кнопки, вращение лоадера, появление элементов с эффектом fade-in. Вы описываете состояния (0%, 50%, 100%) и свойства в каждом из них, а затем применяете animation к элементу.
Псевдоклассы и псевдоэлементы: стилизация состояний и частей элементов
Псевдоклассы (начинаются с двоеточия) позволяют стилизовать элемент в особом состоянии:
- :hover — при наведении мыши.
- :focus — когда элемент в фокусе (например, поле ввода).
- :active — в момент клика.
- :first-child, :last-child, :nth-child(odd) — стилизация первого, последнего или чётных дочерних элементов (например, «зебра» в таблицах).
- :not() — исключение элементов.
Псевдоэлементы (::before, ::after) добавляют виртуальные элементы внутрь существующего, не меняя HTML. Через них можно вставлять иконки, декоративные линии, кастомные буллиты в списки, всплывающие подсказки.
Что нельзя сделать с помощью CSS (чтобы не питать иллюзий)
Важно знать границы CSS, чтобы не пытаться решить им то, для чего нужны другие технологии.
- Логику и вычисления с ответвлениями (if/else): CSS не язык программирования. Условные конструкции — только через медиа-запросы и селекторы, но полноценная логика отсутствует.
- Хранение данных и работа с базами данных: CSS не может прочитать значение из базы или записать cookie. Это делается на сервере или JavaScript.
- События, кроме hover/focus/active: На клик, двойной клик, скролл, ввод с клавиатуры нужно использовать JavaScript.
- Реакция на внешние действия (таймеры, сетевые запросы): CSS не может измениться потому что «пришёл ответ от сервера».
- Подсчёт суммы в корзине, фильтрация товаров: Даже если вы очень красиво нарисуете корзину, итоговую сумму должен считать JavaScript.
Как CSS применяется на реальных сайтах (CMS и конструкторы)
В любой современной CMS — будь то Joomla, WordPress, Drupal — дизайн управляется через CSS-файлы темы (шаблона). Вы можете полностью переопределить внешний вид сайта, редактируя эти файлы или добавляя свой код в настройки темы. В конструкторах сайтов (например, SitePro.by или Tilda) тоже есть возможность добавлять свой CSS, хотя чаще используются визуальные настройки (цвет, отступы). Для профессиональных разработчиков CSS — это основной инструмент, наравне с HTML и JavaScript.
Практические примеры: что вы сможете создать на CSS уже через месяц обучения
- Адаптивное меню, которое превращается в выпадающий список на телефоне.
- Карточки товаров с тенью, закруглениями и эффектом подъёма при наведении.
- Анимацию загрузки (спиннер) без картинок — только через CSS-свойства и transform.
- Сетку галереи с фотографиями разного размера, как в Pinterest, используя Grid.
- Стилизованные формы ввода с красивыми полями, ошибками и фокусом.
- Параллакс-эффект (фон движется медленнее контента) при скролле.
- Тёмную и светлую тему с помощью CSS-переменных и переключателя на JavaScript.
Итог: CSS — это мощнейший инструмент веб-дизайнера и верстальщика. Он превращает скелет HTML в полноценный визуальный продукт. Вы можете управлять почти любым аспектом отображения: от цвета и шрифта до сложной сетки и анимации. Не зная CSS, вы не сможете сделать ни один современный сайт, даже если используете конструктор или CMS. Поэтому освоение CSS — второй (после HTML) шаг в веб-разработке, который открывает безграничные возможности для творчества и решения практических задач.
