Обсудить задачу
Термин · C

CSS3

Язык оформления веб-страниц: цвета, шрифты, отступы, расположение блоков и адаптация под экраны разных размеров.

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

Как выглядит CSS

/* CSS */
.cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

@media (max-width: 768px) {
  .cards {
    grid-template-columns: 1fr;
  }
}

Правило выбирает элементы (здесь — с классом cards) и задает им свойства: три колонки с промежутком 24 пикселя. Медиазапрос @media перестраивает те же карточки в одну колонку на экранах уже 768 пикселей — так страница адаптируется под телефоны.

Главные возможности современного CSS

  • Flexbox и Grid — раскладка блоков в ряд, в колонки и в сетку без старых трюков с таблицами и «плавающими» блоками.
  • Медиазапросы — разные правила для разных экранов, основа адаптивной верстки.
  • Переменные — цвета и размеры фирменного стиля задаются один раз и используются везде.
  • Переходы и анимации — плавные изменения без JavaScript.
  • Веб-шрифты — собственные шрифты бренда вместо системных.

Что значит «каскадные»

К одному элементу могут подходить несколько правил. Браузер решает, какое победит, по специфичности селектора (правило для конкретного элемента сильнее правила для всех абзацев) и по порядку (при равенстве побеждает последнее). Понимание каскада избавляет от главной боли CSS — «почему мой стиль не применяется».

CSS и скорость сайта

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