📗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)

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