Модуль 4. Современный CSS: макеты и адаптивный дизайн

Понять, что такое CSS, как он работает, чем отличается от HTML, его роль в веб-разработке.

Способы подключения CSS (встроенный, внутренний и внешний)

Селекторы, свойства, значения; понять, как правильно писать CSS-код.

Элементы (теги), классы, идентификаторы.

Как CSS-стили накладываются друг на друга, почему одни стили перекрывают другие.

RGB, RGBA, HEX, HSL, HSLA.

Использование свойств background-color, background-image, background-repeat, background-position.

Свойства border, border-radius, box-shadow.

Свойства font-family, font-size, font-weight, font-style

 line-height, letter-spacing, text-align

Свойство text-shadow

Свойства width, height, padding, border, margin. Принципы работы коробочной модели: Как отступы, границы и поля влияют на размер элемента.

• https://html5book.ru/css-blochnaya-model/

Значения content-box и border-box.

 Свойства top, right, bottom, left

float считается устаревшим методом для построения сложных компоновок, поскольку это свойство было изначально предназначено для задач обтекания текста.

static, relative, absolute, fixed, sticky

Использование свойства z-index.

Контейнер display: flex и его поведения: осевые параметры: свойства justify-content, align-items, align-content, выравнивание и распределение пространства: свойства flex-direction, flex-wrap, align-self, управление элементами внутри контейнера: свойства flex-grow, flex-shrink, flex-basis.

Создание  контейнера сетки с display: grid. Разметка сетки: Свойства grid-template-columns, grid-template-rows, grid-template-areas. Выравнивание и размещение: Свойства justify-items, align-items, grid-gap. Объединение и позиционирование элементов в сетке: Использование grid-row, grid-column.

Свойства transition-property, transition-duration, transition-timing-function.

Создание анимаций с использованием @keyframes

 :hover, :before, :after, :nth-child, :not, ::selection.

Фиксированные, резиновые, эластичные / CSS Layouts: The Fixed. The Fluid. The Elastic

PX, EM, REM, %, VW, VH, VMIN, VMAX, FR, EX, CH и др.

• Что такое px, rem, em, fr, %
• Единицы измерения vh, vw, vmin, vmax

Изучение основ адаптивного дизайна. Написание медиазапросов: Использование @media для настройки стилей под разные размеры экранов.

Переход к гибким единицам (%, vw, vh, em) для адаптивности.