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

A

B

C

D

E

F

H

J

L

M

O

P

Q

R

T

U

V

W

Z

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

1. Шрифты, текст, ссылки

  • font - краткая запись свойств шрифта
  • line-height - высота строки
  • text-align - горизонтальное выравнивание строк
  • text-indent - отступ первой строки
  • text-decoration - подчёркивание ссылок, текста
  • text-transform - трансформирование текста
  • color - цвет текста
  • white-space - обработка пробелов между словами
  • word-break - перенос длинных слов в строках
  • letter-spacing - расстояние между буквами (символами)
  • word-spacing - расстояние между словами
  • word-wrap - разрыв длинных слов
  • cursor - управление внешним видом курсора
  • vertical-align - вертикальное выравнивание строчных элементов, изображений и полей форм
  • tab-size - настройка табуляции
  • direction - направление написания слов в тексте
  • unicode-bidi - направление написания слов в тексте (используется вместе с direction)

2. Таблицы

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

3. Списки

  • list-style - краткая форма задания стилей списка

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

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

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

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

6. Обрезка

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

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

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

8. Фон

  • background - задание фона элемента одним свойством
  • background-blend-mode - режим смешивания фоновых слоёв, заданных в свойстве background-image

9. Рамка

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

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

11. Тень

12. Переходы

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

14. Анимация

15. 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 - выравнивание элементов по горизонтали

16. Колонки

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

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

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

Правила

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

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

Яндекс.Метрика