Справочник по CSS

Свойства

  • color

    color

    Определяет цвет текста элемента.

  • font-family

    font-family

    Устанавливает семейство шрифта, которое будет использоваться для оформления текста содержимого. Список шрифтов может включать одно или несколько названий, разделённых запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в одинарные или двойные кавычки.

  • background

    background

    Универсальное свойство background позволяет установить одновременно несколько характеристик фона. Значения могут идти в любом порядке, браузер сам определит, какое из них соответствует нужному свойству. Для подробного ознакомления смотрите информацию о каждом свойстве отдельно. Допустимо, также, указывать параметры сразу нескольких фонов, перечисляя их через запятую.

  • background-image

    background-image

    Устанавливает фоновое изображение для элемента. Если одновременно для элемента задан цвет фона, он будет показан, пока фоновая картинка не загрузится полностью. То же произойдет, если изображения не доступны или их показ в браузере отключен. В случае наличия в рисунке прозрачных областей, через них будет проглядывать фоновый цвет. Допустимо указывать несколько фоновых изображений, перечисляя их параметры через запятую.

  • background-color

    background-color

    Определяет цвет фона элемента. Хотя это свойство не наследует свойства своего родителя, из-за того, что начальное значение устанавливается прозрачным, цвет фона дочерних элементов совпадает с цветом фона родительского элемента.

  • background-attachment

    background-attachment

    Свойство background-attachment устанавливает, будет ли прокручиваться фоновое изображение вместе с содержимым элемента. Изображение может быть зафиксировано и оставаться неподвижным, либо перемещаться совместно с документом. Можно указать несколько значений для ряда фоновых изображений, перечисляя значения через запятую.

  • margin

    margin

    Устанавливает величину отступа от каждого края элемента. Отступом является пространство от границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

  • overflow

    overflow

    Свойство overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров.

  • text-align

    text-align

    Определяет горизонтальное выравнивание текста в пределах элемента.

  • caption-side

    caption-side

    Определяет положение заголовка таблицы, который задается с помощью элемента <caption>, относительно самой таблицы. Свойство caption-side выводит заголовок до или после таблицы, а выравнивание текста по правому или левому краю устанавливается через свойство text-align.

  • border

    border

    Универсальное свойство border позволяет одновременно установить толщину, стиль и цвет границы вокруг элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству. Для установки границы только на определённых сторонах элемента, воспользуйтесь свойствами border-top, border-bottom, border-left, border-right.

  • width

    width

    Устанавливает ширину содержимого элемента. По умолчанию ширина зависит от типа элемента: блочные занимают всю доступную ширину; ширина строчно-блочных равна ширине их содержимому. Свойство width позволяет явно задать желаемую ширину элемента, несмотря на его исходное поведение.

  • visibility

    visibility

    Предназначен для отображения или скрытия элемента, включая рамку вокруг него и фон. При скрытии элемента, хотя он и становится не виден, место, которое элемент занимает, остаётся за ним. Если предполагается вывод разных элементов в одно и то же место экрана, для обхода этой особенности следует использовать абсолютное позиционирование или воспользоваться свойством display.

  • vertical-align

    vertical-align

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

  • padding

    padding

    Устанавливает значение полей вокруг содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

  • white-space

    white-space

    Свойство white-space устанавливает, как отображать пробелы между словами. В обычных условиях любое количество пробелов в коде HTML показывается на веб-странице как один. Исключением является элемент <pre>, помещённый в этот контейнер текст выводится со всеми пробелами, как он был отформатирован пользователем. Таким образом, white-space имитирует работу <pre>, но в отличие от него не меняет шрифт на моноширинный.

  • quotes

    quotes

    Устанавливает тип кавычек, который применяется в тексте документа. В каждом языке существуют свои традиции для обозначения кавычек, свойство quotes позволяет задать вид их отображения по всему тексту и установить, таким образом, его единообразное оформление. Добавление кавычек происходит автоматически для содержимого контейнера <q>, а также для текста, к которому применяется стилевое свойство content со значением open-quote (открывающая кавычка) или close-quote (закрывающая кавычка).

  • text-decoration

    text-decoration

    Добавляет оформление текста в виде его подчёркивания, перечёркивания или линии над текстом. Одновременно можно применить более одного стиля, перечисляя значения через пробел.

  • list-style

    list-style

    Универсальное свойство, позволяющее одновременно задать стиль маркера, его положение, а также изображение, которое будет использоваться в качестве маркера списка.

  • columns

    columns

    Универсальное свойство, которое позволяет одновременно задать ширину и количество колонок многоколоночного текста.

  • border-left

    border-left

    Свойство border-left позволяет одновременно установить толщину, стиль и цвет левой границы элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.

  • border-right

    border-right

    Свойство border-right позволяет одновременно установить толщину, стиль и цвет правой границы элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.

  • border-top

    border-top

    Свойство border-top позволяет одновременно установить толщину, стиль и цвет границы сверху элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.

  • border-bottom

    border-bottom

    Свойство позволяет одновременно установить толщину, стиль и цвет границы внизу элемента. Значения могут идти в любом порядке, разделяясь пробелом, браузер сам определит, какое из них соответствует нужному свойству.

  • border-spacing

    border-spacing

    Задаёт расстояние между границами ячеек в таблице. border-spacing не работает в случае, когда для таблицы установлено свойство border-collapse со значением collapse.

  • height

    height

    Устанавливает высоту содержимого элемента. По умолчанию высота определяется автоматически, исходя из содержимого элемента, но если задать фиксированное значение высоты, то она будет установлена, несмотря на объём содержимого. Если содержимое элемента превышает указанное значение высоты, то высота элемента останется неизменной, а содержимое будет отображаться поверх него. Из-за этой особенности может получиться наложение содержимого элементов друг на друга, когда элементы в коде HTML идут последовательно. Чтобы этого не произошло, добавьте свойство overflow со значением auto к стилю элемента.

  • animation

    animation

    Универсальное свойство, которое задаёт сразу несколько параметров анимации.

  • animation-duration

    animation-duration

    Задаёт время в секундах или миллисекундах, сколько должен длиться один цикл анимации. По умолчанию значение равно 0s, это означает, что никакой анимации нет.

  • animation-timing-function

    animation-timing-function

    Устанавливает, согласно какой функции времени должна происходить анимация каждого цикла между ключевыми кадрами. Она представляет собой математическую функцию, показывающую, как быстро по времени меняется значение свойства. Начальная точка имеет координаты 0.0, 0.0, конечная — 1.0, 1.0, при этом функция по оси ординат может превышать эти значения в большую или меньшую сторону (рис. 1).

  • animation-delay

    animation-delay

    Свойство animation-delay устанавливает время ожидания перед запуском цикла анимации. Значение 0s или 0ms запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.

  • animation-iteration-count

    animation-iteration-count

    Свойство определяет, сколько раз проигрывать цикл анимации до её остановки.

  • animation-direction

    animation-direction

    Устанавливает направление движения анимации.

  • animation-fill-mode

    animation-fill-mode

    Определяет, какие стили должны применяться к элементу, когда анимация не проигрывается. Например, после её завершения или при остановке. По умолчанию, в момент окончания анимации стиль элемента возвращается к исходному, свойство animation-fill-mode позволяет изменить это поведение и сделать так, чтобы стиль элемента оставался как у последнего ключевого кадра.

  • animation-play-state

    animation-play-state

    Свойство определяет, проигрывать анимацию или поставить её на паузу. При продолжении установленной на паузе анимации она начинается с того момента где была остановлена.

  • animation-name

    animation-name

    Устанавливает одну или несколько анимаций, которые применяются к элементу. Представляет собой имя, связанное с правилом @keyframes, оно в свою очередь задаёт последовательность движения.

  • float

    float

    Определяет, по какой стороне будет выравниваться элемент, при этом остальные элементы будут обтекать его с других сторон. Когда значение свойства float равно none, элемент выводится на странице как обычно, при этом допускается, что одна строка обтекающего текста может быть на той же линии, что и сам элемент.

  • clear

    clear

    Отменяет действие float с указанной стороны для вышестоящих элементов.

  • border-width

    border-width

    Задаёт толщину границы одновременно на всех сторонах элемента или индивидуально для каждой стороны. Способ изменения толщины зависит от числа значений.

  • border-style

    border-style

    Устанавливает стиль границы вокруг элемента. Допустимо задавать индивидуальные стили для разных сторон элемента.

  • border-color

    border-color

    Устанавливает цвет границы на разных сторонах элемента. Свойство позволяет задать цвет границы сразу для всех сторон элемента или только для указанных.

  • background-position

    background-position

    Задаёт начальное положение фонового изображения, установленного с помощью свойства background-image. Допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.

  • background-size

    background-size

    Масштабирует фоновое изображение, согласно заданным размерам.

  • background-repeat

    background-repeat

    Определяет, как будет повторяться фоновое изображение, установленное с помощью свойства background-image. Можно установить повторение рисунка только по горизонтали, по вертикали или в обе стороны. Допустимо указывать несколько значений для каждого фона, перечисляя значения через запятую.

  • background-origin

    background-origin

    Свойство background-origin определяет область позиционирования фонового рисунка. Это свойство не применяется, когда значение background-attachment задано как fixed.

  • background-clip

    background-clip

    Определяет, как цвет фона или фоновая картинка должна выводиться под границами. Эффект заметен при прозрачных или пунктирных границах.

  • box-sizing

    box-sizing

    Применяется для изменения алгоритма расчёта ширины и высоты элемента.

  • display

    display

    Многоцелевое свойство, которое определяет, как элемент должен быть показан в документе.

  • column-width

    column-width

    Задаёт оптимальную ширину колонки в многоколоночном тексте. Реальная ширина колонки может быть больше введённого значения; сокращение указанной ширины приводит к отмене нескольких колонок, текст при этом выстраивается в одну колонку.

  • column-count

    column-count

    Определяет количество колонок в многоколоночном тексте.

  • content

    content

    Свойство content позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует. Применяется совместно с псевдоэлементами ::after и ::before, они соответственно указывают отображать новое содержимое после или до содержимого элемента, к которому добавляются.

  • text-decoration-line

    text-decoration-line

    Определяет, как должна добавляться декоративная линия к тексту — подчёркивание, перечёркивание, над текстом. Одновременно можно добавлять несколько линий, перечисляя значения через пробел.

  • text-decoration-style

    text-decoration-style

    Устанавливает стиль декоративной линии, которая добавляется к тексту через свойство text-decoration или text-decoration-line.

  • text-decoration-color

    text-decoration-color

    Устанавливает цвет линии, которая добавляется через свойство text-decoration.

  • table-layout

    table-layout

    Определяет, как браузер должен вычислять ширину ячеек таблицы, основываясь на её содержимом.

  • align-content

    align-content

    Задаёт тип выравнивания строк внутри флекс-контейнера по поперечной оси при наличии свободного пространства.

  • align-items

    align-items

    Свойство align-items выравнивает флекс-элементы внутри контейнера в перпендикулярном направлении.

  • align-self

    align-self

    Свойство align-self выравнивает флекс-элементы текущей строки, переписывая значение align-items.

  • all

    all

    Универсальное свойство, которое сбрасывает все значения свойств в исходные или наследуемые, за исключением свойств direction и unicode-bidi.

  • backdrop-filter

    backdrop-filter

    Позволяет применить эффекты вроде размытия к области фонового рисунка, расположенной за элементом. Чтобы эффект стал заметен, сам элемент должен быть частично прозрачным.

  • backface-visibility

    backface-visibility

    Определяет, показывать обратную сторону элемента или нет. Как правило, обратная сторона становится видна при трансформации элемента, например, при его вращении относительно горизонтальной или вертикальной оси в трёхмерном пространстве. В обычной ситуации свойство backface-visibility не оказывает влияния на отображение элемента.

  • background-blend-mode

    background-blend-mode

    Определяет режим наложения фонового изображения на фоновый цвет или другие фоновые изображения. Допустимо указывать несколько значений через запятую, при этом они будут применяться к фоновым изображениям, перечисленных в background-image, в том же порядке.

  • background-position-x

    background-position-x

    Задаёт положение фонового изображения внутри элемента по горизонтали. Если для элемента установлено несколько фоновых изображений, то можно изменять положение каждого изображения, перечисляя значения через запятую.

  • background-position-y

    background-position-y

    Задаёт положение фонового изображения внутри элемента по вертикали. Если для элемента установлено несколько фоновых изображений, то можно изменять положение каждого изображения, перечисляя значения через запятую.

  • block-size

    block-size

    Определяет размер элемента по блочной оси, направление которой зависит от значения свойства writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) блочная ось будет вертикальной и block-size устанавливает высоту элемента. Для вертикального направления письма (writing-mode: vertical-lr и writing-mode: vertical-rl) блочная ось будет горизонтальной и block-size устанавливает ширину элемента.

  • border-bottom-color

    border-bottom-color

    Устанавливает цвет границы внизу элемента.

  • border-bottom-left-radius

    border-bottom-left-radius

    Устанавливает радиус скругления левого нижнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

  • border-bottom-right-radius

    border-bottom-right-radius

    Устанавливает радиус скругления правого нижнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

  • border-bottom-style

    border-bottom-style

    Устанавливает стиль границы внизу элемента.

  • border-bottom-width

    border-bottom-width

    Устанавливает толщину границы внизу элемента.

  • border-collapse

    border-collapse

    Устанавливает, как отображать границы вокруг ячеек таблицы. Это свойство играет роль, когда для ячеек установлена рамка, тогда в месте стыка ячеек получится линия двойной толщины (рис. 1а). Значение collapse заставляет браузер анализировать подобные места в таблице и убирать в ней двойные линии (рис. 1б). При этом между ячейками остаётся только одна граница, одновременно принадлежащая обеим ячейкам. То же правило соблюдается и для внешних границ, когда вокруг самой таблицы добавляется рамка.

  • border-image

    border-image

    Используется для отображения рисованной рамки вокруг элемента. Толщина рамки задаётся свойством border, при этом если указано border: 0, то рамка не выводится. При других значениях border рисунок всегда имеет приоритет. Фон, если он задан через свойство background, отображается под рамкой.

  • border-left-color

    border-left-color

    Задаёт цвет границы слева от элемента.

  • border-left-style

    border-left-style

    Устанавливает стиль границы слева от элемента.

  • border-left-width

    border-left-width

    Устанавливает толщину границы слева от элемента.

  • border-radius

    border-radius

    Устанавливает радиус скругления уголков рамки. Если рамка не задана, то скругление также происходит и с фоном.

  • border-right-color

    border-right-color

    Задаёт цвет границы справа от элемента.

  • border-right-style

    border-right-style

    Устанавливает стиль границы справа от элемента.

  • border-right-width

    border-right-width

    Устанавливает толщину границы справа от элемента.

  • border-top-color

    border-top-color

    Задаёт цвет границы сверху элемента.

  • border-top-left-radius

    border-top-left-radius

    Устанавливает радиус скругления левого верхнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

  • border-top-right-radius

    border-top-right-radius

    Устанавливает радиус скругления правого верхнего уголка рамки. Если рамка не задана, то скругление также происходит и с фоном.

  • border-top-style

    border-top-style

    Устанавливает стиль границы сверху элемента.

  • border-top-width

    border-top-width

    Устанавливает толщину границы сверху элемента.

  • bottom

    bottom

    Устанавливает положение нижнего края содержимого элемента без учёта толщины рамок и отступов. Отсчёт координат зависит от свойства position, оно обычно принимает значение relative (относительное положение) или absolute (абсолютное положение).

  • box-decoration-break

    box-decoration-break

    Указывает, как оформлять фрагмент текста при его переносе на другую строку. Работает только для следующих свойств: background, border, border-image, box-shadow, clip-path, margin и padding.

  • box-shadow

    box-shadow

    Добавляет тень к элементу. Допускается использовать несколько теней, указывая их параметры через запятую, при наложении теней первая тень в списке будет выше, последняя ниже. Если для элемента задается радиус скругления через свойство border-radius, то тень также получится с закруглёнными уголками. Добавление тени увеличивает ширину элемента, поэтому возможно появление горизонтальной полосы прокрутки в браузере.

  • caret-color

    caret-color

    Задаёт цвет текстового курсора, который отображается в текстовых полях формы (<input>, <textarea>), а также для элементов с атрибутом contenteditable. Такой курсор по аналогии с печатными машинками также называется кареткой и показывает место ввода следующего символа. Как правило, текстовый курсор выглядит как вертикальная мигающая линия.

  • clip

    clip

    Свойство clip определяет область позиционированного элемента, в которой будет показано его содержимое. Всё, что не помещается в эту область, будет обрезано и становится невидимым. На данный момент единственная доступная форма области — прямоугольник.

  • column-fill

    column-fill

    Определяет, как содержимое должно распределяться внутри колонок.

  • column-gap

    column-gap

    Задаёт расстояние между колонками в многоколоночном тексте.

  • column-rule

    column-rule

    В многоколоночном тексте отрисовывает линию между колонок и определяет её параметры.

  • column-rule-color

    column-rule-color

    В многоколоночном тексте задаёт цвет линий между колонок. Если такой цвет явно не указан, то цвет текста в колонках и цвет линий между ними совпадает.

  • column-rule-style

    column-rule-style

    Определяет стиль линий между колонок в многоколоночном тексте.

  • column-rule-width

    column-rule-width

    В многоколоночном тексте задаёт толщину линий между колонок.

  • column-span

    column-span

    Определяет, как должен отображаться элемент в многоколоночном тексте — занимать ширину всех колонок или только одну из них. Это свойство обычно применяют для заголовков текста или изображений, которые не должны разбиваться на колонки.

  • counter-increment

    counter-increment

    Стилевое свойство counter-increment предназначено для увеличения значения счётчика приращений, который задается свойством counter-reset. Такой счётчик подсчитывает количество отображений элементов на странице и может выводиться с помощью свойства content и псевдоэлементов ::after и ::before. Это позволяет создавать списки (в том числе многоуровневые), в которых нумерация и вид задаются через стили.

  • counter-reset

    counter-reset

    Устанавливает переменную, в которой будет храниться счётчик отображений определенного элемента, а также начальное значение счётчика. Такой счётчик может выводиться с помощью свойства content и псевдоэлементов ::after и ::before.

  • cursor

    cursor

    Устанавливает форму курсора, когда он находится в пределах элемента. Вид курсора зависит от операционной системы и установленных параметров.

  • direction

    direction

    direction предназначен для сайтов, в которых имеет значение направление текста. Например, при использовании арабского алфавита чтение происходит справа налево.

  • empty-cells

    empty-cells

    Задаёт отображение границ и фона в ячейке, если она пустая. При одновременном добавлении к таблице свойства border-collapse со значением collapse, свойство empty-cells игнорируется.

  • filter

    filter

    Свойство filter предназначено для применения художественных эффектов к элементам. Обычно используется для изображений, чтобы размыть их, увеличить контрастность, преобразовать в чёрно-белую картинку и др.

  • flex

    flex

    Сокращённое свойство, которое позволяет указать параметры элемента, чтобы он эффективно заполнял доступное пространство. Элементы могут быть растянуты пропорционально с учётом заданного соотношения или сжаты, чтобы целиком вместить все элементы без переносов в одну строку.

  • flex-basis

    flex-basis

    Свойство flex-basis определяет основу флекса, которая является начальным размером элемента. Похоже на свойства width и height, к которым добавляется содержимое элемента.

  • flex-direction

    flex-direction

    Свойство flex-direction задаёт направление основных осей в контейнере и тем самым определяет положение флексов в контейнере. На само направление также влияет значение атрибута dir у контейнера.

  • flex-flow

    flex-flow

    Является сокращённым свойством для отдельных свойств flex-direction и flex-wrap.

  • flex-grow

    flex-grow

    Определяет, сколько пространства может занимать флекс внутри контейнера. В качестве значения принимаются числа, они задают пропорции каждого флекса. К примеру, если для всех элементов установлено значение 1, то они получатся равного размера. Если какой-то элемент получил значение 2, то его размер будет в два раза больше остальных.

  • flex-shrink

    flex-shrink

    Устанавливает коэффициент сжатия флексов в контейнере и задаёт, насколько элемент будет уменьшаться по отношению к другим флексам, чтобы разместить все элементы в одну строку.

  • flex-wrap

    flex-wrap

    Указывает, следует ли флексам располагаться в одну строку или можно занять несколько строк. Если перенос строк допускается, то свойство также позволяет контролировать направление, в котором выкладываются строки.

  • font

    font

    Универсальное свойство, которое позволяет одновременно задать несколько характеристик шрифта и текста.

  • hyphens

    hyphens

    Свойство hyphens сообщает браузеру, как расставлять переносы слов в блоке текста. Словарь переносов хранится в браузере и подключается при наличии атрибута lang с кодом языка. Так, для русского языка следует добавить lang="ru" к элементу <html> или непосредственно к абзацу текста. Правила переносов определяются браузером и могут различаться.

  • image-rendering

    image-rendering

    Сообщает браузеру, каким алгоритмом интерполировать изображение при масштабировании его размеров или изменении масштаба в параметрах браузера.

  • justify-content

    justify-content

    Определяет, как браузер распределяет пространство вокруг флекс-элементов вдоль главной оси контейнера. Это делается после того, как применяются размеры и автоматические отступы, за исключением ситуации, когда по крайней мере у одного элемента flex-grow больше нуля. При этом не остаётся никакого свободного пространства для манипулирования.

  • left

    left

    Для позиционированного элемента определяет расстояние от левого края родительского элемента, не включая отступ, поле и ширину рамки, до левого края дочернего элемента. Отсчёт координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его левого края (рис. 1).

  • letter-spacing

    letter-spacing

    Определяет интервал между символами в пределах элемента. Браузеры обычно устанавливают расстояние между символами, исходя из типа и вида шрифта, его размеров и настроек операционной системы. Чтобы изменить это значение и применяется данное свойство. Допустимо использовать отрицательное значение, но в этом случае надо убедиться, что сохраняется читабельность текста.

  • line-clamp

    line-clamp

    Ограничивает текст заданным числом строк. Если текст превышает указанное число строк, то текст обрезается и в конце добавляется многоточие.

  • line-height

    line-height

    Для блочных элементов определяет минимальную высоту строки текста. Для внедряемых строчных элементов (вроде <img>) свойство line-height не оказывает никакого эффекта. Для остальных строчных элементов line-height задаёт высоту, которая используется для расчёта высоты строки блока.

  • list-style-image

    list-style-image

    Устанавливает адрес изображения, которое служит в качестве маркера списка. Это свойство наследуется, поэтому для отдельных элементов списка для восстановления маркера используется значение none.

  • list-style-position

    list-style-position

    Определяет, как будет размещаться маркер относительно текста — маркер обтекается текстом (рис. 1) или вынесен за границу элемента списка (рис. 2).

  • list-style-type

    list-style-type

    Изменяет вид маркера для каждого элемента списка. Это свойство используется только в случае, когда значение list-style-image установлено как none. Маркеры различаются для маркированного списка (элемент <ul>) и нумерованного (элемент <ol>).

  • margin-bottom

    margin-bottom

    Устанавливает величину отступа от нижнего края элемента. Отступом является расстояние от внешнего края нижней границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

  • margin-left

    margin-left

    Устанавливает величину отступа от левого края элемента. Отступом является расстояние от внешнего края левой границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

  • margin-right

    margin-right

    Устанавливает величину отступа от правого края элемента. Отступом является расстояние от внешнего края правой границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

  • margin-top

    margin-top

    Устанавливает величину отступа от верхнего края элемента. Отступом является расстояние от внешнего края верхней границы текущего элемента до внутренней границы его родительского элемента (рис. 1).

  • max-height

    max-height

    Устанавливает максимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от значений установленных свойств height, max-height и min-height. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.

  • max-width

    max-width

    Устанавливает максимальную ширину элемента. Значение ширины элемента будет вычисляться в зависимости от значений установленных свойств width, max-width и min-width. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.

  • min-height

    min-height

    Задаёт минимальную высоту элемента. Значение высоты элемента будет вычисляться в зависимости от установленных значений свойств height, max-height и min-height. В табл. 1 показано, чем руководствуется браузер при совместном использовании указанных стилевых свойств.

  • min-width

    min-width

    Устанавливает минимальную ширину элемента. Если окно браузера по ширине становится меньше заданной минимальной ширины элемента, то ширина элемента остается неизменной, а в окне появляется горизонтальная полоса прокрутки.

  • mix-blend-mode

    mix-blend-mode

    Определяет режим наложения исходного цвета на фоновый цвет или фоновое изображение.

  • object-fit

    object-fit

    Управляет соотношением сторон заменяемых элементов, таких как <img> и <video>, когда у них задана ширина или высота, а также способом масштабирования. Свойство object-fit может сохранять исходные пропорции элемента или наоборот, искажать пропорции, в угоду соблюдения размеров.

  • opacity

    opacity

    Определяет уровень прозрачности элемента веб-страницы. При частичной или полной прозрачности через элемент проступает фоновый рисунок или другие элементы, расположенные ниже полупрозрачного объекта.

  • order

    order

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

  • orphans

    orphans

    Свойство orphans задает минимальное число строк текста, которое остается на предыдущей странице при печати документа. Это свойство работает в том случае, если весь текст размещается на двух и более печатных страницах.

  • outline

    outline

    Универсальное свойство, одновременно устанавливающее цвет, стиль и толщину внешней границы на всех четырёх сторонах элемента. В отличие от линии, задаваемой через border, у свойства outline есть следующие особенности:

  • outline-color

    outline-color

    Указывает цвет внешней границы элемента. В отличие от линии, задаваемой через border, линия через свойство outline отображается вокруг элемента, не влияя на ширину блока или его положение.

  • outline-offset

    outline-offset

    Устанавливает расстояние между рамкой, созданной с помощью свойства outline, и краем или границей элемента добавленной через border.

  • outline-style

    outline-style

    Устанавливает стиль внешней границы элемента. В отличие от линии, задаваемой через border, линия через outline отображается вокруг элемента, не влияя на ширину блока или его положение.

  • outline-width

    outline-width

    Определяет толщину внешней границы элемента. В отличие от свойства border-width, для outline-width нельзя задать границу для каждой стороны элемента индивидуально.

  • overflow-x

    overflow-x

    Свойство overflow-x управляет отображением содержания блочного элемента по горизонтали, если контент целиком не помещается и выходит за область справа или слева от блока.

  • overflow-y

    overflow-y

    Свойство overflow-y управляет отображением содержания блочного элемента по вертикали, если контент целиком не помещается и выходит за область сверху или снизу от блока.

  • padding-block

    padding-block

    Универсальное свойство, которое одновременно задаёт начальный и конечный внутренние отступы элемента по блочной оси. Направление оси зависит от значения свойства writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) блочная ось будет вертикальной и padding-block устанавливает отступы сверху и снизу. Для вертикального направления письма (writing-mode: vertical-lr и writing-mode: vertical-rl) блочная ось будет горизонтальной и padding-block устанавливает отступы слева и справа.

  • padding-block-end

    padding-block-end

    Определяет конечный внутренний отступ элемента по блочной оси. В зависимости от значения свойства writing-mode, свойство padding-block-end может соответствовать свойству padding-bottom, padding-right, padding-left. В табл. 1 показано положение padding-block-end в сочетании с другими свойствами.

  • padding-block-start

    padding-block-start

    Определяет начальный внутренний отступ элемента по блочной оси. В зависимости от значения свойства writing-mode, свойство padding-block-start может соответствовать свойству padding-top, padding-right, padding-left. В табл. 1 показано положение padding-block-start в сочетании с другими свойствами.

  • padding-bottom

    padding-bottom

    Устанавливает значение поля от нижнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

  • padding-inline

    padding-inline

    Универсальное свойство, которое одновременно задаёт начальный и конечный внутренние отступы элемента по строчной оси. Направление оси зависит от значения свойства writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) строчная ось будет горизонтальной и padding-inline устанавливает отступы слева и справа. Для вертикального направления письма (writing-mode: vertical-lr и writing-mode: vertical-rl) строчная ось будет вертикальной и padding-inline устанавливает отступы сверху и снизу.

  • padding-inline-end

    padding-inline-end

    Определяет начальный внутренний отступ элемента по строчной оси. В зависимости от значения свойства writing-mode и direction, свойство padding-inline-end может соответствовать свойству padding-top, padding-bottom, padding-right, padding-left. В табл. 1 показано положение padding-inline-end в сочетании с другими свойствами.

  • padding-inline-start

    padding-inline-start

    Определяет начальный внутренний отступ элемента по строчной оси. В зависимости от значения свойства writing-mode и direction, свойство padding-inline-start может соответствовать свойству padding-top, padding-bottom, padding-right, padding-left. В табл. 1 показано положение padding-inline-start в сочетании с другими свойствами.

  • padding-left

    padding-left

    Устанавливает значение поля от левого края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

  • padding-right

    padding-right

    Устанавливает значение поля от правого края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

  • padding-top

    padding-top

    Устанавливает значение поля от верхнего края содержимого элемента. Полем называется расстояние от внутреннего края рамки элемента до воображаемого прямоугольника, ограничивающего его содержимое (рис. 1).

  • page-break-after

    page-break-after

    Добавляет разрыв страницы при печати документа после заданного элемента.

  • page-break-before

    page-break-before

    Добавляет разрыв страницы при печати документа перед заданным элементом.

  • page-break-inside

    page-break-inside

    Разрешает или запрещает разрыв страницы внутри элемента при печати.

  • perspective

    perspective

    Определяет расстояние от плоскости экрана до точки сходимости линий и тем самым задаёт, насколько выражен эффект перспективы. Точка сходимости по умолчанию располагается в центре элемента и может быть изменена с помощью свойства perspective-origin.

  • perspective-origin

    perspective-origin

    Задаёт координаты точки, куда смотрит наблюдатель. Это свойство работает совместно со свойством perspective и определяет точку сходимости линий при перспективе.

  • place-content

    place-content

    Сокращённое свойство place-content одновременно устанавливает значения свойств align-content и justify-content.

  • pointer-events

    pointer-events

    Свойство pointer-events позволяет управлять тем, как элементы будут реагировать на события мыши или прикосновения к сенсорному экрану. Часто применяется для того, чтобы в сложной компоновке можно было взаимодействовать с нижележащими элементами, игнорируя вышележащие.

  • position

    position

    Устанавливает способ позиционирования элемента относительно окна браузера или других объектов на веб-странице.

  • resize

    resize

    Указывает, можно ли пользователю изменять размеры текстового поля.

  • right

    right

    Для позиционированного элемента определяет расстояние от правого края родительского элемента, не включая отступ, поле и ширину рамки, до правого края дочернего элемента. Отсчёт координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его правого края (рис. 1). В случае значения relative, right отсчитывается от правого края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от правого края родителя (рис. 2).

  • scroll-behavior

    scroll-behavior

    Определяет поведение прокрутки внутри элемента — плавная прокрутка или мгновенный переход.

  • tab-size

    tab-size

    Используется для изменения ширины отступа, заданного с помощью символа табуляции (клавиша Tab).

  • text-align-last

    text-align-last

    Задаёт выравнивание последней строки блока текста.

  • text-decoration-skip-ink

    text-decoration-skip-ink

    Задаёт, как выводить линию под или над текстом, когда линия пересекает выносные элементы букв, вроде «у», «р», «ц» и др. Линия может быть сплошной или прерываться, чтобы пропустить «хвостики» букв (рис. 1).

  • text-emphasis

    text-emphasis

    Сокращённое свойство, позволяющее установить значения свойств text-emphasis-style и text-emphasis-color одновременно.

  • text-emphasis-color

    text-emphasis-color

    Устанавливает цвет маркеров, отображаемых с помощью свойства text-emphasis-style.

  • text-emphasis-position

    text-emphasis-position

    Устанавливает положение маркеров, отображаемых с помощью свойства text-emphasis-style.

  • text-emphasis-style

    text-emphasis-style

    Устанавливает вид маркеров над каждым символом текста. Такие маркеры обычно используются в азиатских языках чтобы показать, как произносится слово. Для русского языка аналогом является знак ударения, который ставится над гласной буквой.

  • text-indent

    text-indent

    Устанавливает величину отступа первой строки блока текста (например, для абзаца <p>). Воздействия на все остальные строки не оказывает. Допускается отрицательное значение для создания выступа первой строки, но следует проверить, чтобы текст не выходил за пределы окна браузера.

  • text-orientation

    text-orientation

    Свойство text-orientation устанавливает ориентацию текстовых символов в строке и применяется только к вертикальному тексту (когда свойство writing-mode задано как vertical-lr или vertical-rl).

  • text-overflow

    text-overflow

    Определяет параметры видимости текста в блоке, если текст целиком не помещается в заданную область. Возможны два варианта: текст обрезается; текст обрезается и к концу строки добавляется многоточие. text-overflow работает в том случае, если для блока значение свойства overflow установлено как auto, scroll или hidden.

  • text-shadow

    text-shadow

    Добавляет тень к тексту, а также устанавливает её параметры: цвет тени, смещение относительно надписи и радиус размытия. Свойство text-shadow может работать совместно с псевдоэлементами :first-letter и :first-line.

  • text-transform

    text-transform

    Управляет преобразованием текста элемента в заглавные или прописные символы. Когда значение отлично от none, регистр исходного текста будет изменён.

  • top

    top

    Для позиционированного элемента определяет расстояние от верхнего края родительского элемента до верхнего края дочернего элемента. Отсчёт координат зависит от значения свойства position. Если оно равно absolute, в качестве родителя выступает окно браузера и положение элемента определяется от его верхнего края (рис. 1). В случае значения relative, top отсчитывается от верхнего края исходного положения элемента. Если для родительского элемента задано position: relative, то абсолютное позиционирование дочерних элементов определяет их положение от верхнего края родителя (рис. 2).

  • transform

    transform

    Трансформирует элемент, в частности, позволяет его масштабировать, вращать, сдвигать, наклонять, а также комбинировать виды трансформаций, перечисляя функции трансформации через пробел.

  • transform-origin

    transform-origin

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

  • transform-style

    transform-style

    Определяет, как дочерние элементы будут отображаться в 3D-пространстве. Это свойство должно использоваться совместно с transform.

  • transition

    transition

    Универсальное свойство, которое позволяет одновременно задать значения transition-property, transition-duration, transition-timing-function и transition-delay. Устанавливает эффект перехода между двумя состояниями элемента, они могут быть определены с помощью псевдокласса :hover или :active, а также динамически через JavaScript.

  • transition-delay

    transition-delay

    Свойство transition-delay устанавливает время ожидания перед запуском эффекта перехода. Значение 0s запускает анимацию сразу же. Отрицательное значение также включает анимацию без задержек, но может привести к изменению вида начала анимации.

  • transition-duration

    transition-duration

    Задаёт время в секундах или миллисекундах, сколько должна длиться анимация перехода до её завершения. По умолчанию значение равно 0s, это означает, что никакой анимации нет, переход происходит мгновенно.

  • transition-property

    transition-property

    Устанавливает имя стилевого свойства, значение которого будет отслеживаться для создания эффекта перехода.

  • transition-timing-function

    transition-timing-function

    Устанавливает, насколько быстро должно изменяться значение стилевого свойство для которого применяется эффект перехода.

  • unicode-bidi

    unicode-bidi

    В европейских языках чтение текста происходит слева направо, в то время как есть языки, где текст читается справа налево. При смешении в одном документе разных по написанию символов (русского с ивритом, к примеру) в системе юникод, их направление определяется браузером из характеристик и содержимого текста. Свойства unicode-bidi и direction задают, как должен располагаться текст используемого языка.

  • user-select

    user-select

    Управляет поведением выделения текста и других элементов на странице, в частности, позволяет запретить выделение текста. Обычно применяется для интерактивных элементов, на которые можно щёлкать, например, вкладки, и для которых выделение текста нежелательно.

  • widows

    widows

    Свойство widows задаёт минимальное число строк текста, которое располагается на следующей странице при печати документа. Это свойство работает в том случае, если весь текст размещается на двух и более печатных страницах. Если значение свойства widows конфликтует со значением orphans, то widows имеет приоритет и учитывается в первую очередь.

  • word-break

    word-break

    Свойство word-break указывает, как делать перенос строк внутри слов, которые не помещаются по ширине в заданную область.

  • word-spacing

    word-spacing

    Устанавливает интервал между словами. Если для текста задано выравнивание через text-align со значением justify (выравнивание по ширине), то интервал между словами будет установлен принудительно, но не меньше значения, указанного через word-spacing.

  • word-wrap

    word-wrap

    Свойство word-wrap указывает, переносить или нет длинные слова, которые не помещаются по ширине в заданную область.

  • writing-mode

    writing-mode

    Устанавливает направление текста на странице — по горизонтали или вертикали.

  • z-index

    z-index

    Любые позиционированные элементы на веб-странице могут накладываться друг на друга в определенном порядке, имитируя тем самым третье измерение, перпендикулярное экрану. Каждый элемент может находиться как ниже, так и выше других объектов веб-страницы, их размещением по z-оси и управляет z-index. Это свойство работает только для элементов, у которых значение position задано как absolute, fixed или relative.

  • zoom

    zoom

    Изменяет масштаб объекта согласно заданному значению.

  • inline-size

    inline-size

    Определяет размер элемента по строчной оси, направление которой зависит от значения свойства writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) строчная ось будет горизонтальной и inline-size устанавливает ширину элемента. Для вертикального направления письма (writing-mode: vertical-lr и writing-mode: vertical-rl) строчная ось будет вертикальной и inline-size устанавливает высоту элемента.

  • min-block-size

    min-block-size

    Определяет минимальный размер элемента по блочной оси, направление которой зависит от значения свойства writing-mode. Для горизонтального письма (writing-mode: horizontal-tb) блочная ось будет вертикальной и min-block-size устанавливает минимальную высоту элемента. Для вертикального направления письма (writing-mode: vertical-lr и writing-mode: vertical-rl) блочная ось будет горизонтальной и min-block-size устанавливает минимальную ширину элемента.

  • marks

    marks

    Отображает специальные метки на странице при печати документа, предназначенные для дальнейшего обрезания страницы или для ровного соединения нескольких листов между собой.

  • font-kerning

    font-kerning

    Свойство font-kerning управляет кернингом шрифта. Кернинг — это изменение интервала между определёнными сочетаниями букв для сохранения плотности букв в тексте. Это особенно важно для букв, у которых есть наклонные линии, вроде А, У, W, V. Информация о кернинге хранится в самом шрифте и если шрифт не поддерживает эту возможность, то свойство font-kerning не окажет влияние на текст.

  • font-size

    font-size

    Определяет размер шрифта элемента. Размер может быть установлен несколькими способами. Набор констант (xx-small, x-small, small, medium, large, x-large, xx-large) задаёт размер, который называется абсолютным. По правде говоря, они не совсем абсолютны, поскольку зависят от настроек браузера и операционной системы.

  • font-stretch

    font-stretch

    Устанавливает узкое, нормальное или широкое начертание шрифта, что позволяет уплотнять или расширять текст.

  • font-style

    font-style

    Определяет начертание шрифта — обычное, курсивное или наклонное. Когда для текста установлено курсивное или наклонное начертание, браузер обращается к системе для поиска подходящего шрифта. Если заданный шрифт не найден, браузер использует специальный алгоритм для имитации нужного вида текста.

  • font-variant

    font-variant

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

  • font-weight

    font-weight

    Устанавливает насыщенность шрифта. Значение указывается в виде чисел от 100 до 900 с шагом 100 или с помощью заданных ключевых слов.

  • !important

    !important

    Играет роль в том случае, когда пользователи подключают свою собственную таблицу стилей, также применяется для повышения специфичности стилевого правила. Если возникает противоречие, когда стиль автора страницы и пользователя для одного и того же элемента не совпадает, то !important позволяет повысить приоритет стиля.

Правила

  • @font-face

    @font-face

    Правило @font-face позволяет определить настройки шрифтов, а также загрузить специфичный шрифт на компьютер пользователя.

  • @keyframes

    @keyframes

    Правило @keyframes устанавливает ключевые кадры при анимации элемента. Ключевой кадр это свойства элемента (прозрачность, цвет, положение и др.), которые должны применяться к элементу в заданный момент времени. Таким образом, анимация представляет собой плавный переход стилевых свойств от одного ключевого кадра к другому. Вычисление промежуточных значений между такими кадрами берёт на себя браузер.

  • @media

    @media

    Правило @media позволяет указать тип носителя, для которого будет применяться указанный стиль. В качестве типов выступают различные устройства, например, принтер, монитор и др. В табл. 1 перечислены основные из них.

  • @page

    @page

    Правило @page позволяет задать значение полей при печати документа или для страниц, у которых тип носителя задан как print.

  • @document

    @document

    @document устанавливает стилевые правила на основе адреса документа. К примеру, если адреса мобильной и основной версии сайта различаются, то мы можем задать собственный стиль элементов для каждой версии.

  • @import

    @import

    Правило @import позволяет импортировать содержимое CSS-файла в текущую стилевую таблицу. @import не разрешается вставлять после любых объявлений кроме @charset или другого @import.

  • @supports

    @supports

    Правило @supports позволяет проверить, поддерживает браузер ту или иную возможность, и на основе этого создать набор стилевых правил. Допустимо создавать комплексные условия с помощью логических операторов not, and, or.

  • @viewport

    @viewport

    Позволяет оптимизировать макет веб-страницы в зависимости от различных устройств и их размеров. Является аналогом <meta name="viewport">, но переносит параметры из HTML в правила CSS.

  • @charset

    @charset

    Команда @charset применяется для задания кодировки внешнего CSS-файла. Это имеет значение в том случае, если в CSS-файле используются символы национального алфавита.

Селекторы

  • A

    A

    В качестве селектора может выступать любой элемент HTML, для которого определяются правила форматирования, такие как: цвет, фон, размер и др.

  • #id

    #id

    Идентификатор определяет уникальное имя элемента, которое используется для изменения его стиля и обращения к нему через скрипты.

  • .class

    .class

    Классы применяют, когда необходимо определить стиль для одного или нескольких элементов веб-страницы. Элементы при этом могут быть разными, но иметь частично или полностью похожие элементы оформления. В коде HTML имя класса определяется через атрибут class.

  • .class1.class2

    .class1.class2

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

  • *

    *

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

  • A B

    A B

    При создании веб-страницы часто приходится вкладывать одни элементы внутрь других. Чтобы стили для этих элементов использовались корректно, помогут вложенные селекторы. Например, задать стиль для <b> только когда он располагается внутри контейнера <p>. Таким образом можно одновременно установить стиль для отдельного элемента, а также для элемента, который находится внутри другого.

  • A > B

    A > B

    Дочерним называется элемент, который непосредственно располагается внутри родительского элемента. Какой элемент выступает родителем, а какой его потомком легко выяснить с помощью дерева элементов — так называется структура отношений элементов документа между собой.

  • A + B

    A + B

    Соседними называются элементы веб-страницы, когда они следуют непосредственно друг за другом в коде документа.

  • A ~ B

    A ~ B

    Родственные селекторы по своему поведению похожи на соседние селекторы (запись вида E + F), но в отличие от них стилевые правила применяются ко всем близлежащим элементам. К примеру, для селектора h1~p стиль будет применяться ко всем элементам <p>, располагающихся после заголовка <h1>. При этом <h1> и <p> должны иметь общего родителя, так что если <p> вставить внутрь <div>, то стили применяться уже не будут.

  • [attr]

    [attr]

    Устанавливает стиль для элемента, если задан специфичный атрибут. Его значение в данном случае не важно.

  • [attr='value']

    [attr='value']

    Устанавливает стиль для элемента в том случае, если задано определённое значение специфичного атрибута.

  • [attr^='value']

    [attr^='value']

    Устанавливает стиль для элемента в том случае, если значение атрибута начинается с указанного текста.

  • [attr$='value']

    [attr$='value']

    Устанавливает стиль для элемента в том случае, если значение атрибута оканчивается указанным текстом.

  • [attr*='value']

    [attr*='value']

    Возможны варианты, когда стиль следует применить к тегу с определённым атрибутом, когда частью его значения является некоторый текст. При этом точно не известно, в каком месте значения включён данный текст — в начале, середине или конце. В подобном случае следует использовать конструкцию *=. Она определяет, что значение атрибута содержит указанный текст.

  • [attr~='value']

    [attr~='value']

    Некоторые значения атрибутов могут перечисляться через пробел, например имена классов. Чтобы задать стиль при наличии в списке требуемого значения требуется использовать конструкцию ~=.

  • [attr|='value']

    [attr|='value']

    В именах идентификаторов и классов разрешено использовать символ дефиса (-), что позволяет создавать значащие значения атрибутов id и class.

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

  • Псевдокласс :active

    Псевдокласс :active

    Псевдокласс :active определяет стиль активного элемента. Это такое состояние элемента, которое происходит между щелчком и отпусканием клавиши мыши. В основном применяется к ссылкам и кнопкам, но ими не ограничен.

  • Псевдокласс :visited

    Псевдокласс :visited

    Псевдокласс :visited применяется к ссылкам, уже посещённым пользователем, и задаёт для них стилевое оформление.

  • Псевдокласс :nth-child

    Псевдокласс :nth-child

    Псевдокласс :nth-child используется для добавления стиля к элементам на основе нумерации в дереве элементов.

  • Псевдокласс :first-child

    Псевдокласс :first-child

    Псевдокласс :first-child задаёт стиль первого элемента в группе братских элементов (имеющих одного родителя).

  • Псевдокласс :hover

    Псевдокласс :hover

    Определяет стиль элемента при наведении на него курсора мыши, но при этом элемент еще не активирован, иными словами кнопка мыши не нажата.

  • Псевдокласс :blank

    Псевдокласс :blank

    Псевдокласс :blank представляет пустые элементы, иными словами такие, которые не содержат дочерних элементов или текста. По своему действию похож на :empty, но :blank, в отличие от него, считает пустыми элементы, содержащие пробел или перенос строк.

  • Псевдокласс :checked

    Псевдокласс :checked

    Псевдокласс :checked применяется к элементам интерфейса, таким как переключатели (checkbox), флажки (radio) и пункты списка (option), когда они находятся в положение «включено». Переключение элементов в такое состояние происходит с помощью атрибута checked элемента <input> или пользователем.

  • Псевдокласс :default

    Псевдокласс :default

    Псевдокласс :default применяет стиль к элементам форм, которые установлены по умолчанию в группе похожих элементов. Например, у нас может быть две кнопки для отправки данных формы на сервер. Одна из этих кнопок задана по умолчанию, мы можем изменить её стиль через :default.

  • Псевдокласс :disabled

    Псевдокласс :disabled

    Псевдокласс :disabled используется для применения стиля к заблокированным элементам форм. Такие элементы не могут получить фокус, быть нажатыми или активированы, в текстовых полях нельзя набирать текст.

  • Псевдокласс :empty

    Псевдокласс :empty

    Псевдокласс :empty представляет пустые элементы, иными словами такие, которые не содержат дочерних элементов, текста, пробелов или переносов строк. К примеру, <p></p> является пустым элементом, а <p> </p>, <p>&nbsp;</p> или <p>эге</p> уже нет.

  • Псевдокласс :enabled

    Псевдокласс :enabled

    Псевдокласс :enabled используется для применения стиля к доступным (не заблокированным) элементам форм. По умолчанию, все элементы форм являются доступными, если в коде HTML к ним не добавляется атрибут disabled.

  • Псевдокласс :first-of-type

    Псевдокласс :first-of-type

    Псевдокласс :first-of-type задаёт стиль первого элемента определённого типа в группе братских элементов (имеющих одного родителя).

  • Псевдокласс :focus

    Псевдокласс :focus

    Псевдокласс :focus определяет стиль для элемента, получающего фокус. Например, им может быть текстовое поле формы, в которое устанавливается курсор.

  • Псевдокласс :focus-within

    Псевдокласс :focus-within

    Псевдокласс :focus-within определяет стиль элемента, когда он сам или элементы внутри него получают фокус. В отличие от :focus, который применяется непосредственно к самому элементу, :focus-within работает для родителя. Это позволяет выделять цветом или другими методами всю форму или отдельные её части, когда пользователь работает с полями формы.

  • Псевдокласс :fullscreen

    Псевдокласс :fullscreen

    Псевдокласс :fullscreen применяется к элементам, когда браузер находится в полноэкранном режиме. При этом скрывается заголовок окна, адресная строка, вкладки, меню и другие стандартные элементы и браузер отображается на весь экран. Для перехода из стандартного режима в полноэкранный и обратно обычно применяется клавиша F11.

  • Псевдокласс :in-range

    Псевдокласс :in-range

    Применяется к элементам форм, у которых введённое пользователем значение находится в заранее заданном диапазоне. Сам диапазон устанавливается с помощью атрибутов min и max, они, соответственно, задают минимальное и максимальное значение.

  • Псевдокласс :indeterminate

    Псевдокласс :indeterminate

    Псевдокласс :indeterminate задаёт стиль для переключателей, когда они находятся в неопределённом состоянии. К примеру, если ни один переключатель не помечен, то они находятся в указанном состоянии. В реальности, стиль применяется только к элементам, у которых DOM-атрибут :indeterminate через JavaScript установлен в значение true. Также этот псевдокласс используется некоторыми браузерами для элемента <progress>.

  • Псевдокласс :invalid

    Псевдокласс :invalid

    Применяется к полям формы, содержимое которых не соответствует указанному типу. Например, для type="number" должно вводиться число, а не буквы, для type="email" корректный адрес электронной почты.

  • Псевдокласс :lang

    Псевдокласс :lang

    Определяет язык, который используется в документе или его фрагменте. С помощью псевдокласса :lang можно задавать определённые настройки, характерные для разных языков, например, вид кавычек в цитатах.

  • Псевдокласс :last-child

    Псевдокласс :last-child

    Псевдокласс :last-child задаёт стиль последнего элемента в группе братских элементов (имеющих одного родителя).

  • Псевдокласс :last-of-type

    Псевдокласс :last-of-type

    Псевдокласс :last-of-type задаёт стиль последнего элемента определённого типа в группе братских элементов (имеющих одного родителя).

  • Псевдокласс :link

    Псевдокласс :link

    Псевдокласс :link применяется к ссылкам, которые ещё не посещались пользователем, и задаёт для них стилевое оформление.

  • Псевдокласс :not

    Псевдокласс :not

    Псевдокласс :not задаёт правила стилей для элементов, которые не содержат указанный селектор.

  • Псевдокласс :nth-last-child

    Псевдокласс :nth-last-child

    Псевдокласс :nth-last-child используется для добавления стиля к элементам на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-child отсчёт ведётся не от первого элемента, а от последнего.

  • Псевдокласс :nth-last-of-type

    Псевдокласс :nth-last-of-type

    Псевдокласс :nth-last-of-type используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов. В отличие от псевдокласса :nth-of-type отсчёт ведётся не от первого элемента, а от последнего.

  • Псевдокласс :nth-of-type

    Псевдокласс :nth-of-type

    Псевдокласс :nth-of-type используется для добавления стиля к элементам указанного типа на основе нумерации в дереве элементов.

  • Псевдокласс :only-child

    Псевдокласс :only-child

    Псевдокласс :only-child применяется к дочернему элементу, только если он является единственным у родителя.

  • Псевдокласс :only-of-type

    Псевдокласс :only-of-type

    Псевдокласс :only-of-type применяется к дочернему элементу указанного типа, только если он единственный у родителя.

  • Псевдокласс :optional

    Псевдокласс :optional

    Применяет стилевые правила к элементу <input>, у которого не задан атрибут required, он позволяет выделять поля обязательные к заполнению перед отправкой формы. Таким образом :optional применяется к необязательным полям формы.

  • Псевдокласс :out-of-range

    Псевдокласс :out-of-range

    Применяется к полям форм, у которых введённое пользователем значение выходит из заданного диапазона. Псевдокласс работает только для тех полей, где пользователь может сам ввести значение, даже несмотря на ограничения наложенные атрибутами min и max.

  • Псевдокласс :placeholder-shown

    Псевдокласс :placeholder-shown

    Определяет стиль элемента <input> или <textarea>, который в данный момент отображает текст подсказки, заданной атрибутом placeholder. Такая подсказка обычно исчезает при наборе текста.

  • Псевдокласс :read-only

    Псевдокласс :read-only

    Применяется к полям формы, у которых задан атрибут readonly. Такое поле не может быть модифицировано, при этом оно получает фокус, а данные в таком поле можно выделить и скопировать.

  • Псевдокласс :read-write

    Псевдокласс :read-write

    Применяется к полям формы, доступных для изменения. Псевдокласс :read-write является противоположным по своему действию :read-only, который применяется к полям с атрибутом readonly (только для чтения).

  • Псевдокласс :required

    Псевдокласс :required

    Применяет стилевые правила к элементу <input>, у которого установлен атрибут required, он позволяет выделять поля обязательные к заполнению перед отправкой формы.

  • Псевдокласс :target

    Псевдокласс :target

    Для перехода к выбранному фрагменту документа, в адресе пишется символ # и указывается имя идентификатора. К примеру, в адресе http://www.w3.org/TR/css3-selectors/#target-pseudo происходит переход к элементу, атрибут id которого задан как target-pseudo. Такая запись адреса называется «целевой элемент». Псевдокласс :target применяется к целевому элементу, иными словами, к идентификатору, который указан в адресной строке браузера.

  • Псевдокласс :valid

    Псевдокласс :valid

    Применяется к полям формы, содержимое которых проходит проверку в браузере на соответствие указанному типу. Например, для type="number" вводится число, а не буквы, для type="email" корректный адрес электронной почты.

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

  • Псевдоэлемент ::first-letter

    Псевдоэлемент ::first-letter

    Псевдоэлемент ::first-letter определяет стиль первого символа в тексте элемента, к которому добавляется. К этому псевдоэлементу могут применяться только стилевые свойства, связанные со свойствами шрифта, полями, отступами, границами, цветом и фоном.

  • Псевдоэлемент ::first-line

    Псевдоэлемент ::first-line

    Псевдоэлемент ::first-line задаёт стиль первой строки форматированного текста. Длина этой строки зависит от многих факторов, таких как используемый шрифт, размер окна браузера, ширина блока, языка и т. д. В правилах стиля допустимо использовать только свойства, относящиеся к шрифту, изменению цвета текста и фона.

  • Псевдоэлемент ::selection

    Псевдоэлемент ::selection

    Псевдоэлемент ::selection применяет стиль к выделенному пользователем тексту. В правилах стилей допускается использовать следующие свойства: color, background, background-color, cursor, outline и text-shadow.

  • Псевдоэлемент ::after

    Псевдоэлемент ::after

    Псевдоэлемент, который используется для вывода контента после содержимого элемента, к которому он добавляется. Псевдоэлемент ::after работает совместно со свойством content.

  • Псевдоэлемент ::before

    Псевдоэлемент ::before

    Псевдоэлемент ::before применяется для отображения контента до содержимого элемента, к которому он добавляется. Работает совместно со свойством content.

  • Псевдоэлемент ::backdrop

    Псевдоэлемент ::backdrop

    Псевдоэлемент отображается ниже самого верхнего элемента в стеке по оси Z, но выше всех остальных элементов на странице, если они имеются. Обычно ::backdrop применяется для затемнения страницы, чтобы акцентировать внимание на фотографии или диалоговом окне, которые выводятся поверх такого затемнения.

  • Псевдоэлемент ::placeholder

    Псевдоэлемент ::placeholder

    Псевдоэлемент, с помощью которого задаётся стилевое оформление подсказывающего текста, созданного атрибутом placeholder. Допускается использовать свойства для изменения вида текста, например, задать шрифт и цвет.

Вендорные свойства

  • -ms-interpolation-mode

    -ms-interpolation-mode

    -ms-interpolation-mode указывает браузеру, какой алгоритм использовать при масштабировании картинок. Применяется только к элементам <img>.

  • ::-ms-browse

    ::-ms-browse

    Позволяет задать стиль кнопки «Обзор» при загрузке файлов через <input type="file">.

  • ::-ms-check

    ::-ms-check

    Задаёт стиль переключателей (input type="radio") и флажков (input type="checkbox").

  • ::-ms-clear

    ::-ms-clear

    Задаёт стиль кнопки для очистки текстового поля. Исходно эта кнопка не видна, она появляется в правой части поля только при вводе текста.

  • ::-ms-expand

    ::-ms-expand

    Задаёт стиль кнопки раскрытия списка, созданного с помощью элемента <select>.

  • ::-ms-fill

    ::-ms-fill

    Задаёт стиль индикатора элемента <progress>. Само значение индикатора и его положение меняется динамически посредством скриптов.

  • ::-ms-fill-lower

    ::-ms-fill-lower

    Задаёт стиль слайдера (input type="range"). Стиль применяется к дорожке слайдера от меньшего значения до текущего значения, где располагается ползунок.

  • ::-ms-fill-upper

    ::-ms-fill-upper

    Задаёт стиль слайдера (input type="range"). Стиль применяется к дорожке слайдера от текущего значения, где располагается ползунок, до максимального значения слайдера.

  • ::-ms-reveal

    ::-ms-reveal

    Задаёт стиль кнопки для просмотра пароля в поле <input type="password">. Кнопка исходно не видна и появляется в правой части поля при вводе пароля (рис. 1). Если щёлкнуть по этой кнопке и удерживать левую кнопку мыши, то вместо точек будет показан вводимый пароль.

  • ::-ms-thumb

    ::-ms-thumb

    Задаёт стиль ползунка для слайдера (input type="range").

  • ::-ms-ticks-after

    ::-ms-ticks-after

    Применяет стилевые параметры к делениям ниже дорожки слайдера (input type="range"). По умолчанию эти деления не отображаются и чтобы они стали видны, в стилях следует добавить свойство display со значением block.

  • ::-ms-ticks-before

    ::-ms-ticks-before

    Применяет стилевые параметры к делениям выше дорожки слайдера (input type="range"). По умолчанию эти деления не отображаются и чтобы они стали видны, в стилях следует добавить свойство display со значением block.

  • ::-ms-tooltip

    ::-ms-tooltip

    Применяет стилевые параметры к всплывающей подсказке слайдера (input type="range"), где отображается выбранное текущее значение. Допустимо задавать только свойства display и visibility.

  • ::-ms-track

    ::-ms-track

    Задаёт стиль дорожки ползунка для слайдера (input type="range").

  • ::-ms-value

    ::-ms-value

    Позволяет изменять стиль элементов формы, сделанных с помощью <input> или <select>.

Значения свойств

  • Цвет

    Цвет

    Цвет в стилях можно задавать разными способами: по шестнадцатеричному значению, по названию, в формате RGB, RGBA, HSL, HSLA.

  • Медиа-запросы

    Медиа-запросы

    Наряду с типами носителей в CSS3 включена поддержка различных технических параметров устройств, на основе которых требуется загружать те или иные стили. К примеру, можно определить смартфон с максимальным разрешением 640 пикселей и для него установить одни стилевые свойства, а для остальных устройств другие. Также можно выявить различные характеристики вроде наличия монохромного экрана, ориентации (портретная или альбомная) и др. Все характеристики легко комбинируются, поэтому допустимо задать стиль только для устройств в альбомной ориентации с заданным разрешением экрана.

  • Время

    Время

    Задаёт время в секундах или миллисекундах. Значение состоит из целого или дробного числа, за которым сразу же следует символ s для секунд или ms для миллисекунд. Пробел после числа недопустим. Для преобразования единиц помните, что 1s = 1000ms.

  • Размер

    Размер

    Для задания размеров различных элементов в CSS используются абсолютные и относительные единицы измерения. Абсолютные единицы не зависят от устройства вывода, а относительные единицы определяют размер элемента относительно значения другого размера.

  • Угол

    Угол

    Задаёт угол наклона или поворота. Положительное значение отмеряется по часовой стрелке, отрицательное против часовой стрелки.

  • Число

    Число

    Значением может выступать целое число, содержащее цифры от 0 до 9 и десятичная дробь, в которой целая и десятичная часть разделяются точкой. Если число начинается с нуля, то его можно опустить (.5 вместо 0.5).

  • Фильтр

    Фильтр

    Фильтр — это функция, которая позволяет изменять вид изображения, применяя к нему разные эффекты, вроде контрастности, яркости, преобразования в чёрно-белую картинку и др.

  • currentColor

    currentColor

    Ключевое слово currentColor соответствует значению свойства color для текущего элемента. Это позволяет использовать значение цвета для свойств, которые не получают его по умолчанию.

Функции

  • calc()

    calc()

    Используется для указания вычисляемого значения свойств, которые в качестве значений используют размер, угол, время, число. Это позволяет задавать значения, основанные на сложении или вычитании разных единиц измерений, например можно задать 100% - 20px. Если значение не может быть вычислено, оно игнорируется.

  • attr()

    attr()

    Функция attr() применяется для добавления значения атрибута HTML-элемента в стилевое свойство. Например, можно получить значение атрибута class, а затем использовать его в качестве значения свойства background для изменения цвета.

  • linear-gradient()

    linear-gradient()

    Функция linear-gradient() добавляет линейный градиент к фону элемента. Она выступает значением свойства background-image или background.

  • radial-gradient()

    radial-gradient()

    Функция radial-gradient() добавляет радиальный градиент к фону элемента. Радиальные по своему принципу похожи на линейные градиенты, но один цвет переходит в другой не вдоль прямой линии, а словно круги по воде вокруг точки. На рис. 1 представлено для сравнения одновременно два разных градиента: радиальный (рис. 1а) и линейный (рис. 1б).

  • repeating-linear-gradient()

    repeating-linear-gradient()

    Создаёт бесконечно повторяющийся линейный градиент, образуя тем самым фоновый узор. По своему действию похожа на функцию linear-gradient() и имеет те же параметры. При этом цвета последовательно сменяют друг друга, после последнего цвета в списке цветов градиента сразу же идёт первый.

  • repeating-radial-gradient()

    repeating-radial-gradient()

    По своему действию похож на радиальный градиент, который делается функцией radial-gradient(), и имеет с ним схожий синтаксис. Но цвета градиента бесконечно повторяются во всех направлениях образуя узор, заполняющий фон элемента.

  • perspective()

    perspective()

    Определяет расстояние от плоскости экрана до точки сходимости линий и тем самым задаёт, насколько выражен эффект перспективы. Точка сходимости по умолчанию располагается в центре элемента и может быть изменена с помощью свойства perspective-origin.

  • rotate()

    rotate()

    Функция rotate(α) поворачивает элемент в двумерном пространстве вокруг точки вращения на заданный угол α. Точка вращения по умолчанию располагается в центре элемента и может быть изменена с помощью свойства transform-origin.

  • rotateX()

    rotateX()

    Функция rotateX(α) поворачивает элемент вокруг оси X на заданный угол α.

  • rotateY()

    rotateY()

    Функция rotateY() поворачивает элемент вокруг оси Y на заданный угол α.

  • rotateZ()

    rotateZ()

    Функция rotateZ(α) поворачивает элемент вокруг оси Z на заданный угол α.

  • scale()

    scale()

    Масштабирует элемент в двумерном пространстве по горизонтали и вертикали или одновременно в двух направлениях. Изменение масштаба может происходить как в большую, так и в меньшую сторону.

  • scaleX()

    scaleX()

    Масштабирует элемент по горизонтальной оси X.

  • scaleY()

    scaleY()

    Масштабирует элемент по вертикальной оси Y.

  • scaleZ()

    scaleZ()

    Масштабирует элемент по оси Z. Эффект будет заметен только при использовании перспективы, поворота элемента по осям X или Y, а также при смещении элемента по оси Z.

  • skew()

    skew()

    Наклоняет элемент в двумерном пространстве по горизонтали и вертикали или одновременно в двух направлениях.

  • skewX()

    skewX()

    Наклоняет элемент на заданный угол по горизонтали.

  • skewY()

    skewY()

    Наклоняет элемент на заданный угол по вертикали.

  • translate()

    translate()

    Сдвигает элемент относительно исходного расположения на заданное значение по горизонтали и вертикали.

  • translateX()

    translateX()

    Сдвигает элемент относительно его исходного расположения на заданное значение по горизонтали.

  • translateY()

    translateY()

    Сдвигает элемент относительно его исходного расположения на заданное значение по вертикали.

  • translateZ()

    translateZ()

    Сдвигает элемент относительно его исходного расположения на заданное значение по оси Z. Эффект будет заметен только при использовании перспективы, поворота элемента по осям X или Y.

Единицы

CSS по категориям

  • Текст и шрифт

    Текст и шрифт

    Определяет настройки шрифтов, а также позволяет загрузить специфичный шрифт на компьютер пользователя.

  • Анимация

    Анимация

    @keyframes устанавливает ключевые кадры при анимации элемента. Ключевой кадр это свойства элемента (прозрачность, цвет, положение и др.), которые должны применяться к элементу в заданный момент времени.

  • Границы

    Границы

    Определяет, как цвет фона или фоновая картинка должна выводиться под границами.

  • Цвет и фон

    Цвет и фон

    Позволяет применить эффекты вроде размытия к области фонового рисунка, расположенной за элементом.

  • Размеры

    Размеры

    Определяет размер элемента по блочной оси, направление которой зависит от значения свойства writing-mode.

  • Форматирование

    Форматирование

    Универсальное свойство, которое сбрасывает все значения свойств в исходные или наследуемые, за исключением свойств direction и unicode-bidi.

  • Контент

    Контент

    Позволяет вставлять генерируемое содержание в текст веб-страницы, которое первоначально в тексте отсутствует.

  • Отступы и поля

    Отступы и поля

    Устанавливает величину отступа от каждого края элемента.

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

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

    Определяет стиль активного элемента.

  • Таблицы

    Таблицы

    Устанавливает, как отображать границы вокруг ячеек таблицы.

  • Списки

    Списки

    Универсальное свойство, позволяющее одновременно задать стиль маркера, его положение, а также изображение маркера.

  • Флексы

    Флексы

    Выравнивает строки внутри флекс-контейнера при наличии свободного пространства по поперечной оси.

  • Логические

    Логические

    Определяет размер элемента по блочной оси, направление которой зависит от значения свойства writing-mode.

  • Позиционирование

    Позиционирование

    Устанавливает положение нижнего края содержимого элемента без учета толщины рамок и отступов.

  • Печать

    Печать

    Задаёт значение полей при печати документа.

  • @-правила

    @-правила

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

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

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

    Позволяет задать стиль кнопки «Обзор» при загрузке файлов.

  • Формы

    Формы

    Применяется к элементам интерфейса, таким как переключатели (checkbox) и флажки (radio), когда они находятся в положение «включено».

Анимация