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