Веб-разработка

Что такое CSS?

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

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

Современный CSS отвечает за весь макет интерфейса. Flexbox и Grid выстраивают элементы в строки и сетки, медиазапросы подстраивают страницу под мобильные экраны, а переменные и анимации позволяют обойтись без JavaScript там, где раньше он был нужен.

Где применяется

CSS отвечает за всё, что видно на экране после готовой разметки: сетку страницы, адаптацию под телефон и монитор, тёмную тему, состояния кнопок, плавные переходы. В реальных проектах его редко пишут без вспомогательных инструментов: используют Tailwind, Sass или методологию вроде БЭМ, чтобы стили оставались упорядоченными.

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

Пример

Карточки каталога должны стоять в четыре колонки на мониторе, в две на планшете и в одну на телефоне. В современном CSS это делается одним правилом grid с автоматическим подбором количества колонок — без JavaScript и без отдельной мобильной версии.

.catalog {
  display: grid;
  gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}

.card {
  transition: transform 0.2s ease;
}

.card:hover {
  transform: translateY(-4px);
}

Адаптивная сетка без медиазапросов: браузер сам определяет, сколько колонок поместится.

Частые вопросы

Что означает слово «каскадные» в названии CSS?

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

Что учить: Flexbox или Grid?

Оба, потому что они решают разные задачи. Flexbox выстраивает элементы в один ряд или столбец — меню, панель кнопок, строку карточек. Grid работает в двух направлениях и подходит для макета всей страницы. На практике их сочетают в одном макете.

Нужен ли Tailwind, или хватит обычного CSS?

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

Как сделать сайт адаптивным?

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

Обучение фронтенд-разработке в OWU

Освойте HTML, CSS, JavaScript и React на практических курсах с менторами и реальными проектами.

Выбрать курс