# 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)
* Переменные, вложенность, миксины, функции
