◆PROlab Academy

CSS

Стилизация и оформление веб-страниц

Этап 3 из 8 · Фундамент уровень

23 тем

  1. 01

    Введение в CSS

    Что такое CSS, зачем он нужен и как подключить стили к HTML-странице.

  2. 02

    Селекторы и наследование

    Типовые, классовые, ID-селекторы, вложенность и наследование CSS-свойств.

  3. 03

    Каскад и спецификация

    Как CSS разрешает конфликты: каскад, спецификация, наследование и !important.

  4. 04

    Цвета

    Форматы цветов: именованные, hex, rgb, rgba, hsl, hsla и opacity.

  5. 05

    Текст и шрифты

    Свойства текста: font-family, font-size, font-weight, line-height, text-align, text-decoration.

  6. 06

    Единицы измерения

    Абсолютные и относительные единицы: px, em, rem, %, vh, vw, ch, fr и когда их использовать.

  7. 07

    Блочная модель

    Как устроен box model: content, padding, border, margin и разница между content-box и border-box.

  8. 08

    Margin и Padding

    Подробно о margin и padding: синтаксис, схлопывание, auto, отрицательные значения.

  9. 09

    Display и поток документа

    Свойство display: block, inline, inline-block, none, flex, grid и нормальный поток документа.

  10. 10

    Размеры элементов

    Управление размерами: width, height, min-width, max-width, min-height, max-height.

  11. 11

    Overflow и видимость

    overflow: hidden, scroll, auto, text-overflow: ellipsis, visibility, clip-path, opacity.

  12. 12

    Позиционирование

    position: static, relative, absolute, fixed, sticky и свойства top, right, bottom, left, z-index.

  13. 13

    Flexbox — основы

    display: flex, flex-direction, flex-wrap, gap и основы одномерной раскладки.

  14. 14

    Flexbox — выравнивание

    justify-content, align-items, align-self, align-content, flex-grow, flex-shrink, flex-basis.

  15. 15

    Grid — основы

    CSS Grid: display: grid, grid-template-columns, grid-template-rows, gap и двумерная раскладка.

  16. 16

    Grid — строки и колонки

    Продвинутый Grid: grid-column, grid-row, span, grid-area, template-areas, auto-placement.

  17. 17

    Псевдо-классы и псевдо-элементы

    :hover, :focus, :nth-child, ::before, ::after, ::first-line и другие.

  18. 18

    CSS-переменные

    Кастомные свойства: :root, var(), переопределение, динамические значения.

  19. 19

    Стилизация форм

    CSS для форм: input, button, select, textarea, :focus, :invalid, :valid, кастомные чекбоксы.

  20. 20

    Адаптивный дизайн и медиа-запросы

    Media queries, mobile-first подход, контейнерные запросы, адаптивные изображения.

  21. 21

    Переходы

    CSS transitions: property, duration, timing-function, delay и плавные анимации.

  22. 22

    CSS-функции

    calc(), min(), max(), clamp(), var(), url(), attr() и другие полезные CSS-функции.

  23. 23

    Фоны и градиенты

    background-color, background-image, background-size, background-position, linear-gradient, radial-gradient.