CSS справочник

CSS справочник содержит перечень css-свойств, правил, псевдоклассов и функций, поддерживаемых основными браузерами. Экспериментальные, устаревшие свойства, а также свойства с ограниченной поддержкой браузерами, не включены в данный перечень. Прочитать подробную информацию о свойстве можно перейдя по ссылке-названию свойства.

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

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

Списки

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

Таблицы

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

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

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

Колонки

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

Флексбокс

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

Позиционирование, обрезка, наложение, скрытие элемента, управление кликабельностью

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

Фон

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

Рамка

Анимация

Переходы

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

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

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

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

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

Правила

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

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

  • ::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 — цвет фона при выделении текста на странице с помощью зажатой левой кнопки мыши или другого способа

Функции

  • 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() — добавление медиа-содержимого

Фильтры

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

    Не плохо было бы добавить версию для печати, с небольшим описанием и примером свойства или функции.

    • Согласна, неплохо было бы. Я подумаю над этим, так как это очень трудоёмкая работа. Как вариант, можно сделать скачивание за символическую плату.

      • Алеша Попович

        Вариант с описанием и примером функции или свойства под спойлером был бы не плох. А то при работе кликаешь и переходишь на новую страницу с описанием функции или свойства, и это крайне не удобно.

        • Спасибо, над этим тоже подумаю.

          • Алеша Попович

            И вам спасибо за ваши труды и понимание.

          • Пожалуйста! Согласна, что краткое описание должно быть. В голове всё не удержишь. А по страницам переходить — долго.

  • Ринат

    pointer-events, background-blend-mode, will-change — нерабочие ссылки.

    • Спасибо, я знаю. Ещё не дописала статьи, на время уберу из справочника.

  • Ринат

    Это не полный список свойств? Appearance не нашел.

    • Это полный список поддерживаемых основными браузерами свойств (за редким исключением IE). Насколько я знаю, свойство appearance в чистом виде не работает. Существуют версии с браузерными префиксами.

  • Можно сказать 100%, за исключением тех, что не дописала. Я не включаю в перечень свойства, которые работают в каком-то одном браузере или вообще не работают, но, к примеру, на сайте w3schools присутствуют.

  • Igor

    А, может быть, для поддержки и развития сайта Вам нужны помощники из начинающих? Готов помогать за опыт.