CSS: макеты и адаптивный дизайн (презентация)

1. Введение в CSS

• Что такое CSS?
  Язык стилей для описания внешнего вида HTML-документов.

• Назначение CSS:
  Управление макетом, цветами, шрифтами, анимациями и адаптивностью.

• Принципы CSS:

  • Каскадность: Приоритет стилей определяется порядком, специфичностью и важностью (!important).

  • Наследование: Некоторые свойства (например, font-family) наследуются дочерними элементами.

  • Специфичность: Вес селектора (например, id > .class > tag).

2. Подключение CSS к документу

• Способы подключения:

  1. Inline-стили: <div style="color: red;">...</div>.

  2. Внутренние стили: <style> body { margin: 0; } </style>.

  3. Внешние файлы: <link rel="stylesheet" href="styles.css"> (рекомендуемый способ).

• Правила построения CSS

3. Селекторы и свойства

• Виды селекторов:

  • Элементы: div, p.

  • Классы: .class-name.

  • ID: #id-name (уникальный).

  • Атрибуты: [type="text"].

  • Псевдоклассы: :hover, :nth-child(n).

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

• Группировка селекторов
• Пользовательские свойства (CSS-переменные)

4. Блочная модель и визуальное форматирование

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

  • margin → border → padding → content.

  • box-sizing: border-box (включает padding и border в ширину).

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

  • Static (по умолчанию).

  • Relative (смещение относительно своего положения).

  • Absolute (относительно ближайшего позиционированного родителя).

  • Fixed (относительно окна браузера).

  • Sticky (прилипает при прокрутке).

• Layout-технологии:

  • Float/Clearfix: Устаревший подход для обтекания элементов.

  • Flexbox

  • CSS Grid
  • z-index: Управление порядком наложения элементов.

5. Визуальные эффекты и шрифты

• Тени и градиенты

• Анимации и переходы

• Веб-шрифты:

  • Google Fonts

  • Font Awesome:
    Иконки через CSS-классы: <i class="fas fa-user"></i>

6. Адаптивная верстка

• Mobile First:
  Дизайн сначала для мобильных устройств, затем адаптация под десктоп.

• Медиазапросы

• Резиновые макеты:
  Использование относительных единиц (%, vw, vh).

• Адаптивные изображения

7. Масштабируемый CSS и инструменты

• Модульный CSS:
  Разделение стилей на компоненты (например, header.css, buttons.css).

• Препроцессоры:

  • Sass/SCSS:
    Переменные, миксины, вложенность:

• • PostCSS:
    Автопрефиксер, оптимизация кода.

• CSS-фреймворки:

  • Tailwind CSS:
    Утилитарные классы

8. Инструменты для работы

• Сборщики:
  Webpack, Gulp (для автоматизации работы с препроцессорами).

• Sass
• Tailwind CSS