Рассказываем о языке, благодаря которому интернет стал красивым

[Ryancoolround]

Основы CSS — Каскадные таблицы стилей

CSS (Cascading Style Sheets) — это язык описания внешнего вида документа, написанного с использованием HTML или XML. Именно благодаря CSS мы имеем визуально привлекательные сайты: с оформленными кнопками, градиентами, анимациями, адаптивной версткой и динамическими эффектами. Если HTML — это скелет страницы, то CSS — её облик.

Что делает CSS?

CSS определяет:

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

Простой пример

До CSS:
HTML без стилей выглядит как сырой текст с базовой структурой.

После CSS:
Элементы получают оформление: шапка сайта — с градиентным фоном, кнопки — со скруглёнными краями и эффектом наведения, блоки — с тенями и разметкой по сетке. Разница — колоссальная.

Базовый синтаксис CSS

CSS можно подключать как во внешнем файле (style.css), так и писать прямо в <style> внутри HTML-документа (что чаще всего используется для тестирования). Синтаксис выглядит следующим образом:

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

Пример:

section {
  color: red;
}

• селектор — элемент, к которому применяется стиль (например, div, p, .class, #id);
• свойство — характеристика (например, color, font-size, margin);
• значение — конкретная настройка свойства (red, 16px, auto и т.д.).

Адаптивность: медиазапросы

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

@media (max-width: 768px) {
  section {
    color: red;
  }
}

Это основа адаптивной верстки: мобильные и десктопные версии сайта в одном коде.

Встроенные стили

CSS можно применять и напрямую к тегам:

<section style="color: red;"></section>

Но использовать такой подход на боевых проектах не рекомендуется. Он затрудняет сопровождение кода. Гораздо правильнее подключать отдельный CSS-файл:

<link rel="stylesheet" href="style.css">

Расширенные возможности CSS

CSS способен на большее, чем просто цвет текста. Например:

Работа с SVG:

svg {
  width: 120px;
  height: 68px;
  fill: green;
}

Использование изображений как фон:

.block {
  background-image: url("image.svg");
}

Добавление текста вне HTML:

.block::after {
  content: "Дополнительный текст";
}

Псевдоэлементы ::before и ::after:

Позволяют визуально дополнить элементы интерфейса, не внося изменений в HTML-структуру.

Анимации и фигуры

CSS может рисовать фигуры (круги, треугольники), применять анимации, создавать интерактивные интерфейсы:

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.element {
  animation: fadeIn 2s ease-in;
}

Препроцессоры: LESS, SASS

Базовый CSS не поддерживает переменные, вложенность, циклы. Для повышения гибкости используются препроцессоры:

• LESS — основан на JavaScript;
• SASS — один из самых мощных инструментов;
• Stylus — гибкий синтаксис.

Пример кода на LESS:

@main-color: #333;

body {
  color: @main-color;
}

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

CSS в JavaScript-фреймворках

Многие современные фреймворки используют концепцию CSS-in-JS. Например, в React есть styled-components, где можно прямо в JS-файле описывать стили:

const Button = styled.button`
  background: #222;
  color: #fff;
`;

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

Макетирование с помощью Flex и Grid

Современный CSS предлагает две мощные системы компоновки:

• Flexbox — для линейного позиционирования (в строку или колонку);
• CSS Grid — для размещения элементов по двумерной сетке.

Пример Flex:

.container {
  display: flex;
  justify-content: space-between;
}

Пример Grid:

.grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

С их помощью можно реализовать любой макет — от простого блога до сложного веб-приложения.

Как начать?

Создайте файл style.css и подключите его к вашему index.html:

<link rel="stylesheet" href="style.css">

Используйте редактор кода с поддержкой CSS: VS Code, Sublime Text, WebStorm.

Используйте документацию:

• https://developer.mozilla.org/ru/docs/Web/CSS
• https://css-tricks.com

Изучайте шаблоны и макеты на сайтах вроде https://codepen.io и https://freefrontend.com — это ускорит понимание.

На заметку

Старые методы вроде style>body{background: black} уже неактуальны, их используют только для демонстраций или устаревших проектов.

Градиенты текста — пример современной стилизации:

<span style="font-weight: bold; background: linear-gradient(to right, #ff0000, #fbff00); -webkit-background-clip: text; -webkit-text-fill-color: transparent;">СТИЛИЗОВАННЫЙ ТЕКСТ</span>

Заключение

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

Глубокое понимание CSS — путь к созданию действительно качественных, эстетичных и удобных сайтов. Это не просто «оформление», это язык взаимодействия с пользователем на уровне визуального восприятия.