Учим CSS3¶
В этом курсе основы CSS разбиты на легко усваиваемые и понятные фрагменты. В течение следующих нескольких модулей вы узнаете, как работают основные аспекты CSS и как эффективно использовать их в своих проектах.
Вы познакомитесь с такими основами CSS, как блочная модель, каскад и специфика, flexbox, сетка и z-index. Наряду с этими основами вы узнаете о функциях, типах цветов, градиентах, логических свойствах и наследовании, что позволит вам стать всесторонне развитым разработчиком, готовым к работе над любым пользовательским интерфейсом.
Каждый модуль содержит интерактивные демонстрации. Помимо чтения и демонстраций, к каждой теме прилагается эпизод подкаста — еще один способ обучения и расширения знаний.
Этот курс предназначен как для начинающих, так и для опытных разработчиков CSS. Вы можете пройти весь курс от начала до конца, чтобы получить общее представление о CSS сверху донизу, или использовать его в качестве справочника по конкретным темам стилизации. Для тех, кто только начинает заниматься веб-разработкой, обратитесь к Учебнику HTML5, чтобы узнать о том, как писать разметку и связывать таблицы стилей.
Вот что вы узнаете:
-
Блочная модель
Все, что отображается с помощью CSS, представляет собой блок. Поэтому понимание того, как работает блочная модель CSS, является одной из основ CSS.
-
Селекторы
Чтобы применить CSS к элементу, необходимо его выбрать. CSS предоставляет несколько различных способов сделать это, и в этом модуле вы можете изучить их
-
Каскад
Иногда к элементу могут применяться два или более конкурирующих CSS-правил. В этом модуле вы узнаете, как браузер выбирает, какое из них использовать, и как управлять этим выбором
-
Специфичность
В данном модуле более подробно рассматривается специфичность, являющаяся ключевой частью каскада.
-
Наследование
Некоторые свойства CSS наследуются, если для них не задано значение. В этом модуле вы узнаете, как это работает и как использовать это в своих интересах.
-
Цвет
Существует несколько различных способов задания цвета в CSS. В этом модуле мы рассмотрим наиболее часто используемые значения цвета.
-
Единицы измерения
В этом модуле вы узнаете, как определять размеры элементов с помощью CSS, работая с гибкой средой Интернета.
-
Разметка
Обзор различных методов компоновки, которые можно выбрать при создании компонент или макета страницы.
-
Flexbox
Flexbox — это механизм верстки, предназначенный для размещения групп элементов в одном измерении. В этом модуле вы узнаете, как его использовать.
-
Grid
CSS Grid Layout представляет собой двухмерную систему верстки, управляющую расположением в строках и столбцах. В этом модуле вы узнаете обо всем, что может предложить сетка.
-
Логические свойства
Логические, относительные для потока свойства и значения связаны с потоком текста, а не с физической формой экрана. Узнайте, как использовать преимущества этого нового подхода к CSS.
-
Интервалы
Узнайте, как выбрать оптимальный способ расстановки элементов с учетом используемого метода компоновки и компонента, который необходимо собрать.
-
Псевдоэлементы
Псевдоэлемент — это как добавление или нацеливание дополнительного элемента без необходимости добавлять дополнительный HTML. Они выполняют различные функции, и вы можете узнать о них в этом модуле.
-
Псевдоклассы
Псевдоклассы позволяют применять CSS на основе изменения состояния. Это означает, что ваш дизайн может реагировать на вводимые пользователем данные, например, на неправильный адрес электронной почты.
-
Рамки
Граница служит обрамлением для блоков. В этом модуле вы узнаете, как изменить размер, стиль и цвет границ с помощью CSS.
-
Тени
Существует несколько способов добавления теней к тексту и элементам в CSS. В этом модуле вы узнаете, как использовать каждый из этих способов и для каких задач они предназначены.
-
Фокус
Поймите важность фокуса в веб-приложениях. Вы узнаете, как управлять фокусом и как сделать так, чтобы путь по странице был удобен как для людей, пользующихся мышью, так и для тех, кто использует клавиатуру для навигации.
-
Z-индекс
В этом модуле вы узнаете, как управлять порядком расположения объектов друг над другом с помощью z-index и контекста укладки.
-
Функции
CSS обладает целым рядом встроенных функций. В этом модуле вы узнаете о некоторых ключевых функциях и о том, как их использовать.
-
Градиенты
В этом модуле вы узнаете, как использовать различные типы градиентов, доступные в CSS. Градиенты можно использовать для создания множества полезных эффектов, не прибегая к созданию изображения с помощью графического приложения.
-
Анимации
Анимация — это отличный способ выделить интерактивные элементы и придать дизайну интерес и увлекательность. В этом модуле вы узнаете, как добавлять и управлять эффектами анимации с помощью CSS.
-
Фильтры
Фильтры в CSS позволяют применять эффекты, о которых можно было бы подумать только в графических приложениях. В этом модуле вы узнаете, какие эффекты доступны.
-
Режимы наложения
В этом модуле, посвященном режимам наложения, можно создавать композиционные эффекты путем смешивания двух или более слоев, а также научиться выделять изображение на белом фоне.
-
Списки
Структурно список состоит из элемента-контейнера списка, заполненного элементами списка. В этом модуле вы узнаете, как стилизовать все части списка.
-
Переходы
В этом модуле вы узнаете, как определить переходы между состояниями элемента. Использование переходов позволяет повысить удобство работы пользователя, обеспечивая визуальную обратную связь при взаимодействии с ним.
-
Переполнение
Переполнение — это способ работы с содержимым, которое не помещается в заданный родительский размер. В этом модуле мы рассмотрим нестандартный подход и узнаем, как стилизовать переполняющееся содержимое.
-
Фон
В этом модуле вы узнаете, как можно стилизовать фон блоков с помощью CSS.
-
Текст и типографика
В этом модуле вы узнаете, как стилизовать текст в Интернете.
Авторы
Этот курс написан и отредактирован экспертами сообщества CSS: Andy Bell, Rachel Andrew, Una Kravets, Adam Argyle, Emma Twersky, Camden Bickel, и Kevin Lozandier. Rob Dodson и Jiwoong Lee руководили UX и производственной сборкой, а также помогали Ewa Gasperowicz и Kayce Basques.
Перевод
Перевод этого учебника сделан благодаря подписчикам на Бусти.
Источник — Learn CSS