Шрифты, текст, ссылки
- font - краткая запись свойств шрифта
- font-style - стиль начертания шрифта
- font-variant - вариант начертания шрифта
- font-weight - насыщенность шрифта
- font-size - размер шрифта
- font-family - семейство шрифтов
- 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)
Таблицы
- border-collapse - удаление промежутка между рамками ячеек
- border-spacing - увеличение промежутка между рамками ячеек
- caption-side - управление местоположением подписи к таблице
- empty-cells - скрытие пустых ячеек
- table-layout - компоновка макета таблицы
Списки
|
|
- list-style - краткая форма задания стилей списка
- list-style-type - тип маркера списка
- list-style-image - маркер-изображение для элементов списка
- list-style-position - местоположение маркера списка
Блочная модель
- 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 - управление расчётом ширины и высоты элемента с учётом внутренних отступов и толщины рамки
- resize - позволяет растягивать элемент в ширину и высоту
Позиционирование и обтекание
- position - управление положением элементов
- bottom - смещение относительно нижней стороны блока-контейнера
- left - смещение относительно левой стороны блока-контейнера
- right - смещение относительно правой стороны блока-контейнера
- top - смещение относительно верхней стороны блока-контейнера
- float - перемещение элементов с выравниванием по левому или правому краю блока-контейнера
- clear - отмена обтекания с одной или обоих сторон элемента
- z-index - наложение элементов
- object-fit - управляет заполнением контейнера для содержимого замещаемых элементов
- object-position - позиционирует содержимое замещаемых элементов внутри контейнера относительно осей X и Y
Обрезка
|
|
- text-overflow - обрезка строк
- clip - обрезка части элемента
- overflow - добавление полос прокрутки или скрытие содержимого
- overflow-x - обрезка правого края контента внутри блока в случае его переполнения
- overflow-y - обрезка нижнего края контента внутри блока в случае его переполнения
Видимость элемента
- opacity - прозрачность элемента
- visibility - управление видимостью элемента
Фон
- background - задание фона элемента одним свойством
- background-color - цвет фона
- background-image - фоновое изображение
- background-position - положение фонового изображения
- background-repeat - повтор фонового изображения
- background-size - размер фонового изображения
- background-attachment - фиксация фонового изображения на месте
- background-clip - заполнение фоном отступов и границ элемента
- background-origin - положение фонового изображения относительно его родительского блока
- background-blend-mode - режим смешивания фоновых слоёв, заданных в свойстве background-image
Рамка
- 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 - толщина рамки-изображения
- outline - задание внешнего контура одним свойством
- outline-color - цвет внешнего контура
- outline-offset - смещение внешнего контура
- outline-style - стиль линии внешнего контура
- outline-width - толщина линии внешнего контура
Генерируемое содержимое
- content - добавление генерируемого содержимого
- counter-increment - приращение счётчика
- counter-reset - имя счётчика
- quotes - добавление кавычек заданного типа
Тень
- text-shadow - тень текста
- box-shadow - тень блока
Переходы
- transition - краткая запись перехода
- transition-delay - задержка перехода
- transition-duration - продолжительность перехода
- transition-property - название свойств, к которым будет применен перехода
- transition-timing-function - функция перехода
Трансформации
- backface-visibility - видимость обратной стороны элемента
- perspective - активация 3D-пространства для элемента
- perspective-origin - точка 3D-трансформации
- transform - функция 2D-трансформации
- transform-origin - точка 2D-трансформации
- transform-style - стиль 3D-преобразований
Анимация
- animation - краткая запись всех свойств анимации
- animation-name - название анимации
- animation-duration - длительность анимации
- animation-delay - задержка анимации
- animation-direction - направление повтора анимации
- animation-fill-mode - состояние элемента до и после воспроизведения анимации
- animation-iteration-count - число повторов анимации
- animation-play-state - остановка анимации
- animation-timing-function - функция изменения скорости анимации во времени
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 - выравнивание элементов по горизонтали
Колонки
|
|
- column-rule - краткая запись стилей разделительной линии
- column-rule-width - толщина разделительной линии
- column-rule-style - тип разделительной линии
- column-rule-color - цвет разделительной линии
- columns - задание колонок с помощью одного свойства
- column-count - количество колонок
- column-width - ширина колонок
- column-gap - ширина пустого пространства между колонками
- column-span - позиционирование элемента на несколько колонок
Печать документов
- 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-фильтра