Свойства по алфавиту

A

B

C

D

E

F

G

H

I

J

L

M

O

P

Q

R

S

T

U

V

W

Z

Свойства по разделам

1. Текст

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

3. Шрифты

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. Рамка

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

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

13. Тень

14. Переходы

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

16. Анимация

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-фильтра

©Елена Назарова Сделано с любовью