Page cover

📗CSS - Каскадные стили таблиц

Список тем:

1. Основы CSS

  • Что такое CSS, его назначение и преимущества

  • Подключение CSS к HTML (inline, embedded, external)

  • Селекторы и их типы (универсальный, элементный, классовый, идентификаторный, групповой)

  • Основные свойства CSS:

    • Цвет текста (color)

    • Фон элемента (background, background-color, background-image)

    • Отступы (внутренние — padding, внешние — margin)

    • Границы (border)

2. Работа с текстом и шрифтами

  • Шрифты (font-family)

  • Размер шрифта (font-size)

  • Начертание шрифта (font-style, font-weight)

  • Высота строки (line-height)

  • Пробелы и переносы текста (white-space, word-wrap)

  • Выравнивание текста (text-align)

3. Блочная модель и размеры

  • Блочная модель: content, padding, border, margin

  • Ширина и высота элементов (width, height, max-width, min-height)

  • Позиционирование элементов (display, visibility)

  • Свойство box-sizing

4. Расположение элементов

  • Позиционирование: static, relative, absolute, fixed, sticky

  • Свойство z-index

  • Выравнивание элементов (float, clear)

  • Центрирование с Flexbox и Grid

5. CSS Flexbox

  • Свойство display: flex

  • Основные свойства:

    • justify-content (выравнивание по главной оси)

    • align-items, align-self (выравнивание по поперечной оси)

    • flex-wrap (перенос элементов)

    • flex-grow, flex-shrink, flex-basis

6. CSS Grid Layout

  • Свойство display: grid

  • Настройка строк и колонок (grid-template-rows, grid-template-columns)

  • Объединение ячеек (grid-area, grid-row, grid-column)

  • Выравнивание элементов в Grid (justify-items, align-items)

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

  • Псевдоклассы (:hover, :active, :focus, :nth-child, :first-child, :last-child)

  • Псевдоэлементы (::before, ::after, ::placeholder)

8. CSS Анимации и переходы

  • Свойства переходов:

    • transition-property

    • transition-duration

    • transition-timing-function

  • Анимации:

    • Использование @keyframes

    • Свойства animation-name, animation-duration, animation-delay

9. Работа с изображениями и фонами

  • Свойства фона:

    • background-repeat

    • background-size

    • background-position

    • background-attachment

  • Маскировка изображений (mask-image, clip-path)

10. Media Queries и адаптивный дизайн

  • Использование @media для создания адаптивных макетов

  • Адаптация под устройства разных размеров экрана

  • Отзывчивые единицы измерения (em, rem, %, vw, vh)

11. CSS Переменные

  • Объявление и использование CSS-переменных (--variable-name, var(--variable-name))

  • Преимущества переменных для поддержки масштабируемости стилей

12. CSS для сложных эффектов

  • Тени элементов (box-shadow, text-shadow)

  • Закругление углов (border-radius)

  • Прозрачность и цвета RGBA/HSLA

  • CSS фильтры (filter)

13. Препроцессоры CSS

  • Введение в препроцессоры (Sass, SCSS, LESS)

  • Переменные, вложенность, миксины, функции

PreviousПроект WebStudioNextМодуль 1

Last updated