2
CSS
CSS3
2.1.Основы CSS
- Виды таблиц стилей
- Виды селекторов
- Комбинация селекторов
- Группировка селекторов
- Наследование и каскад
2.2.CSS блочная модель
- Определение блочной модели
- Отступы элемента
- Схлопывание вертикальных отступов
- Выпадание вертикальных отступов
- Физические свойства отступов: свойства margin-top, margin-right, margin-bottom, margin-left
- Краткая запись отступов: свойство margin
- Поля элемента
- Физические свойства полей: свойства padding-top, padding-right, padding-bottom, padding-left
- Краткая запись полей: свойство padding
- Рамки элемента
2.3.Блочные и строчные элементы
- Модель визуального форматирования
- Определение термина «содержащий блок»
- Блочные элементы и блочные контейнеры
- Строчные элементы и строчные контейнеры
- Строчно-блочные элементы
- Ширина содержимого: свойство width
- Минимальная и максимальная ширина: свойства min-width и max-width
- Высота содержимого: свойство height
- Минимальная и максимальная высота: свойства min-height и max-height
- Расчет высоты строки: свойства line-height и vertical-align
- Изменение блочной модели: свойство box-sizing
2.4.CSS-позиционирование
- Содержащий блок
- Выбор схемы позиционирования: свойство position
- Смещение блока: свойства top, right, bottom, left
- Обтекание: свойство float
- Управление потоком рядом с плавающими элементами: свойство clear
- Определение контекста наложения: свойство z-index
- Контекст наложения
2.5.CSS-текст
- Преобразование текста: свойство text-transform
- Обработка пробелов и переносы строк: свойство white-space
- Настройка табуляции: свойство tab-size
- Правила разрыва для букв: свойство word-break
- Разрыв строки: свойство line-break
- Расстановка переносов: свойство hyphens
- Переполнение блока-обертки: свойство overflow-wrap/word-wrap
- Выравнивание текста: свойство text-align
- Выравнивание текста по умолчанию: свойство text-align-all
- Выравнивание последней строки: свойство text-align-last
- Промежутки между словами: свойство word-spacing
- Трекинг: свойство letter-spacing
- Отступ первой строки: свойство text-indent
2.6.CSS-шрифты
- Семейство шрифтов: свойство font-family
- Насыщенность шрифта: свойство font-weight
- Ширина шрифта: свойство font-stretch
- Начертание шрифта: свойство font-style
- Размер шрифта: свойство font-size
- Относительный размер шрифта: свойство font-size-adjust
- Сокращенная запись свойств шрифта: свойство font
- Управление синтезом шрифтов: свойство font-synthesis
2.7.CSS-ссылки
- Псевдоклассы состояний гипертекстовых ссылок
- Выборка отдельных ссылок
- Подчеркивание ссылок
- Изображения для ссылок
- Использование фонового изображения
- Ссылки-кнопки
- Примеры оформления ссылок
2.8.CSS-таблицы
- Границы таблицы border
- Как задать ширину и высоту таблицы
- Как задать фон таблицы
- Столбцы таблицы
- Как добавить таблице заголовок
- Как убрать промежуток между рамками ячеек
- Как увеличить промежуток между рамками ячеек
- Как скрыть пустые ячейки таблицы
- Компоновка макета таблицы table-layout
- Лучшие макеты таблиц
2.9.CSS-списки
- Тип маркера списка list-style-type
- Изображения для элементов списка list-style-image
- Местоположение маркера списка list-style-position
- Краткая форма задания стилей списка list-style
- Примеры красивого оформления списков
2.10.CSS-фон
- Базовый цвет: свойство background-color
- Источник изображения: свойство background-image
- Укладка изображений: свойство background-repeat
- Фиксация изображения: свойство background-attachment
- Позиционирование изображений: свойство background-position
- Область рисования: свойство background-clip
- Область расположения фона: свойство background-origin
- Размер изображений: свойство background-size
- Краткая запись свойств фона: свойство background
- Множественные фоны
2.11.CSS-рамка
- Стиль рамки border-style
- Цвет рамки border-color
- Ширина рамки border-width
- Задание рамки одним свойством border
- Задание рамки для одной границы элемента
2.12.CSS-content
- Свойство content
- Добавление специального символа
- Добавление текста
- Добавление изображения
- Добавление блочного содержимого
- Добавление значения атрибута
- Добавление кавычек
- Добавление счетчика элементов
- Свойство display: list-item
- Форматирование кавычек: свойство quotes
2.13.CSS-цвета
- Приоритетные цвета: свойство color
- Основные ключевые слова
- Числовые значения цвета
- Цвета модели RGB
- Цвета модели RGBA
- Ключевое слово transparent
- HSL-цвета
- HSLA-значения цвета
- Расширенные ключевые слова цвета
- Ключевое слово currentColor
2.14.CSS-генераторы
2.15.CSS3 UI
- Свойства внешнего контура
- Краткая запись внешнего контура: свойство outline
- Толщина внешнего контура: свойство outline-width
- Узор внешнего контура: свойство outline-style
- Цвет внешнего контура: свойство outline-color
- Смещение внешнего контура: свойство outline-offset
- Изменение размера блоков: свойство resize
- Стилизация курсора: свойство cursor
- Цвет каретки вставки: свойство caret-color
2.16.CSS3-градиент
- Линейный градиент: linear-gradient()
- Радиальный градиент: radial-gradient()
- Повтор градиента: repeating-linear-gradient() и repeating-radial-gradient()
- Кроссбраузерный градиент
- Комбинация градиента и фонового изображения
2.17.CSS3-рамка
- Закругление углов с помощью border-radius
- Рамки-изображения border-image
- Ширина рамки-изображения border-image-width
- Ресурс рамки-изображения border-image-source
- Элементы рамки-изображения border-image-slice
- Повтор рамки-изображения border-image-repeat
- Смещение рамки-изображения border-image-outset
- Смещение внешней рамки outline-offset
- Градиентная рамка
2.18.CSS3-оформление текста
- Оформление линии: подчеркивание, обводка и зачеркивание
- Вид линии оформления: свойство text-decoration-line
- Стиль линии оформления: свойство text-decoration-style
- Цвет линии оформления: свойство text-decoration-color
- Краткая запись свойств линии оформления: свойство text-decoration
- Расположение линии оформления: свойство text-underline-position
- Тень текста: свойство text-shadow
- Примеры тени текста
- Эффекты тени при наведении
- Анимация тени
2.19.CSS3-тень блока
2.20.CSS3-переходы
- Название свойства transition-property
- Продолжительность перехода transition-duration
- Функция перехода transition-timing-function
- Задержка перехода transition-delay
- Краткая запись перехода transition
- Плавный переход нескольких свойств
- Примеры переходов для различных свойств
2.21.CSS3-трансформации
- Функции 2D-трансформации: свойство transform
- Точка трансформации: свойство transform-origin
- Область преобразования: свойство transform-box
- Трансформации на практике: как сделать ленточки
2.22.CSS3-анимация
- Ключевые кадры
- Название анимации: свойство animation-name
- Продолжительность анимации: свойство animation-duration
- Временная функция: свойство animation-timing-function
- Задержка анимации: свойство animation-delay
- Повтор анимации: свойство animation-iteration-count
- Направление анимации: свойство animation-direction
- Краткая запись анимации: свойство animation
- Проигрывание анимации: свойство animation-play-state
- Состояние элемента до и после воспроизведения анимации: свойство animation-fill-mode
- Множественные анимации
2.23.CSS3 flexbox
- Свойство display: flex
- Выравнивание элементов по горизонтали justify-content
- Выравнивание элементов по вертикали align-items
- Направление главной оси flex-direction
- Многострочность элементов flex-wrap
- Краткая запись направления и многострочности flex-flow
- Многострочное выравнивание align-content
- Порядок отображения элементов order
- Базовая ширина элемента flex-basis
- Растяжение элементов flex-grow
- Сужение элементов flex-shrink
- Задание базовой ширины и трансформации элемента одним свойством flex
- Выравнивание отдельных элементов align-self
2.24.CSS3-колонки
- Количество и ширина колонок
- Ширина колонок: свойство column-width
- Количество колонок: свойство column-count
- Установка колонок с помощью одного свойства columns
- Промежутки между колонками и разделительные линии
- Промежутки между колонками: свойство column-gap
- Цвет разделительной линии: свойство column-rule-color
- Стиль разделительной линии: свойство column-rule-style
- Ширина разделительной линии: свойство column-rule-width
- Краткая запись свойств разделительной линии: свойство column-rule
- Разрыв колонок
- Охват колонок: свойство column-span
- Заполнение колонок содержимым: свойство column-fill
- Переполнение
- Переполнение внутри многоколоночных контейнеров
- Разбивка на страницы и переполнение вне многоколоночных контейнеров
2.25.CSS3 3D-трансформации
- Установка 3D-перспективы: свойство perspective
- Задание точки трансформации для 3D-элемента: свойство perspective-origin
- Стиль 3D-преобразований: свойство transform-style
- Видимость обратной стороны элемента: свойство backface-visibility
- Функции 3D-трансформации
2.26.CSS3-медиазапросы
- Структура медиазапроса @media
- Логические операторы
- Тип носителя
- Характеристики носителя
- На какие разрешения экрана нужно ориентироваться
2.27.CSS3-фильтры
2.28.CSS Grid
- Концепция сетки и основные понятия
- Создание контейнера-сетки: значения grid и inline-grid свойства display
- Определение сетки
- Как задать количество строк и столбцов: свойства grid-template-rows и grid-template-columns
- Именованные области: свойство grid-template-areas
- Сокращенная запись явного объявления сетки: свойство grid-template
- Неявная сетка
- Автоматическое создание дорожек сетки: свойства grid-auto-rows и grid-auto-columns
- Автоматическое размещение: свойство grid-auto-flow
- Сокращенная запись сетки: свойство grid
- Элементы сетки
- Размещение и переупорядочивание элементов сетки
- Размещение с помощью линий сетки: свойства grid-row-start, grid-column-start, grid-row-end и grid-column-end
- Сокращенная запись свойств размещения элементов сетки: свойства grid-row, grid-column и grid-area
- Выравнивание элементов сетки и промежутки между элементами
- Промежутки между элементами сетки: свойства row-gap, column-gap и gap
2.29.CSS3-шрифты
- Кернинг: свойство font-kerning
- Лигатуры: свойство font-variant-ligatures
- Подстрочные и надстрочные формы: свойство font-variant-position
- Преобразование в заглавные буквы: свойство font-variant-caps
- Форматирование цифр: свойство font-variant-numeric
- Визуализация восточноазиатского текста: свойство font-variant-east-asian
- Общее сокращение для рендеринга шрифтов: свойство font-variant
- Низкоуровневое управление настройками шрифтов: свойство font-feature-settings
2.30.CSS3-переполнение
- Типы переполнения
- Прокрутка и обрезка переполнения: свойства overflow-x, overflow-y и overflow
- Автоматическое многоточие
- Многоточие при переполнении: свойство text-overflow
2.31.CSS3-способы письма
- Введение
- Направление вдоль линии строки и двунаправленность
- Задаем направление: свойство direction
- Встраивание и переопределение: свойство unicode-bidi
- Вертикальное письмо
- Направление потока блоков: свойство writing-mode
- Введение в вертикальное расположение текста
- Ориентация текста: свойство text-orientation
2.32.Объединение и смешивание слоев
- Введение в объединение слоев
- CSS-свойства
- Режим смешивания цветов: свойство mix-blend-mode
- Контекст наложения: свойство isolation
- Режим смешивания фоновых слоев: свойство background-blend-mode
- Режимы смешивания
- Разделимые режимы смешивания
- Неразделимые режимы смешивания