2
CSS
CSS3
Основы CSS2.1
- Виды таблиц стилей
- Виды селекторов
- Комбинация селекторов
- Группировка селекторов
- Наследование и каскад
CSS блочная модель2.2
- Определение блочной модели
- Отступы элемента
- Схлопывание вертикальных отступов
- Выпадание вертикальных отступов
- Физические свойства отступов: свойства 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
CSS-позиционирование2.4
- Содержащий блок
- Выбор схемы позиционирования: свойство position
- Смещение блока: свойства top, right, bottom, left
- Обтекание: свойство float
- Управление потоком рядом с плавающими элементами: свойство clear
- Определение контекста наложения: свойство z-index
- Контекст наложения
CSS-текст2.5
- Преобразование текста: свойство 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
CSS-шрифты2.6
- Семейство шрифтов: свойство font-family
- Насыщенность шрифта: свойство font-weight
- Ширина шрифта: свойство font-stretch
- Начертание шрифта: свойство font-style
- Размер шрифта: свойство font-size
- Относительный размер шрифта: свойство font-size-adjust
- Сокращенная запись свойств шрифта: свойство font
- Управление синтезом шрифтов: свойство font-synthesis
CSS-ссылки2.7
- Псевдоклассы состояний гипертекстовых ссылок
- Выборка отдельных ссылок
- Подчеркивание ссылок
- Изображения для ссылок
- Использование фонового изображения
- Ссылки-кнопки
- Примеры оформления ссылок
CSS-таблицы2.8
- Границы таблицы border
- Как задать ширину и высоту таблицы
- Как задать фон таблицы
- Столбцы таблицы
- Как добавить таблице заголовок
- Как убрать промежуток между рамками ячеек
- Как увеличить промежуток между рамками ячеек
- Как скрыть пустые ячейки таблицы
- Компоновка макета таблицы table-layout
- Лучшие макеты таблиц
CSS-списки2.9
- Тип маркера списка list-style-type
- Изображения для элементов списка list-style-image
- Местоположение маркера списка list-style-position
- Краткая форма задания стилей списка list-style
- Примеры красивого оформления списков
CSS-фон2.10
- Базовый цвет: свойство background-color
- Источник изображения: свойство background-image
- Укладка изображений: свойство background-repeat
- Фиксация изображения: свойство background-attachment
- Позиционирование изображений: свойство background-position
- Область рисования: свойство background-clip
- Область расположения фона: свойство background-origin
- Размер изображений: свойство background-size
- Краткая запись свойств фона: свойство background
- Множественные фоны
CSS-рамка2.11
- Стиль рамки border-style
- Цвет рамки border-color
- Ширина рамки border-width
- Задание рамки одним свойством border
- Задание рамки для одной границы элемента
CSS-content2.12
- Свойство content
- Добавление специального символа
- Добавление текста
- Добавление изображения
- Добавление блочного содержимого
- Добавление значения атрибута
- Добавление кавычек
- Добавление счетчика элементов
- Свойство display: list-item
- Форматирование кавычек: свойство quotes
CSS-цвета2.13
- Приоритетные цвета: свойство color
- Основные ключевые слова
- Числовые значения цвета
- Цвета модели RGB
- Цвета модели RGBA
- Ключевое слово transparent
- HSL-цвета
- HSLA-значения цвета
- Расширенные ключевые слова цвета
- Ключевое слово currentColor
CSS-генераторы2.14
CSS3 UI2.15
- Свойства внешнего контура
- Краткая запись внешнего контура: свойство outline
- Толщина внешнего контура: свойство outline-width
- Узор внешнего контура: свойство outline-style
- Цвет внешнего контура: свойство outline-color
- Смещение внешнего контура: свойство outline-offset
- Изменение размера блоков: свойство resize
- Стилизация курсора: свойство cursor
- Цвет каретки вставки: свойство caret-color
CSS3-градиент2.16
- Линейный градиент: linear-gradient()
- Радиальный градиент: radial-gradient()
- Повтор градиента: repeating-linear-gradient() и repeating-radial-gradient()
- Кроссбраузерный градиент
- Комбинация градиента и фонового изображения
CSS3-рамка2.17
- Закругление углов с помощью border-radius
- Рамки-изображения border-image
- Ширина рамки-изображения border-image-width
- Ресурс рамки-изображения border-image-source
- Элементы рамки-изображения border-image-slice
- Повтор рамки-изображения border-image-repeat
- Смещение рамки-изображения border-image-outset
- Смещение внешней рамки outline-offset
- Градиентная рамка
CSS3-оформление текста2.18
- Оформление линии: подчеркивание, обводка и зачеркивание
- Вид линии оформления: свойство text-decoration-line
- Стиль линии оформления: свойство text-decoration-style
- Цвет линии оформления: свойство text-decoration-color
- Краткая запись свойств линии оформления: свойство text-decoration
- Расположение линии оформления: свойство text-underline-position
- Тень текста: свойство text-shadow
- Примеры тени текста
- Эффекты тени при наведении
- Анимация тени
CSS3-тень блока2.19
CSS3-переходы2.20
- Название свойства transition-property
- Продолжительность перехода transition-duration
- Функция перехода transition-timing-function
- Задержка перехода transition-delay
- Краткая запись перехода transition
- Плавный переход нескольких свойств
- Примеры переходов для различных свойств
CSS3-трансформации2.21
- Функции 2D-трансформации: свойство transform
- Точка трансформации: свойство transform-origin
- Область преобразования: свойство transform-box
- Трансформации на практике: как сделать ленточки
CSS3-анимация2.22
- Ключевые кадры
- Название анимации: свойство animation-name
- Продолжительность анимации: свойство animation-duration
- Временная функция: свойство animation-timing-function
- Задержка анимации: свойство animation-delay
- Повтор анимации: свойство animation-iteration-count
- Направление анимации: свойство animation-direction
- Краткая запись анимации: свойство animation
- Проигрывание анимации: свойство animation-play-state
- Состояние элемента до и после воспроизведения анимации: свойство animation-fill-mode
- Множественные анимации
CSS3 flexbox2.23
- Свойство display: flex
- Выравнивание элементов по горизонтали justify-content
- Выравнивание элементов по вертикали align-items
- Направление главной оси flex-direction
- Многострочность элементов flex-wrap
- Краткая запись направления и многострочности flex-flow
- Многострочное выравнивание align-content
- Порядок отображения элементов order
- Базовая ширина элемента flex-basis
- Растяжение элементов flex-grow
- Сужение элементов flex-shrink
- Задание базовой ширины и трансформации элемента одним свойством flex
- Выравнивание отдельных элементов align-self
CSS3-колонки2.24
- Количество и ширина колонок
- Ширина колонок: свойство column-width
- Количество колонок: свойство column-count
- Установка колонок с помощью одного свойства columns
- Промежутки между колонками и разделительные линии
- Промежутки между колонками: свойство column-gap
- Цвет разделительной линии: свойство column-rule-color
- Стиль разделительной линии: свойство column-rule-style
- Ширина разделительной линии: свойство column-rule-width
- Краткая запись свойств разделительной линии: свойство column-rule
- Разрыв колонок
- Охват колонок: свойство column-span
- Заполнение колонок содержимым: свойство column-fill
- Переполнение
- Переполнение внутри многоколоночных контейнеров
- Разбивка на страницы и переполнение вне многоколоночных контейнеров
CSS3 3D-трансформации2.25
- Установка 3D-перспективы: свойство perspective
- Задание точки трансформации для 3D-элемента: свойство perspective-origin
- Стиль 3D-преобразований: свойство transform-style
- Видимость обратной стороны элемента: свойство backface-visibility
- Функции 3D-трансформации
CSS3-медиазапросы2.26
- Структура медиазапроса @media
- Логические операторы
- Тип носителя
- Характеристики носителя
- На какие разрешения экрана нужно ориентироваться
CSS3-фильтры2.27
CSS Grid2.28
- Концепция сетки и основные понятия
- Создание контейнера-сетки: значения 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
CSS3-шрифты2.29
- Кернинг: свойство font-kerning
- Лигатуры: свойство font-variant-ligatures
- Подстрочные и надстрочные формы: свойство font-variant-position
- Преобразование в заглавные буквы: свойство font-variant-caps
- Форматирование цифр: свойство font-variant-numeric
- Визуализация восточноазиатского текста: свойство font-variant-east-asian
- Общее сокращение для рендеринга шрифтов: свойство font-variant
- Низкоуровневое управление настройками шрифтов: свойство font-feature-settings
CSS3-переполнение2.30
- Типы переполнения
- Прокрутка и обрезка переполнения: свойства overflow-x, overflow-y и overflow
- Автоматическое многоточие
- Многоточие при переполнении: свойство text-overflow
CSS3-способы письма2.31
- Введение
- Направление вдоль линии строки и двунаправленность
- Задаем направление: свойство direction
- Встраивание и переопределение: свойство unicode-bidi
- Вертикальное письмо
- Направление потока блоков: свойство writing-mode
- Введение в вертикальное расположение текста
- Ориентация текста: свойство text-orientation
Объединение и смешивание слоев2.32
- Введение в объединение слоев
- CSS-свойства
- Режим смешивания цветов: свойство mix-blend-mode
- Контекст наложения: свойство isolation
- Режим смешивания фоновых слоев: свойство background-blend-mode
- Режимы смешивания
- Разделимые режимы смешивания
- Неразделимые режимы смешивания