Skip to content

2.2. CSS

Jump to bottom
MJ-learning edited this page Aug 5, 2026 · 1 revision

Основы CSS:

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

  2. Какие существуют способы подключения CSS к HTML?

  • Внешний файл: <link rel="stylesheet" href="styles.css">. Рекомендуемый способ, позволяет переиспользовать стили на многих страницах.
  • Внутренние стили: Блок <style> внутри <head>. Применяется к одной странице.
  • Инлайн-стили: Атрибут style у конкретного HTML-элемента. Имеет наивысший приоритет, но плох для поддержки.

  1. Что такое CSS-правило? Из чего оно состоит? CSS-правило состоит из селектора (указывает, к какому элементу применить стили) и блока объявлений в фигурных скобках {}. Блок содержит одно или несколько свойств с их значениями, разделенными точкой с запятой. Например: p { color: red; }.

  2. Что такое CSS-селекторы и какие они бывают? Селекторы — это шаблоны, используемые для выбора элементов для стилизации. Основные типы:

  • Элемент: p, div
  • Класс: .my-class
  • ID: #unique-id
  • Атрибут: [type="text"]
  • Псевдокласс: :hover, :nth-child()
  • Псевдоэлемент: ::before, ::after
  • Комбинированные: div p (все p внутри div), div > p (прямые потомки).
  1. Что такое специфичность (specificity) в CSS и как она рассчитывается? Это алгоритм, который определяет, какое правило применять, если несколько селекторов нацелены на один элемент. Вес рассчитывается как четырехзначное число:
  • Инлайн-стили: 1,0,0,0 — наивысший приоритет.
  • ID-селекторы: 0,1,0,0
  • Классы, псевдоклассы, атрибуты: 0,0,1,0
  • Элементы и псевдоэлементы: 0,0,0,1 Побеждает селектор с большим весом. Если вес равен, применяется последний объявленный.

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

  2. Что такое наследование (inheritance) в CSS? Какие свойства наследуются? Наследование — это механизм, при котором некоторые свойства родительского элемента передаются его потомкам. В основном наследуются свойства, связанные с текстом (color, font-family, text-align). Свойства макета (width, margin, padding) не наследуются.

Боксовая модель:

  1. Что такое CSS-боксовая модель и из чего она состоит? Боксовая модель — это фундаментальная концепция, описывающая каждый HTML-элемент как прямоугольный блок. Она состоит из (изнутри наружу):
  • Content: Содержимое (текст, изображения).
  • Padding: Прозрачная область вокруг содержимого.
  • Border: Граница вокруг padding.
  • Margin: Внешний отступ, создающий пространство между блокам
  1. В чем разница между content-box и border-box?
  • content-box (по умолчанию): Свойства width/height задают размер только содержимого. Добавление padding или border увеличивает общий размер блока.
  • border-box: Свойства width/height включают содержимое, padding и border. Это делает размеры блока более предсказуемыми и удобными для верстки. Это глобальное правило часто используют, чтобы упростить работу со всеми элементами.

  1. В чем разница между margin и padding? margin — это внешний отступ, который создает пространство между текущим и соседними элементами. padding — это внутренний отступ, который создает пространство внутри элемента между его содержимым и границей. margin может быть отрицательным, а padding — нет.

  2. Что такое схлопывание (collapse) внешних отступов? Это ситуация, когда вертикальные margin соседних блоков не складываются, а перекрываются, и результирующий отступ равен максимальному из них. Это поведение характерно для блочных элементов в обычном потоке документа.

Виды отображения и позиционирование:

  1. В чем разница между block, inline и inline-block?
  • block: Элемент занимает всю доступную ширину, начинается с новой строки и может содержать другие блоки.
  • inline: Элемент занимает столько места, сколько необходимо для его содержимого, не переносит строку. На него нельзя применить width/height и вертикальные margin/padding.
  • inline-block: Элемент ведет себя как строчный (находится на одной строке с другими), но при этом у него работают свойства width/height и вертикальные отступы.
  1. Опишите разницу между relative, absolute, fixed и sticky.
  • relative: Позиционируется относительно своего нормального места. Другие элементы не сдвигаются, но вы можете использовать top, left и т.д., чтобы сместить его.
  • absolute: Элемент удаляется из потока документа и позиционируется относительно ближайшего родителя с позиционированием (не static). Если такого нет, то относительно окна браузера.
  • fixed: Позиционируется относительно окна браузера (viewport). Даже при прокрутке страницы остается на месте.
  • sticky: Это гибрид relative и fixed. Элемент ведет себя как relative, пока не достигнет заданного порога (top, left и т.д.), после чего "прилипает" к окну.

  1. Как работает свойство z-index и что такое контекст наложения? z-index управляет вертикальным порядком позиционированных элементов. Элемент с большим z-index будет перекрывать элемент с меньшим. Он работает только на позиционированных элементах. Контекст наложения — это иерархия, в которой элементы группируются; z-index сравнивается только внутри одного контекста.

  2. Как можно центрировать элемент горизонтально и вертикально?

  • Горизонтально: margin: 0 auto; для блочного элемента с заданной шириной.
  • Вертикально и горизонтально (Flexbox): Родитель display: flex; justify-content: center; align-items: center;.
  • Вертикально и горизонтально (Grid): Родитель display: grid; place-items: center;.
  • Через абсолютное позиционирование: position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);.

Стилизация и свойства:

  1. Как задать цвет фона и текста? Используются свойства background-color и color. Цвет можно указать с помощью названия (red), HEX (#FF0000), RGB (rgb(255,0,0)) или HSL (hsl(0, 100%, 50%)).

  2. Как задать размер и стиль шрифта? Используются свойства font-family (тип шрифта), font-size (размер), font-weight (жирность), font-style (курсив).

  3. В чем разница между em и rem единицами измерения?

  • em — относительная единица, равная размеру шрифта родительского элемента. Может вызывать каскадный эффект ("снежный ком") во вложенных элементах.
  • rem (root em) — относительная единица, равная размеру шрифта корневого элемента . Это делает размеры более предсказуемыми и управляемыми, поэтому rem предпочтительнее для масштабирования.
  1. Как сделать текст жирным или курсивом?
  • Жирный: font-weight: bold; или font-weight: 700;.
  • Курсив: font-style: italic; или font-style: oblique;.
  1. Что такое псевдоклассы и псевдоэлементы?
  • Псевдокласс (:) определяет состояние элемента. Например, :hover — при наведении мыши, :nth-child(2) — второй дочерний элемент.
  • Псевдоэлемент (::) стилизует часть элемента. Например, ::before и ::after создают виртуальные элементы внутри контейнера, а ::first-line — первую строку текста.
  1. Как правильно задать градиентный фон? Используйте функцию linear-gradient() или radial-gradient() для свойства background-image. Например:
image
  1. В чем разница между opacity и rgba()?
  • opacity: 0.5; делает полупрозрачным весь элемент вместе со всем его содержимым (текст, дочерние элементы).
  • background-color: rgba(0,0,0,0.5); делает полупрозрачным только фон элемента, оставляя текст и дочерние элементы непрозрачными.
  1. Как задать тени для текста и элементов?
  • Тень для текста: text-shadow: 2px 2px 4px rgba(0,0,0,0.5);
  • Тень для блока: box-shadow: 0 4px 6px rgba(0,0,0,0.1);

  1. Что такое border-radius и как сделать круг? border-radius скругляет углы элемента. Чтобы сделать круг, нужно задать border-radius: 50%; для элемента с одинаковыми width и height.

  2. Как создать плавный переход (transition)? Использовать свойство transition для анимации изменения свойств:

image

Макеты (Layout):

  1. Что такое Flexbox и для чего он используется? CSS Flexible Box Layout (Flexbox) — это одномерная модель компоновки, предназначенная для распределения пространства вдоль одной оси (строки или колонки). Он упрощает выравнивание, распределение и масштабирование элементов внутри кон.

  2. Что такое Grid и для чего он используется? CSS Grid Layout — это двумерная модель компоновки, позволяющая управлять как строками, так и колонками. Она идеально подходит для создания сложных макетов страниц, где элементы должны быть размещены в виде сетки.

  3. Когда использовать Flexbox, а когда Grid? Используйте Flexbox для одномерных макетов, где элементы располагаются по одной линии (например, навигационная панель, кнопки в строке). Используйте CSS Grid для двумерных макетов, где вы контролируете и строки, и колонки (например, общий каркас страницы, доска с карточками).

  4. Как сделать макет адаптивным? Адаптивный дизайн строится на:

  • Гибкой сетке: Использование относительных единиц (%, vw, vh).
  • Гибких медиа: max-width: 100%; для изображений.
  • CSS Media Queries: @media (max-width: 768px) { ... }, чтобы применять разные стили в зависимости от ширины экрана.
  • Правильном viewport: <meta name="viewport" content="width=device-width, initial-scale=1.0">.
  1. Как сделать изображение адаптивным?
  • Самый простой способ: img { max-width: 100%; height: auto; }. Изображение будет масштабироваться в пределах ширины родителя.
  • Для более продвинутого контроля используйте srcset и <picture> в HTML, чтобы браузер мог выбрать наиболее подходящее изображение по разрешению и размеру экрана.
  1. Как скрыть элемент, но чтобы он оставался доступным для скринридеров? Не используйте display: none; или visibility: hidden;, так как они полностью скрывают элемент от вспомогательных технологий. Используйте следующий CSS "визуального скрытия":
image

  1. Что такое CSS-препроцессоры и для чего они нужны? Препроцессоры (Sass, LESS, Stylus) — это инструменты, которые расширяют возможности CSS. Они позволяют использовать переменные, вложенность, миксины (mixins), функции и т.д., делая код более чистым, поддерживаемым и масштабируемым. Затем они компилируются в обычный CSS.

  2. В чем преимущества CSS-переменных (custom properties)? CSS-переменные (--main-color: #3498db;) позволяют хранить значения и переиспользовать их по всему документу. Главные преимущества:

  • Легкая смена темы: Можно переопределить переменные в медиа-запросе или при добавлении класса (например, для темной темы).
  • Динамическое изменение через JS: element.style.setProperty('--main-color', 'red').

  1. Что такое CSS-методология БЭМ (BEM)? BEM (Block, Element, Modifier) — это популярная методология именования классов, которая делает код понятным и самодокументируемым. Имена строятся по схеме: .block__element--modifier. Например, .button__icon--large.

  2. Как влияет CSS на производительность страницы? Хотя сам CSS не медленный, его неэффективное использование может замедлить рендеринг. "Тяжелые" селекторы, огромные файлы, особенно блокирующие рендеринг, и слишком много правил могут отсрочить отображение страницы.

Анимации и трансформации:

  1. В чем разница между transition и animation?
  • transition — для плавных переходов между двумя состояниями (например, при наведении). Требуется триггер (hover, click).
  • animation — для более сложных последовательностей с ключевыми кадрами (@keyframes). Может запускаться автоматически и повторяться.
  1. Как использовать @keyframes? @keyframes определяет последовательность состояний анимации:
image
  1. Что такое transform и какие трансформации бывают? transform позволяет изменять визуальное представление элемента. Основные функции:
  • translate(x, y) — перемещение
  • rotate(deg) — поворот
  • scale(x) — масштабирование
  • skew(deg) — наклон
  1. В чем разница между transform: translate(-50%, -50%) и другими способами центрирования? Это мощный способ центрирования, особенно для абсолютно позиционированных элементов. Он сдвигает элемент на 50% от его собственной ширины и высоты, не требуя знания размеров родителя. Работает вместе с position: absolute; top: 50%; left: 50%;.

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

  1. Что такое медиа-запросы (Media Queries) и как их использовать? Медиа-запросы позволяют применять CSS-стили только при определенных условиях (например, ширина экрана). Синтаксис:
image
  1. Какой самый частый брейкпоинт для мобильных устройств? Нет "правильного" единого брейкпоинта. Однако часто используются:
  • Мобильные: до 768px
  • Планшеты: 768px - 1024px
  • Десктоп: > `1024px
  1. Как использовать min-width и max-width в медиа-запросах?
  • max-width применяет стили, если ширина экрана меньше или равна значению.
  • min-width применяет стили, если ширина экрана больше или равна значению.
  1. Как проверить ориентацию экрана через CSS? Используйте медиа-запрос orientation:
image

Практические вопросы и нюансы:

  1. Что такое CSS-спрайты (sprites) и зачем они нужны? CSS-спрайты — это объединение множества мелких изображений (иконок) в одно большое. Это уменьшает количество HTTP-запросов к серверу, ускоряя загрузку страницы. Каждая иконка отображается с помощью background-image и background-position.

  2. Как сделать так, чтобы текст не выходил за границы контейнера? Использовать комбинацию свойств:

image
  1. Как сделать "адаптивный" шрифт, который меняется в зависимости от размера экрана? Используйте clamp(). Это задает минимальный, оптимальный и максимальный размер шрифта:
image

  1. Что такое will-change и для чего он нужен? will-change подсказывает браузеру, что свойство элемента будет меняться в будущем. Это позволяет браузеру оптимизировать рендеринг заранее. Используйте только для критических элементов, чтобы не расходовать ресурсы.

  2. Как исправить проблему с 100vh на мобильных устройствах? В мобильных браузерах vh не учитывает панели навигации браузера, что может вызвать проблемы. Решение — использовать dvh (dynamic viewport height):

image

Доступность и CSS:

  1. Как сделать так, чтобы пользователи с ограниченными возможностями могли пользоваться сайтом? CSS помогает:
  • Используйте достаточный контраст между текстом и фоном (минимум 4.5:1).
  • Не полагайтесь только на цвет для передачи информации (используйте иконки, подписи).
  • Сделайте фокус видимым (не убирайте outline).
  • Используйте prefers-reduced-motion для людей с вестибулярными нарушениями.
  1. Как отключить анимацию для людей с вестибулярными нарушениями? Использовать медиа-запрос prefers-reduced-motion:
image
  1. Как проверить контрастность цветов? Использовать:
  • Инструменты разработчика Chrome (вкладка "Стили" → "Accessibility").
  • Онлайн-инструменты (WebAIM Contrast Checker).
  • Плагины для VS Code (Axe Accessibility Linter).

Продвинутые концепции:

  1. Что такое CSS-модули (CSS Modules)? CSS Modules — это подход, при котором CSS-классы изолированы локально в рамках одного компонента. Имена классов генерируются автоматически, предотвращая конфликты имен. Популярны в React и Vue.

  2. Что такое CSS-in-JS? Это подход, при котором стили пишутся прямо в JavaScript (например, в React с библиотекой styled-components). Стили инкапсулируются внутри компонента, что упрощает динамическую стилизацию.

3.Что такое критический CSS (Critical CSS)? Критический CSS — это минимальный набор стилей, необходимых для отображения верхней части страницы (above-the-fold) при первой загрузке. Он встраивается прямо в HTML (<style>), чтобы избежать задержек при рендеринге. Остальной CSS загружается асинхронно.

  1. Что такое ресет CSS и нормализация?
  • Reset CSS сбрасывает все стили браузера по умолчанию (например, margin: 0 для всех элементов).
  • `Normalize.css — более щадящий подход, который сохраняет полезные стили, но делает их единообразными во всех браузерах.
  1. Как предотвратить мерцание текста при загрузке веб-шрифтов? Используйте свойство font-display:
image

CSS-инструменты и оптимизация:

  1. Как минифицировать CSS? Используйте инструменты сборки (Webpack, Vite, Gulp) с плагинами для минификации (например, cssnano). Вручную можно использовать онлайн-инструменты (CSS Minifier).

  2. Что такое CSS-линтеры и зачем они нужны? Линтеры (Stylelint) анализируют CSS-код на наличие ошибок, нарушений правил и несоответствий стилю кодирования. Они помогают поддерживать качество и единообразие кода в команде.

  3. Как отлаживать CSS в браузере?

  • Используйте Chrome DevTools (F12) → вкладка "Elements" → "Styles" для просмотра и редактирования стилей в реальном времени.
  • Можете добавлять outline: 1px solid red; для визуализации границ блоков.
  • Используйте вкладку "Computed" для просмотра итоговых значений стилей.
  1. Что такое Chrome DevTools и как им пользоваться для CSS? Это встроенный инструмент в Google Chrome. Для CSS он позволяет:
  • Просматривать и редактировать стили.
  • Включать/выключать свойства.
  • Смотреть специфичность и наследование.
  • Имитировать устройства для проверки адаптивности.
  • Профилировать производительность рендеринга.

Сравнения и выбор:

  1. Что лучше: px, em, или rem?
  • px — для фиксированных размеров (границы, тени).
  • rem — для масштабируемых размеров (шрифты, отступы).
  • em — для размеров, зависящих от родительского шрифта (используйте осторожно, редко).
  1. В чем разница между display: none и visibility: hidden?
  • display: none; полностью удаляет элемент из потока документа (он не занимает места, как будто его нет).
  • visibility: hidden; скрывает элемент визуально, но он продолжает занимать место в макете.

  1. Какой подход лучше для центрирования в 2026 году? Flexbox и Grid — это современные и мощные инструменты. Используйте display: flex; justify-content: center; align-items: center; или display: grid; place-items: center;. Это более читаемо и надежно, чем старые хитрости.

  2. Что такое CSS-архитектуры? Это системы и методологии для организации CSS-кода в больших проектах. Основные: OOCSS, SMACSS, ITCSS, Atomic CSS. Все они направлены на улучшение переиспользуемости и поддержки кода.

  3. Какая разница между inline CSS, internal CSS, и external CSS?

  • Inline CSS: Применяется только к одному элементу, максимальный приоритет, но плохо для поддержки.
  • Internal CSS: В секции <head>, действует на всю страницу. Подходит для одного документа.
  • External CSS: В отдельном файле, подключается через <link>. Рекомендуемый способ для масштабируемых проектов.

Новые возможности CSS:

  1. Что такое CSS Container Queries? Контейнерные запросы позволяют стилизовать элементы на основе размера их родительского контейнера, а не размера всего окна браузера. Это делает компоненты более переиспользуемыми и независимыми.

  2. Что такое CSS :has() селектор? Псевдокласс :has() позволяет выбрать родительский элемент, который содержит определенный дочерний элемент. Например, div:has(p) выберет все div, которые содержат p. Это мощный инструмент для создания сложных стилей без JavaScript.

  3. Что такое CSS-сетки с использованием subgrid? subgrid позволяет элементу сетки наследовать настройки строк или колонок от родительской сетки, обеспечивая идеальное выравнивание вложенных элементов. Это упрощает создание сложных, идеально выровненных макетов.

  4. Что такое CSS Nesting? Вложенность позволяет писать CSS-правила иерархически, повторяя структуру HTML. Например:

image

Это делает код более компактным и читаемым, особенно если вы привыкли к Sass.

  1. Какие новые цвета появились в CSS?
  • color: color(display-p3 1 0.5 0); — цвет в пространстве Display P3 (более широкая гамма).
  • color: oklch(70% 0.2 30); — более предсказуемый цветовой формат для смешивания.
  • color: lab(50% 40 30); — цвет в пространстве Lab.

Clone this wiki locally