Чек-лист самопроверки
Разработчику
Аналитику
Тестировщику
Архитектору
Инженеру
Чек-лист самопроверки
- Понимаю ли я, что CSS — это язык описания стилей, а не язык программирования?
- Могу ли я объяснить разницу между HTML (структурой) и CSS (оформлением)?
- Знаю ли я, как подключить CSS-файл к HTML-документу через
<link>? - Умею ли я использовать встроенные стили через атрибут
style? - Понимаю ли я, как работают селекторы по тегу, классу и идентификатору?
- Знаю ли я разницу между классом (
.class) и идентификатором (#id)? - Могу ли я объяснить, что такое каскадность в CSS?
- Понимаю ли я, как работает наследование стилей?
- Знаю ли я, как рассчитывается специфичность селекторов?
- Умею ли я использовать универсальный селектор (
*) и понимаю его последствия? - Знаю ли я, как работают псевдоклассы (
:hover,:focus,:active,:visited)? - Могу ли я использовать псевдоэлементы (
::before,::after)? - Понимаю ли я модель блока (box model): content, padding, border, margin?
- Знаю ли я разницу между
box-sizing: content-boxиborder-box? - Умею ли я центрировать элемент по горизонтали и вертикали?
- Знаю ли я, как работают медиавыражения (
@media) для адаптивного дизайна? - Могу ли я создать мобильный макет с использованием медиазапросов?
- Понимаю ли я разницу между
display: block,inline,inline-block? - Знаю ли я, как работает
display: noneи чем он отличается отvisibility: hidden? - Умею ли я использовать Flexbox для одномерной компоновки?
- Знаю ли я основные свойства Flexbox:
flex-direction,justify-content,align-items,flex-wrap? - Могу ли я создать карточную сетку с помощью Flexbox?
- Понимаю ли я, как работает CSS Grid?
- Знаю ли я свойства Grid:
grid-template-columns,grid-template-rows,grid-gap,grid-area? - Могу ли я создать сложный макет с помощью Grid?
- Умею ли я комбинировать Flexbox и Grid в одном проекте?
- Знаю ли я, как работают относительные (
em,rem,%) и абсолютные (px,pt) единицы измерения? - Понимаю ли я, когда использовать
remвместоem? - Умею ли я создавать и использовать CSS-переменные (кастомные свойства)?
- Знаю ли я, как изменить CSS-переменную через JavaScript?
- Могу ли я реализовать переключение темы (светлая/тёмная) с помощью переменных?
- Понимаю ли я, как работают переходы (
transition)? - Знаю ли я, как создавать анимации с помощью
@keyframes? - Умею ли я оптимизировать анимации для производительности (через
transformиopacity)? - Знаю ли я, как работают псевдоклассы
:nth-child,:first-of-type,:not()? - Могу ли я стилизовать формы: инпуты, кнопки, селекты?
- Понимаю ли я, как стилизовать состояния фокуса для доступности?
- Знаю ли я, как работают
z-indexи контексты наложения (stacking context)? - Умею ли я позиционировать элементы с помощью
position: static, relative, absolute, fixed, sticky? - Понимаю ли я, как работает
floatи почему его не рекомендуется использовать сегодня? - Знаю ли я, как подключать и использовать веб-шрифты через
@font-face? - Могу ли я обеспечить fallback-шрифты на случай недоступности основного?
- Понимаю ли я, как проверять контрастность цветов для доступности?
- Знаю ли я, как использовать
prefers-color-schemeдля автоматического выбора темы? - Умею ли я писать семантически корректные и переиспользуемые стили?
- Знаю ли я методологию BEM и могу ли применять её на практике?
- Понимаю ли я, что такое CSS-модули и зачем они нужны?
- Знаю ли я, как работают scoped-стили во Vue или Svelte?
- Могу ли я отладить стили с помощью DevTools в браузере?
- Умею ли я обосновать выбор CSS-подхода (обычный CSS, препроцессор, CSS-in-JS) для заданного проекта?
См. также
Другие статьи этого же раздела в боковом меню (как на странице «О разделе»). В CSS тег используется как селектор по типу, например p color — black; . Тег используется для подключения внешних ресурсов к HTML-документу. Наиболее распространённое применение — подключение CSS-файлов. Переменные в CSS — это именованные значения, которые хранят информацию для многократного использования в стилях веб-страницы. Эти величины обеспечивают централизованное управление стилями и сокращают… Контентовая модель — это поведение по умолчанию для всех HTML-элементов. В этой модели свойства width и height определяют только размеры контентной области, то есть внутренней части элемента, где… Мы разберём различные примеры типовых элементов интерфейса, в формате HTML и CSS. Можете добавлять и экспериментировать - для удобства, в HTML-части будет создаваться элемент, а в CSS - стиль. Flexbox (Flexible Box Layout) — это модуль CSS, предоставляющий механизм эффективного распределения свободного пространства и выравнивания элементов в контейнере, ориентированном вдоль одной оси.… Как работает CSS, как читать единицы измерения и планировать размещение. Апострофы — не являются частью синтаксиса CSS, но могут встречаться в строках (например, в content). Псевдоклассы изначально записывались с одним двоеточием ( — hover), а псевдоэлементы — также с одним ( — before). В CSS3 был введён чёткий синтаксис — Псевдоклассы — одно двоеточие ( — nth-child, —… transform — это свойство CSS, которое применяет геометрические преобразования к элементу — перемещение, поворот, масштабирование, наклон и другие трансформации. Эти изменения не влияют на поток… Что такое адаптивность, как подстроиться под разные экраны. — Синтаксис — ? — Используется с animation-timeline — view() — Пример — animation-range — entry 0 cover 50 — Позволяет задавать диапазон прогресса анимации в зависимости от видимости.CSS
Подключение и организация CSS-кода
Переменные в CSS
Блочная модель и механизм каскадирования
Типовые элементы интерфейса
Flexbox и CSS Grid
Основные стили в CSS
Синтаксис и пунктуация в CSS
Псевдоклассы и псевдоэлементы
Анимации, переходы и трансформации
Адаптивный и отзывчивый дизайн
Справочник по CSS