Этот курс разбивает основы CSS на понятные и легко усваиваемые разделы. В следующих нескольких модулях вы узнаете, как работают основные аспекты CSS и как эффективно использовать их в своих проектах. Для навигации по модулям используйте панель меню рядом с логотипом «Изучение CSS».
Вы изучите основы CSS, такие как блочная модель, каскадность и специфичность, Flexbox, сетка и z-index. Вы также узнаете о функциях, типах цветов, градиентах, логических свойствах и наследовании, что сделает вас всесторонне развитым фронтенд-разработчиком, готовым к работе с любым пользовательским интерфейсом.
Каждый модуль содержит множество интерактивных демонстраций и тестов для самооценки, которые помогут вам проверить свои знания. Помимо чтения и демонстраций, к каждой теме прилагается подкаст, который поможет вам усвоить материал и расширить свои знания.
Этот курс предназначен как для начинающих, так и для опытных разработчиков CSS. Вы можете пройти серию от начала до конца, чтобы получить общее представление о CSS, или использовать её в качестве справочного материала по конкретным темам стилизации. Для тех, кто только начинает заниматься веб-разработкой, ознакомьтесь с разделом «Изучение HTML» , чтобы узнать, как писать разметку и подключать таблицы стилей.
Вот что вы узнаете:
Модель коробки
Поскольку все, что отображает CSS, представляет собой блочную модель, понимание того, как работает блочная модель CSS, является основой CSS.
Селекторы
Чтобы применить CSS к элементу, необходимо выбрать его. CSS предоставляет несколько способов сделать это, и вы можете изучить их в этом модуле.
Вложенность
Вложенные правила стилей CSS могут сделать ваши таблицы стилей более организованными, удобными для чтения и обслуживания.
Каскад
Иногда к элементу могут применяться два или более конкурирующих CSS-правил. Узнайте, как браузер выбирает, какое из них использовать, и как управлять этим выбором.
Специфичность
В этом модуле более подробно рассматривается специфичность — ключевая часть каскада.
Наследование
Некоторые свойства CSS наследуются, даже если для них не указано значение. Узнайте, как это работает и как использовать это в своих интересах, в этом модуле.
Цвет
Существует несколько способов задать цвет в CSS. В этом модуле рассматриваются наиболее часто используемые значения цвета.
Единицы измерения размера
Узнайте, как изменять размер элементов с помощью CSS, работая с гибкой средой Интернета.
Макет
Обзор различных методов макета, которые можно выбрать при создании компонента или макета страницы.
Флексбокс
Flexbox — это механизм компоновки, предназначенный для размещения групп элементов в одном измерении. Узнайте, как его использовать, в этом модуле.
Сетка
CSS Grid Layout предоставляет систему двухмерной компоновки, управляющую компоновкой строк и столбцов. Откройте для себя все возможности сетки.
Логические свойства
Логические свойства и значения, зависящие от расположения текста, привязаны к его расположению, а не к физической форме экрана. Узнайте, как использовать преимущества этого нового подхода к CSS.
Пользовательские свойства
Пользовательские свойства, или переменные CSS, позволяют вам организовывать и повторно использовать значения в вашем CSS, благодаря чему ваши стили становятся более гибкими и понятными.
Интервал
Узнайте, как выбрать лучший способ размещения элементов с учетом используемого вами метода компоновки и создаваемого вами компонента.
Псевдоэлементы
Псевдоэлемент — это как добавление или нацеливание на дополнительный элемент без необходимости добавления HTML-кода. У них есть множество ролей, и вы можете узнать о них в этом модуле.
Псевдоклассы
Псевдоклассы позволяют применять CSS на основе изменений состояния. Это означает, что ваш дизайн может реагировать на пользовательский ввод, например, на неверный адрес электронной почты.
Границы
Граница служит обрамлением для ваших блоков. Узнайте, как изменить размер, стиль и цвет границ с помощью CSS.
Тени
В CSS есть несколько способов добавить тени к тексту и элементам. Узнайте, как использовать каждый из них и для каких задач он предназначен.
Фокус
Поймите, насколько важна фокусировка в ваших веб-приложениях. Вы узнаете, как управлять фокусировкой и как обеспечить удобство навигации по странице как для пользователей мыши, так и для пользователей клавиатуры.
Курсоры и указатели
Курсор — это важный способ для пользователей понять, с чем они взаимодействуют. В этом модуле вы узнаете, как стилизовать курсоры в зависимости от конкретных условий.
Z-индекс и контексты стекирования
Узнайте, как контролировать порядок наложения элементов друг на друга с помощью z-index и контекста наложения.
Позиционирование якоря
Позиционирование якорей CSS позволяет декларативно позиционировать элемент относительно другого элемента.
Всплывающее окно и диалог
Всплывающее окно — это любой элемент с атрибутом popover, который полезен для широкого спектра интерактивных шаблонов, включая подсказки, оповещения, тосты и многое другое.
Функции
CSS содержит ряд встроенных функций. Узнайте о некоторых ключевых функциях и о том, как их использовать.
Контуры, фигуры, обрезка и маскирование
Контуры, формы, обрезка и маскирование дают разработчикам возможность визуализировать сложные фигуры в CSS с помощью различных функций, которые могут создавать незабываемые впечатления для ваших пользователей.
Градиенты
В этом модуле вы узнаете, как использовать различные типы градиентов, доступные в CSS. Градиенты позволяют создавать множество полезных эффектов без необходимости использования графических приложений для создания изображений.
Анимации
Анимация — отличный способ подчеркнуть интерактивные элементы и сделать ваши проекты интереснее и увлекательнее. Узнайте, как добавлять и управлять анимационными эффектами с помощью CSS.
Фильтры
Фильтры в CSS позволяют применять эффекты, которые, казалось бы, возможны только в графических приложениях. В этом модуле вы узнаете о доступных возможностях.
Режимы наложения
Создавайте композиционные эффекты, смешивая два или более слоев, и научитесь изолировать изображение с белым фоном в этом модуле, посвященном режимам наложения.
Списки
Структурно список состоит из контейнера, заполненного элементами списка. В этом модуле вы узнаете, как оформить все элементы списка.
Счетчики
CSS предоставляет несколько способов управления счётчиками в списке для различных вариантов использования. В этом модуле вы узнаете, как управлять счётчиками в списке.
Переходы
Узнайте, как определять переходы между состояниями элемента. Используйте переходы для улучшения пользовательского опыта, обеспечивая визуальную обратную связь при взаимодействии с пользователем.
Просмотр переходов для SPA
Просмотр переходов позволяет вам продемонстрировать непрерывность или контекст между страницами вашего SPA.
Переполнение
Переполнение — это то, как вы справляетесь с контентом, который не помещается в заданный родительский размер. В этом модуле вы научитесь мыслить нестандартно и научитесь оформлять переходящий контент.
Фоны
Узнайте, как стилизовать фон блоков с помощью CSS.
Текст и типографика
Узнайте, как стилизовать текст в Интернете.
Контейнерные запросы
В отличие от медиазапросов, контейнерные запросы позволяют вносить более конкретные изменения в элементы на основе размера и состояния их предшественников или контейнеров.
Заключение и дальнейшие шаги
Дополнительные ресурсы, которые помогут вам предпринять следующие шаги.
Итак, вы готовы изучать CSS? Давайте начнём .