CSS справочник

2. Оформление текста

• text-decoration-line - вид линии оформления
• text-decoration-style - стиль линии оформления
• text-decoration-color - цвет линии оформления
• text-decoration - краткая запись свойств линии оформления
• text-underline-position - расположение линии оформления
• text-shadow - тень текста

3. Шрифты

• font-family - семейство шрифтов
• font-weight - насыщенность шрифта
• font-stretch - ширина шрифта
• font-style - стиль начертания шрифта
• font-size - размер шрифта
• font-size-adjust - относительный размер шрифта
• font - краткая запись свойств шрифта
• font-synthesis - управление синтезом шрифтов
• font-feature-settings - низкоуровневое управление настройками шрифтов
• font-kerning - кернинг
• font-variant - общее сокращение для рендеринга шрифтов
• font-variant-caps - преобразование в заглавные буквы
• font-variant-east-asian - визуализация восточноазиатского текста
• font-variant-ligatures - лигатуры
• font-variant-numeric - форматирование цифр
• font-variant-position - подстрочные и надстрочные формы

4. Таблицы

• border-collapse - удаление промежутка между рамками ячеек
• border-spacing - увеличение промежутка между рамками ячеек
• caption-side - управление местоположением подписи к таблице
• empty-cells - скрытие пустых ячеек
• table-layout - компоновка макета таблицы

5. Списки

• list-style - краткая форма задания стилей списка
• list-style-type - тип маркера списка
• list-style-image - маркер-изображение для элементов списка
• list-style-position - местоположение маркера списка

6. Блочная модель

• display - тип генерируемого элементом контейнера
• height - высота элемента
• max-height - максимальная высота
• min-height - минимальная высота
• width - ширина элемента
• max-width - максимальная ширина
• min-width - минимальная ширина
• margin - внешние поля элемента вокруг рамки
• margin-bottom - внешнее поле снизу
• margin-left - внешнее поле слева
• margin-right - внешнее поле справа
• margin-top - внешнее поле сверху
• padding - внутренние поля элемента между содержимым и рамкой
• padding-bottom - внутреннее поле снизу
• padding-left - внутреннее поле слева
• padding-right - внутреннее поле справа
• padding-top - внутреннее поле сверху
• box-sizing - управление расчётом ширины и высоты элемента с учётом внутренних полей и толщины рамки
• vertical-align - вертикальное позиционирование
• line-height - высота строки

7. Позиционирование и обтекание

• position - управление положением элементов
• bottom - смещение относительно нижней стороны блока-контейнера
• left - смещение относительно левой стороны блока-контейнера
• right - смещение относительно правой стороны блока-контейнера
• top - смещение относительно верхней стороны блока-контейнера
• float - перемещение элементов с выравниванием по левому или правому краю блока-контейнера
• clear - отмена обтекания с одной или обоих сторон элемента
• z-index - наложение элементов
• object-fit - управляет заполнением контейнера для содержимого замещаемых элементов
• object-position - позиционирует содержимое замещаемых элементов внутри контейнера относительно осей X и Y

8. Обрезка

• text-overflow - обрезка строк
• overflow - добавление полос прокрутки или скрытие содержимого
• overflow-x - обрезка правого края контента внутри блока в случае его переполнения
• overflow-y - обрезка нижнего края контента внутри блока в случае его переполнения

9. Видимость элемента

• opacity - прозрачность элемента
• visibility - управление видимостью элемента

10. Фон

• background - задание фона элемента одним свойством
• background-color - цвет фона
• background-image - фоновое изображение
• background-position - положение фонового изображения
• background-repeat - повтор фонового изображения
• background-size - размер фонового изображения
• background-attachment - фиксация фонового изображения на месте
• background-clip - заполнение фоном отступов и границ элемента
• background-origin - положение фонового изображения относительно его родительского блока
• background-blend-mode - режим смешивания фоновых слоёв, заданных в свойстве background-image

11. Рамка

• border - задание рамки элемента одним свойством
• border-width - толщина рамки
• border-style - стиль рамки
• border-color - цвет рамки
• border-bottom - задание нижней рамки одним свойством
• border-bottom-width - ширина нижней рамки
• border-bottom-style - стиль нижней рамки
• border-bottom-color - цвет нижней рамки
• border-left - задание левой рамки одним свойством
• border-left-width - толщина левой рамки
• border-left-style - стиль левой рамки
• border-left-color - цвет левой рамки
• border-top - задание верхней рамки одним свойством
• border-top-width - толщина верхней рамки
• border-top-style - стиль верхней рамки
• border-top-color - цвет верхней рамки
• border-right - задание правой рамки одним свойством
• border-right-width - толщина правой рамки
• border-right-style - стиль правой рамки
• border-right-color - цвет правой рамки
• border-radius - задание радиуса скругления углов рамки одним свойством
• border-top-left-radius - верхний левый радиус
• border-top-right-radius - верхний правый радиус
• border-bottom-left-radius - нижний левый радиус
• border-bottom-right-radius - нижний правый радиус
• border-image - задание рамки-изображения одним свойством
• border-image-outset - смещение рамки-изображения
• border-image-repeat - повтор рамки-изображения
• border-image-slice - размер частей рамки-изображения
• border-image-source - источник рамки-изображения
• border-image-width - толщина рамки-изображения

12. Генерируемое содержимое

• content - добавление генерируемого содержимого
• counter-increment - приращение счётчика
• counter-reset - имя счётчика
• quotes - добавление кавычек заданного типа

13. Тень

• box-shadow - тень блока

14. Переходы

• transition - краткая запись перехода
• transition-delay - задержка перехода
• transition-duration - продолжительность перехода
• transition-property - название свойств, к которым будет применен перехода
• transition-timing-function - функция перехода

15. Трансформации

• backface-visibility - видимость обратной стороны элемента
• perspective - активация 3D-пространства для элемента
• perspective-origin - точка 3D-трансформации
• transform - функция 2D-трансформации
• transform-origin - точка 2D-трансформации
• transform-style - стиль 3D-преобразований

16. Анимация

• animation - краткая запись всех свойств анимации
• animation-name - название анимации
• animation-duration - длительность анимации
• animation-delay - задержка анимации
• animation-direction - направление повтора анимации
• animation-fill-mode - состояние элемента до и после воспроизведения анимации
• animation-iteration-count - число повторов анимации
• animation-play-state - остановка анимации
• animation-timing-function - функция изменения скорости анимации во времени

17. Flexbox

• flex - задание базовой ширины и трансформации элемента одним свойством
• flex-basis - базовая ширина элемента
• flex-grow - коэффициент увеличения ширины flex-элемента
• flex-shrink - коэффициент уменьшения ширины flex-элемента
• flex-flow - краткая запись направления и многострочности
• flex-direction - направление главной оси flex-контейнера
• flex-wrap - многострочность элементов
• align-content - многострочное выравнивание
• align-items - выравнивание элементов по вертикали
• align-self - выравнивание отдельных элементов
• order - порядок отображения элементов
• justify-content - выравнивание элементов по горизонтали

18. Колонки

• column-rule - краткая запись стилей разделительной линии
• column-rule-width - толщина разделительной линии
• column-rule-style - тип разделительной линии
• column-rule-color - цвет разделительной линии
• columns - задание колонок с помощью одного свойства
• column-count - количество колонок
• column-width - ширина колонок
• column-gap - ширина пустого пространства между колонками
• column-span - позиционирование элемента на несколько колонок
• column-fill - заполнение колонок содержимым

19. Печать документов

• page-break-after - наличие или отсутствие разрыва страницы после выбранного элемента
• page-break-before - наличие или отсутствие разрыва страницы перед выбранным элементом
• page-break-inside - наличие или отсутствие разрыва страницы внутри выбранного элемента

20. Сетка grid

• gap - сокращенная запись промежутков между элементами сетки
• grid - краткая запись сетки
• grid-area - сокращенная запись свойств размещения с помощью линий сетки
• grid-auto-columns - установка размера автоматических столбцов сетки
• grid-auto-flow - автоматическое размещение элементов сетки
• grid-auto-rows - установка размера неявных строк сетки
• grid-column - краткая запись свойств размещения элементов сетки в столбце
• grid-column-end - конечная линия столбца
• column-gap - промежутки между столбцами сетки
• grid-column-start - начальная линия столбца
• grid-row - краткая запись свойств размещения элементов сетки в строке
• grid-row-end - конечная линия строки
• row-gap - промежутки между строками сетки
• grid-row-start - начальная линия строки
• grid-template - краткая запись явной сетки
• grid-template-areas - задание именованных областей сетки
• grid-template-columns - задание столбцов сетки
• grid-template-rows - задание строк сетки

21. Пользовательский интерфейс

• outline - задание внешнего контура одним свойством
• outline-color - цвет внешнего контура
• outline-offset - смещение внешнего контура
• outline-style - стиль линии внешнего контура
• outline-width - толщина линии внешнего контура
• resize - изменение размеров блока по ширине и высоте
• cursor - стилизация курсора
• caret-color - цвет каретки вставки

22. Объединение и смешивание слоев

• mix-blend-mode - определяет формулу смешивания цветов исходного элемента с фоновым слоем
• isolation - предотвращает смешивание элемента с его фоном
• background-blend-mode - определяет режим смешивания каждого фонового слоя

23. Фрагментация

• break-before - определяет поведение разрыва до элемента
• break-aftere - определяет поведение разрыва после элемента
• break-inside - определяет поведение разрыва внутри элемента
• orphans и widows - определяют минимальное количество строк в элементе в нижней и верхней части фрагмента до и после разрыва страницы или колонки
• box-decoration-break - управляет оформлением фрагментов при их разрыве внутри блока

Правила

• @charset - правило для задания кодировки символов, используемое в таблице стилей
• @font-face - подключение пользовательских шрифтов
• @import - правило для загрузки внешних таблиц стилей в выбранную таблицу стилей
• @keyframes - правило для ключевых моментов анимации
• @media - правило медиазапроса
• @page - правило для изменения некоторых свойств при печати документа

Селекторы

Простые

• имя тега - селектор тега - определяет указанные элементы для форматирования
• . - селектор класса - отбирает элементы с заданным классом для форматирования
• # - селектор идентификатора - отбирает элемент с указанным идентификатором для форматирования
• * - универсальный селектор - применяет заданные свойства для всех элементов страницы

Атрибута

• E[attr] - элементы данного типа, содержащие указанный атрибут
• E[attr="value"] - элементы, значение атрибута которых равно указанному значению
• E[attr ~="value"] - элементы, значение атрибута которых частично содержит данное значение
• E[attr|="value"] - элементы, список значений атрибута которых начинается с указанного значения
• E[attr^="value"] - элементы, значение атрибута которых начинается с указанного значения
• E[attr$="value"] - элементы, значение атрибута которых заканчивается указанным значением
• E[attr*="value"] - элементы, значение атрибута которых содержит в любом месте указанное значение

Комбинации

• E F - селектор потомка - выберет все элементы F, расположенные внутри E
• E > F - дочерний селектор - выберет все элементы F, вложенные непосредственно в E (первый уровень вложенности)
• E + F - сестринский селектор - выберет каждый первый элемент F, идущий сразу за тегом E
• E ~ F - сестринский селектор - выберет все элементы F, являющиеся сестринскими по отношению к любому E (расположенные на одном уровне)

Псевдоклассы

• ::placeholder - замещающий текст-подсказка, выводящийся внутри элементов <input> и <textarea>
• :checked - элементы <input type="radio">, <input type="checkbox">, а также <option>, находящиеся внутри элемента <select>
• :disabled - заблокированные для выбора и изменения элементы форм
• :enabled - не заблокированные для выбора и изменения элементы форм
• :indeterminate - элементы радио и чекбокс, находящиеся в неопределённом состоянии
• :in-range - поля формы с установленным диапазоном ограничения
• :invalid - поля формы, значение которых является недопустимым согласно его типу, указанному в атрибуте type
• :optional - поля формы, для которых не задан атрибут required
• :out-of-range - поля формы, имеющие ограничения на ввод значений
• :read-only - элементы, для которых задан атрибут readonly или contenteditable
• :required - поля формы, для которых установлен атрибут required
• :valid - поля формы, введенные значения которых соответствуют типу, указанному в атрибуте type или находящиеся в разрешенном диапазоне
• :nth-child() - отбор элементов на основе их индекса
• :first-child - первый дочерний элемент
• :last-child - последний дочерний элемент в родительском контейнере
• :nth-last-child() - отбор элементов на основе их индекса, начиная с последнего элемента
• :only-child - единственный дочерний элемент
• :nth-of-type() - отбор элементов одного типа на основе их индекса внутри контейнера
• :nth-last-of-type() - отбор элементов одного типа на основе их индекса внутри контейнера, начиная с последнего элемента к первому
• :first-of-type - первый элемент данного типа среди дочерних элементов родительского элемента-контейнера
• :last-of-type - последний элемент данного типа среди дочерних элементов родительского элемента-контейнера
• :only-of-type - единственный элемент данного типа в родительском элементе-контейнере
• :link - не посещенная ссылка
• :visited - посещенная ссылка
• :hover - ссылки и другие элементы, на которые навели курсор мыши
• :active - элемент, активированный с помощью клика мышки
• :focus - применяется, когда элемент имеет фокус - принимает события клавиатуры или мыши или другие формы ввода
• :target - элемент с якорем
• :lang() - отбор элементов на указанном языке
• :not() - отбор элементов, не содержащих указанное значение аргумента
• :empty - элемент, не содержащий ни одного дочернего элемента
• :root - корневой элемент в документе

Псевдоэлементы

• :after - добавление генерируемого содержимого после элемента
• :before - добавление генерируемого содержимого перед элементом
• :first-letter - форматирование первой буквы абзаца
• :first-line - форматирование первой строки абзаца
• ::selection - цвет фона при выделении текста на странице с помощью зажатой левой кнопки мыши или другого способа

Медиатипы

• all - все типы устройств
• print - страничные материалы и документы, просматриваемые на экране в режиме предварительного просмотра печати
• screen - экраны цветных компьютерных мониторов
• speech - синтезаторы речи

Функции

• attr() - добавление значения атрибута с помощью свойства content
• calc() - задание вычисляемых значений css-свойств
• counter() - отображает текущее значение счетчика
• counters() - создает вложенную нумерацию
• hsl() - задания цветов в формате HSL
• hsla() - полупрозрачный цвет в формате HSL
• rgb() - задание цвета с помощью цветовой модели RGB
• rgba() - полупрозрачный цвет в формате RGB
• linear-gradient() - линейный градиент
• radial-gradient() - радиальный градиент
• repeating-linear-gradient() - повтор линейного градиента
• repeating-radial-gradient() - повтор радиального градиента
• rotate() - поворот на заданный угол
• rotateX() - поворот относительно оси X
• rotateY() - поворот относительно оси Y
• rotateZ() - поворот относительно оси Z
• rotate3d() - поворот элемента по часовой стрелке относительно трех осей
• scale() - увеличение/уменьшение элемента
• scaleX() - масштабирование элемента по ширине
• scaleY() - масштабирование элемента по высоте
• scaleZ() - масштабирование элемента в направлении оси Z
• scale3d() - трёхмерное масштабирование
• skew() - деформирование (искажение) сторон элемента относительно координатных осей
• skewX() - искажение сторон элемента относительно оси X
• skewY() - искажение сторон элемента относительно оси Y
• translate() - перемещение элемента с использованием координат x и y
• translateX() - сдвиг элемента по оси X
• translateY() - сдвиг элемента по оси Y
• translateZ() - перемещение элемента в направлении оси Z
• translate3d() - перемещение элемента в 3D-пространстве
• matrix() - трансформирование элемента с помощью нескольких функций 2D-трансформаций одновременно
• matrix3d() - трансформирование элемента с помощью нескольких функций 3D-трансформаций одновременно
• perspective() - установка 3D-перспективы только для одного элемента
• url() - добавление медиа-содержимого

Фильтры

• blur() - размытие изображения
• brightness() - изменение яркости изображения
• contrast() - изменение контраста изображения
• drop-shadow() - тень элемента
• grayscale() - чёрно-белый фильтр
• hue-rotate() - смена цветов изображения в зависимости от заданного угла поворота в цветовом круге
• invert() - негатив изображения
• opacity() - прозрачность
• saturate() - изменение насыщенности цветов
• sepia() - эффект, имитирующий старину и «ретро»
• url() - добавление SVG-фильтра