Библиотека свойств CSS

accent-color

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

all

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

animation

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

aspect-ratio

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

backdrop-filter

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

backface-visibility

Свойство backface-visibility определяет видимость обратной стороны элемента в 3D-пространстве. Это может быть полезно при использовании трансформаций, таких как повороты, чтобы скрыть или отобразить обратную сторону элемента.

background

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

block-size

Свойство block-size устанавливает размер блока элемента в направлении блочной оси. Это обычно означает высоту элемента, когда он отображается как блочный элемент.

border

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

bottom

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

box-decoration-break

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

box-shadow

Свойство box-shadow позволяет добавлять тени к элементам на странице. Вы можете установить параметры тени, такие как смещение, размытие и цвет, чтобы создать различные эффекты.

box-sizing

Это свойство определяет модель размеров элемента, контент которого может быть управляем или непосредственно контролируем размером контейнера. Две наиболее распространенные модели размеров - content-box и border-box.

caption-side

Свойство caption-side устанавливает расположение заголовка таблицы относительно ее содержимого. Например, вы можете установить значение bottom, чтобы разместить заголовок таблицы под ее содержимым.

caret-color

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

clear

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

clip

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

color

Это свойство устанавливает цвет текста элемента.

column

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

columns

Это свойство устанавливает количество и ширину колонок в многоколоночном макете.

content

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

counter-increment

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

counter-reset

Это свойство сбрасывает значение счетчика перед началом новой последовательности. Оно используется в сочетании с counter-increment для создания сложных счетчиков и нумерации на странице.

cursor

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

direction

Это свойство устанавливает направление текста в элементе, позволяя управлять его направлением и расположением. Например, вы можете установить значение rtl (справа налево) для элементов с текстом на арабском или иврите.

display

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

empty-cells

Это свойство управляет отображением пустых ячеек таблицы. Вы можете установить его в hide, чтобы скрыть пустые ячейки, или show, чтобы оставить их видимыми.

filter

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

float

Это свойство определяет, как элемент должен взаимодействовать с окружающими элементами по бокам. Например, вы можете установить элемент как float: left, чтобы выровнять его слева и позволить содержимому обтекать его справа.

font

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

gap

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

height

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

hyphenate-character

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

hyphenate-limit-chars

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

hyphens

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

image

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

inline-size

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

left

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

letter-spacing

Это свойство устанавливает расстояние между символами в тексте. Вы можете увеличить или уменьшить интервал между буквами, чтобы сделать текст более читабельным или стилизованным.

line

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

list

Это свойство устанавливает стиль списка для элементов ul и ol. Вы можете установить его в none, чтобы скрыть маркеры списка, или disc, circle, square для различных видов маркеров.

margin

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

max-block-size

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

max-height

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

max-inline-size

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

max-width

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

min-block-size

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

min-height

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

min-inline-size

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

min-width

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

mix-blend-mode

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

object

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

opacity

Это свойство устанавливает прозрачность элемента. Вы можете установить значение от 0 (полностью прозрачный) до 1 (полностью непрозрачный), чтобы создать различные эффекты прозрачности.

order

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

orphans

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

outline

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

overflow

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

padding

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

page-break

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

perspective

Это свойство устанавливает перспективу для элементов, которые позиционируются в 3D-пространстве. Оно влияет на их вид при использовании 3D-трансформаций, таких как вращения и наклоны.

perspective-origin

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

place-content

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

pointer-events

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

position

Это свойство управляет позиционированием элемента на странице. Вы можете установить его в static, relative, absolute, fixed или sticky, чтобы определить, как элемент располагается в потоке документа.

quotes

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

resize

Это свойство управляет тем, можно ли изменять размер элемента с помощью пользовательского интерфейса. Например, вы можете установить его в none, чтобы запретить изменение размера элемента, или both, чтобы разрешить изменение как по ширине, так и по высоте.

right

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

row-gap

Это свойство устанавливает промежутки между строками в грид-контейнере. Оно аналогично свойству column-gap, но применяется к строкам вместо столбцов.

scroll-behavior

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

tab-size

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

table-layout

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

top

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

transform

Это свойство применяет 2D или 3D трансформации к элементу, такие как вращение, масштабирование, наклон и т. д. Оно позволяет создавать различные эффекты и анимации на элементах страницы.

transition

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

unicode-bidi

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

user-select

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

vertical-align

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

visibility

Это свойство устанавливает видимость элемента. Вы можете установить его в visible, чтобы элемент был видимым, hidden, чтобы скрыть его без изменения макета страницы, или collapse, чтобы скрыть его и сдвинуть остальные элементы на его место.

white-space

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

widows

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

width

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

word-break

Это свойство определяет, как браузер разбивает длинные слова и URL-адреса для обеспечения лучшего чтения текста. Например, вы можете установить его в break-all, чтобы разрешить перенос длинных слов на новую строку.

word-spacing

Это свойство устанавливает расстояние между словами в тексте. Вы можете увеличить или уменьшить интервал между словами, чтобы сделать текст более читабельным или стилизованным.

word-wrap

Это свойство определяет, как браузер обрабатывает длинные слова и URL-адреса для обеспечения лучшего чтения текста. Например, вы можете установить его в break-word, чтобы разрешить перенос длинных слов на новую строку.

writing-mode

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

z-index

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

zoom

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