TL
Tool Lab
💰Пожертвовать
💰Пожертвовать

CSS Properties Reference

Comprehensive CSS property reference — flexbox, grid, typography, animation, and more.

52 свойств

displayМакет

Defines how element is rendered in the document.

block | inline | flex | grid | inline-flex | inline-grid | none | contents
positionМакет

Specifies positioning method.

static | relative | absolute | fixed | sticky
top / right / bottom / leftМакет

Offset for positioned elements.

<length> | <percentage> | auto
floatМакет

Moves element to left/right of container.

left | right | none | inline-start | inline-end
clearМакет

Specifies what happens with the element next to a floated element.

none | left | right | both | inline-start | inline-end
z-indexМакет

Sets stacking order of elements.

auto | <integer>
overflowМакет

Controls content that overflows element box.

visible | hidden | scroll | auto | clip
width / heightБлочная модель

Sets element dimensions.

<length> | <percentage> | auto | min-content | max-content | fit-content
max-width / max-heightБлочная модель

Sets maximum element dimensions.

<length> | <percentage> | none | min-content | max-content
min-width / min-heightБлочная модель

Sets minimum element dimensions.

<length> | <percentage> | auto | min-content | max-content
marginБлочная модель

Space outside the element border.

<length> | <percentage> | auto (shorthand: top right bottom left)
paddingБлочная модель

Space between content and border.

<length> | <percentage> (shorthand: top right bottom left)
borderБлочная модель

Shorthand for border-width, border-style, border-color.

<border-width> || <border-style> || <color>
border-radiusБлочная модель

Rounds corners of element border box.

<length> | <percentage> (1-4 values for corners)
box-sizingБлочная модель

How width/height is calculated.

content-box | border-box
box-shadowБлочная модель

Adds shadow effects around element frame.

<offset-x> <offset-y> <blur> <spread> <color> | inset | none
flex-directionFlexbox

Sets main axis of flex container.

row | row-reverse | column | column-reverse
flex-wrapFlexbox

Whether flex items wrap onto multiple lines.

nowrap | wrap | wrap-reverse
justify-contentFlexbox

Alignment along main axis.

flex-start | flex-end | center | space-between | space-around | space-evenly
align-itemsFlexbox

Default alignment along cross axis.

stretch | flex-start | flex-end | center | baseline
align-contentFlexbox

Multi-line flex container alignment.

flex-start | flex-end | center | space-between | space-around | stretch
flexFlexbox

Shorthand for flex-grow, flex-shrink, flex-basis.

none | auto | <flex-grow> <flex-shrink> <flex-basis>
gapFlexbox

Space between flex/grid items.

<length> | <percentage> (row-gap column-gap)
grid-template-columnsGrid

Defines columns of the grid.

none | <track-size> | repeat() | minmax() | auto-fill | auto-fit
grid-template-rowsGrid

Defines rows of the grid.

none | <track-size> | repeat() | minmax()
grid-columnGrid

Shorthand for grid-column-start and grid-column-end.

<line> / <line> | span <number>
grid-rowGrid

Shorthand for grid-row-start and grid-row-end.

<line> / <line> | span <number>
grid-areaGrid

Named grid area or row/column shorthand.

<name> | <row-start> / <col-start> / <row-end> / <col-end>
font-sizeТипографика

Size of the font.

<length> | <percentage> | xx-small...xx-large | smaller | larger
font-familyТипографика

Prioritized list of font family names.

<family-name> | <generic-family> (comma-separated list)
font-weightТипографика

Weight/boldness of the font.

normal | bold | bolder | lighter | 100–900
font-styleТипографика

Italic or oblique font.

normal | italic | oblique
line-heightТипографика

Height of a line box.

normal | <number> | <length> | <percentage>
text-alignТипографика

Horizontal alignment of text.

left | right | center | justify | start | end
text-decorationТипографика

Decorative lines on text.

none | underline | overline | line-through | blink
text-transformТипографика

Capitalization of text.

none | uppercase | lowercase | capitalize
letter-spacingТипографика

Space between characters.

normal | <length>
word-spacingТипографика

Space between words.

normal | <length>
colorВизуальное

Foreground color of text and text decorations.

<color> (name, hex, rgb(), hsl(), oklch())
backgroundВизуальное

Shorthand for all background properties.

<color> | <image> | <position> / <size> <repeat> <attachment>
background-colorВизуальное

Background color of element.

<color> | transparent
opacityВизуальное

Transparency of element (0–1).

<number> (0 = transparent, 1 = opaque)
visibilityВизуальное

Shows or hides element without changing layout.

visible | hidden | collapse
transitionАнимация

Shorthand for transition properties.

<property> <duration> <easing> <delay>
animationАнимация

Shorthand for animation properties.

<name> <duration> <easing> <delay> <iteration> <direction> <fill-mode>
transformАнимация

Applies 2D/3D transforms.

none | translate() rotate() scale() skew() matrix()
will-changeАнимация

Hints browser about expected changes for optimization.

auto | scroll-position | contents | transform | opacity
cursorUI

Type of mouse cursor.

auto | default | pointer | text | move | grab | not-allowed | crosshair | ...
pointer-eventsUI

Controls when element can be target of pointer events.

auto | none | all | fill | stroke | painted
user-selectUI

Controls if text can be selected.

auto | none | text | all | contain
outlineUI

Outline drawn around element outside border.

<outline-width> || <outline-style> || <color> | none
resizeUI

Whether/how user can resize element.

none | both | horizontal | vertical

Об этом инструменте

Этот справочник охватывает наиболее часто используемые свойства CSS в восьми категориях: Макет, Блочная модель, Flexbox, Grid, Типографика, Визуальное, Анимация и UI-взаимодействие.

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

Как использовать

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

Случаи использования

Фронтенд-разработчики ищут названия свойств и допустимые значения во время разработки. Студенты, изучающие CSS, используют справочник для изучения доступных свойств.

Частые вопросы

  • Включены ли все свойства CSS?Нет. Справочник охватывает только наиболее часто используемые свойства.
  • Перечислены ли свойства с вендорными префиксами?Нет. Перечислены только стандартные свойства без префиксов.