2
CSS
CSS3
2.1. Основы CSS
- Виды таблиц стилей
- Виды селекторов
- Комбинация селекторов
- Группировка селекторов
- Наследование и каскад
2.2. Блочные и строчные элементы
- Модель визуального форматирования
- Определение термина «содержащий блок»
- Блочные элементы и блочные контейнеры
- Строчные элементы и строчные контейнеры
- Строчно-блочные элементы
- Ширина содержимого: свойство width
- Минимальная и максимальная ширина: свойства min-width и max-width
- Высота содержимого: свойство height
- Минимальная и максимальная высота: свойства min-height и max-height
- Расчет высоты строки: свойства line-height и vertical-align
- Изменение блочной модели: свойство box-sizing
2.3. CSS-позиционирование
- Типы позиционирования
- Свойства смещения
- Позиционирование внутри элемента
- Проблемы позиционирования
- Свободное перемещение элементов
- Отмена обтекания элементов
2.4. 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.5. CSS-шрифты
- Семейство шрифтов: свойство font-family
- Насыщенность шрифта: свойство font-weight
- Ширина шрифта: свойство font-stretch
- Начертание шрифта: свойство font-style
- Размер шрифта: свойство font-size
- Относительный размер шрифта: свойство font-size-adjust
- Сокращенная запись свойств шрифта: свойство font
- Управление синтезом шрифтов: свойство font-synthesis
2.6. CSS-ссылки
- Псевдоклассы состояний гипертекстовых ссылок
- Выборка отдельных ссылок
- Подчеркивание ссылок
- Изображения для ссылок
- Использование фонового изображения
- Ссылки-кнопки
- Примеры оформления ссылок
2.7. CSS-таблицы
- Границы таблицы border
- Как задать ширину и высоту таблицы
- Как задать фон таблицы
- Столбцы таблицы
- Как добавить таблице заголовок
- Как убрать промежуток между рамками ячеек
- Как увеличить промежуток между рамками ячеек
- Как скрыть пустые ячейки таблицы
- Компоновка макета таблицы table-layout
- Лучшие макеты таблиц
2.8. CSS-списки
- Тип маркера списка list-style-type
- Изображения для элементов списка list-style-image
- Местоположение маркера списка list-style-position
- Краткая форма задания стилей списка list-style
- Примеры красивого оформления списков
2.9. CSS-фон
- Цвет фона background-color
- Фоновое изображение background-image
- Повтор фоновых изображений background-repeat>
- Позиционирование фоновых изображений background-position
- Фиксация изображения на месте background-attachment
- Заполнение фоном отступов и границ элемента background-clip
- Положение фонового изображения относительно его родительского блока background-origin
- Размер изображения background-size
- Задание фона элемента одним свойством background
- Множественные фоны
2.10. CSS-рамка
- Стиль рамки border-style
- Цвет рамки border-color
- Ширина рамки border-width
- Задание рамки одним свойством border
- Задание рамки для одной границы элемента
2.11. CSS-content
- Свойство content
- Добавление специального символа
- Добавление текста
- Добавление изображения
- Добавление блочного содержимого
- Добавление значения атрибута
- Добавление кавычек
- Добавление счетчика элементов
- Свойство display: list-item
- Форматирование кавычек: свойство quotes
2.12. CSS-генераторы
2.13. CSS-цвета
- Приоритетные цвета: свойство color
- Основные ключевые слова
- Числовые значения цвета
- Цвета модели RGB
- Цвета модели RGBA
- Ключевое слово transparent
- HSL-цвета
- HSLA-значения цвета
- Расширенные ключевые слова цвета
- Ключевое слово currentColor
2.14. CSS3 UI
- Свойства внешнего контура
- Краткая запись внешнего контура: свойство outline
- Толщина внешнего контура: свойство outline-width
- Узор внешнего контура: свойство outline-style
- Цвет внешнего контура: свойство outline-color
- Смещение внешнего контура: свойство outline-offset
- Изменение размера блоков: свойство resize
- Стилизация курсора: свойство cursor
- Цвет каретки вставки: свойство caret-color
2.15. CSS3-градиент
- Линейный градиент: linear-gradient()
- Радиальный градиент: radial-gradient()
- Повтор градиента: repeating-linear-gradient() и repeating-radial-gradient()
- Кроссбраузерный градиент
- Комбинация градиента и фонового изображения
2.16. CSS3-рамка
- Закругление углов с помощью border-radius
- Рамки-изображения border-image
- Ширина рамки-изображения border-image-width
- Ресурс рамки-изображения border-image-source
- Элементы рамки-изображения border-image-slice
- Повтор рамки-изображения border-image-repeat
- Смещение рамки-изображения border-image-outset
- Смещение внешней рамки outline-offset
- Градиентная рамка
2.17. CSS3-оформление текста
- Оформление линии: подчеркивание, обводка и зачеркивание
- Вид линии оформления: свойство text-decoration-line
- Стиль линии оформления: свойство text-decoration-style
- Цвет линии оформления: свойство text-decoration-color
- Краткая запись свойств линии оформления: свойство text-decoration
- Расположение линии оформления: свойство text-underline-position
- Тень текста: свойство text-shadow
- Примеры тени текста
- Эффекты тени при наведении
- Анимация тени
2.18. CSS3-тень блока
2.19. CSS3-переходы
- Название свойства transition-property
- Продолжительность перехода transition-duration
- Функция перехода transition-timing-function
- Задержка перехода transition-delay
- Краткая запись перехода transition
- Плавный переход нескольких свойств
- Примеры переходов для различных свойств
2.20. CSS3-трансформации
- Функции 2D-трансформации transform
- Точка трансформации transform-origin
- Множественные трансформации
- Трансформации на практике: как сделать ленточки
2.21. CSS3-анимация
- Правило @keyframes
- Название анимации animation-name
- Продолжительность анимации animation-duration
- Временная функция animation-timing-function
- Анимация с задержкой animation-delay
- Повтор анимации animation-iteration-count
- Направление анимации animation-direction
- Краткая запись анимации animation
- Проигрывание анимации animation-play-state
- Состояние элемента до и после воспроизведения анимации animation-fill-mode
- Множественные анимации
2.22. 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.23. CSS3 columns
- Количество колонок column-count
- Ширина колонок column-width
- Ширина пустого пространства между колонками column-gap
- Позиционирование элемента на несколько колонок column-span
- Стиль разделительной линии column-rule-style
- Ширина разделительной линии column-rule-width
- Цвет разделительной линии column-rule-color
- Краткая запись стилей разделительной линии column-rule
- Установка колонок с помощью одного свойства columns
2.24. CSS3 3D-трансформации
- Установка 3D перспективы perspective
- Задание точки трансформации для 3D элемента perspective-origin
- Стиль 3D преобразований transform-style
- Видимость обратной стороны элемента backface-visibility
- Функции 3D трансформации
2.25. CSS3-медиазапросы
- Структура медиазапроса @media
- Логические операторы
- Тип носителя
- Характеристики носителя
- На какие разрешения экрана нужно ориентироваться
2.26. CSS3-фильтры
2.27. CSS Grid
- Концепция сетки и основные понятия
- Контейнер-сетка
- Определение сетки
- Строки и столбцы
- Именованные области
- Краткая запись явной сетки
- Неявная сетка
- Краткая запись сетки
- Элементы сетки
- Размещение и переупорядочивание элементов сетки
- Выравнивание элементов сетки и промежутки между элементами
2.28. CSS3-шрифты
- Кернинг: свойство font-kerning
- Лигатуры: свойство font-variant-ligatures
- Подстрочные и надстрочные формы: свойство font-variant-position
- Преобразование в заглавные буквы: свойство font-variant-caps
- Форматирование цифр: свойство font-variant-numeric
- Визуализация восточноазиатского текста: свойство font-variant-east-asian
- Общее сокращение для рендеринга шрифтов: свойство font-variant
- Низкоуровневое управление настройками шрифтов: свойство font-feature-settings