Шаг 1
Как сделать фон картинкой и прозрачность в CSS
Задача этой страницы — помочь читателю поставить фоновую картинку, затемнить ее или сделать полупрозрачный слой без потери читаемости текста. В таких темах легко уйти в…
Учебное направление
CSS
Большой справочник CSS: подключение стилей к HTML, цвета, шрифты, отступы, Flexbox, Grid, адаптивная верстка, анимации, формы и CSS-фреймворки. Материалы выстроены от первого знакомства до практических задач и следующего уровня.
Быстрый выбор
С чего начать CSS
Выберите первую задачу и переходите к инструкции.
Как сделать фон картинкой и прозрачность в CSS
Задача этой страницы — помочь читателю поставить фоновую картинку, затемнить ее или сделать полупрозрачный слой без потери читаемости текста. В таких темах…
Как сделать сайт с нуля: первая страница на HTML и CSS
Первую HTML/CSS-страницу лучше начинать не с дизайна, а с цели. Кто откроет страницу, что он должен понять и какое действие сделать дальше?…
CSS-фреймворки: что это, какие бывают и какой выбрать для сайта
CSS-фреймворк помогает быстрее собрать интерфейс: дает готовые стили, сетки, компоненты, утилиты или дизайн-токены. В этом обзоре разберем Bootstrap, Tailwind CSS, Bulma, Foundation,…
Flexbox CSS — полное руководство с примерами
Flexbox (Flexible Box Layout) — система одномерной раскладки в CSS. С её помощью выравнивают элементы по строке или колонке, распределяют пространство и…
CSS ::before и ::after — псевдоэлементы
::before и ::after создают виртуальные дочерние элементы — до и после содержимого. Используются для декоративных элементов, иконок, линий, анимаций — без добавления…
CSS box-shadow — тени для элементов
box-shadow — CSS-свойство для добавления тени к блочным элементам. С его помощью создают эффект глубины, выделяют карточки, делают кнопки «выпуклыми» и реализуют…
Маршрут обучения
Как двигаться по порядку
Шаг 2
Как сделать сайт с нуля: первая страница на HTML и CSS
Первую HTML/CSS-страницу лучше начинать не с дизайна, а с цели. Кто откроет страницу, что он должен понять и какое действие сделать дальше? Если ответа нет,…
Шаг 3
CSS-фреймворки: что это, какие бывают и какой выбрать для сайта
CSS-фреймворк помогает быстрее собрать интерфейс: дает готовые стили, сетки, компоненты, утилиты или дизайн-токены. В этом обзоре разберем Bootstrap, Tailwind CSS, Bulma, Foundation, UIkit, Pico.css, Pure.css,…
Шаг 4
Flexbox CSS — полное руководство с примерами
Flexbox (Flexible Box Layout) — система одномерной раскладки в CSS. С её помощью выравнивают элементы по строке или колонке, распределяют пространство и строят любые UI-компоненты…
Шаг 5
CSS ::before и ::after — псевдоэлементы
::before и ::after создают виртуальные дочерние элементы — до и после содержимого. Используются для декоративных элементов, иконок, линий, анимаций — без добавления лишнего HTML. Основы…
Учебные дорожки
Маршруты по теме «CSS»
Сгруппированные материалы для последовательного изучения.
Маршрут 1
База и настройка
Маршрут 2
Рабочие задачи
Маршрут 3
Следующий уровень
Самопроверка
Как понять, что можно идти дальше
- Вы можете повторить основной пример без пропущенных шагов
- Понимаете назначение ключевых команд и параметров
- Умеете проверить результат и прочитать сообщение об ошибке
- Можете изменить пример под собственную задачу
Материалы рубрики
Новые материалы по теме «CSS»
Как сделать фон картинкой и прозрачность в CSS
Задача этой страницы — помочь читателю поставить фоновую картинку, затемнить ее или сделать полупрозрачный слой без потери читаемости текста. В таких темах легко уйти в общие советы: выбрать платформу, поставить красивый блок, нажать…
Как сделать сайт с нуля: первая страница на HTML и CSS
Первую HTML/CSS-страницу лучше начинать не с дизайна, а с цели. Кто откроет страницу, что он должен понять и какое действие сделать дальше? Если ответа нет, сайт легко превращается в набор красивых блоков без…
CSS-фреймворки: что это, какие бывают и какой выбрать для сайта
CSS-фреймворк помогает быстрее собрать интерфейс: дает готовые стили, сетки, компоненты, утилиты или дизайн-токены. В этом обзоре разберем Bootstrap, Tailwind CSS, Bulma, Foundation, UIkit, Pico.css, Pure.css, daisyUI, Open Props и другие варианты, а в…
Flexbox CSS — полное руководство с примерами
Flexbox (Flexible Box Layout) — система одномерной раскладки в CSS. С её помощью выравнивают элементы по строке или колонке, распределяют пространство и строят любые UI-компоненты — без float, без таблиц, без лишнего кода.…
CSS ::before и ::after — псевдоэлементы
::before и ::after создают виртуальные дочерние элементы — до и после содержимого. Используются для декоративных элементов, иконок, линий, анимаций — без добавления лишнего HTML. Основы — как работают ::before и ::after content —…
CSS box-shadow — тени для элементов
box-shadow — CSS-свойство для добавления тени к блочным элементам. С его помощью создают эффект глубины, выделяют карточки, делают кнопки «выпуклыми» и реализуют neon-glow эффекты — всё без изображений. Синтаксис box-shadow — разбор по…
Что такое CSS — язык стилей для веб-страниц
CSS (Cascading Style Sheets — каскадные таблицы стилей) — это язык описания внешнего вида HTML-документов. HTML создаёт структуру страницы, CSS управляет её оформлением: цветами, шрифтами, отступами, расположением элементов и анимациями. Что такое CSS…
CSS animation и @keyframes — анимации без JavaScript
CSS animation позволяет создавать анимации без JavaScript. Принцип: описываешь ключевые кадры через @keyframes, потом применяешь анимацию к элементу. Загрузчики, плавное появление, пульсация, встряска — всё это чистый CSS. @keyframes — описание анимации @keyframes…
CSS background — фон элемента: цвет, картинка, позиция
background в CSS управляет фоном элемента: цветом, картинкой, градиентом, позицией и размером. Каждый аспект — отдельное свойство, или всё сразу через shorthand. Разбираем полный арсенал с примерами. background-color — цвет фона Самое простое…
CSS border — рамки, скругление и стили
border в CSS — рамка вокруг элемента. Задаёт толщину, стиль линии и цвет. border-radius делает углы скруглёнными. Разбираем все варианты от простой рамки до карточек с цветными акцентами. Синтаксис border — shorthand и…