CSS: макеты и адаптивный дизайн (презентация)
1. Введение в CSS
-
Что такое CSS?
Язык стилей для описания внешнего вида HTML-документов. -
Назначение CSS:
Управление макетом, цветами, шрифтами, анимациями и адаптивностью. -
Принципы CSS:
-
Каскадность: Приоритет стилей определяется порядком, специфичностью и важностью (
!important). -
Наследование: Некоторые свойства (например,
font-family) наследуются дочерними элементами. -
Специфичность: Вес селектора (например,
id>.class>tag).
-
2. Подключение CSS к документу
-
Способы подключения:
-
Inline-стили:
<div style="color: red;">...</div>. -
Внутренние стили:
<style> body { margin: 0; } </style>. -
Внешние файлы:
<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