TL
Tool Lab
💰Donate
💰Donate

CSS Properties Reference

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

52 właściwości

displayUkład

Defines how element is rendered in the document.

block | inline | flex | grid | inline-flex | inline-grid | none | contents
positionUkład

Specifies positioning method.

static | relative | absolute | fixed | sticky
top / right / bottom / leftUkład

Offset for positioned elements.

<length> | <percentage> | auto
floatUkład

Moves element to left/right of container.

left | right | none | inline-start | inline-end
clearUkład

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

none | left | right | both | inline-start | inline-end
z-indexUkład

Sets stacking order of elements.

auto | <integer>
overflowUkład

Controls content that overflows element box.

visible | hidden | scroll | auto | clip
width / heightModel pudełkowy

Sets element dimensions.

<length> | <percentage> | auto | min-content | max-content | fit-content
max-width / max-heightModel pudełkowy

Sets maximum element dimensions.

<length> | <percentage> | none | min-content | max-content
min-width / min-heightModel pudełkowy

Sets minimum element dimensions.

<length> | <percentage> | auto | min-content | max-content
marginModel pudełkowy

Space outside the element border.

<length> | <percentage> | auto (shorthand: top right bottom left)
paddingModel pudełkowy

Space between content and border.

<length> | <percentage> (shorthand: top right bottom left)
borderModel pudełkowy

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

<border-width> || <border-style> || <color>
border-radiusModel pudełkowy

Rounds corners of element border box.

<length> | <percentage> (1-4 values for corners)
box-sizingModel pudełkowy

How width/height is calculated.

content-box | border-box
box-shadowModel pudełkowy

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-sizeTypografia

Size of the font.

<length> | <percentage> | xx-small...xx-large | smaller | larger
font-familyTypografia

Prioritized list of font family names.

<family-name> | <generic-family> (comma-separated list)
font-weightTypografia

Weight/boldness of the font.

normal | bold | bolder | lighter | 100–900
font-styleTypografia

Italic or oblique font.

normal | italic | oblique
line-heightTypografia

Height of a line box.

normal | <number> | <length> | <percentage>
text-alignTypografia

Horizontal alignment of text.

left | right | center | justify | start | end
text-decorationTypografia

Decorative lines on text.

none | underline | overline | line-through | blink
text-transformTypografia

Capitalization of text.

none | uppercase | lowercase | capitalize
letter-spacingTypografia

Space between characters.

normal | <length>
word-spacingTypografia

Space between words.

normal | <length>
colorWizualne

Foreground color of text and text decorations.

<color> (name, hex, rgb(), hsl(), oklch())
backgroundWizualne

Shorthand for all background properties.

<color> | <image> | <position> / <size> <repeat> <attachment>
background-colorWizualne

Background color of element.

<color> | transparent
opacityWizualne

Transparency of element (0–1).

<number> (0 = transparent, 1 = opaque)
visibilityWizualne

Shows or hides element without changing layout.

visible | hidden | collapse
transitionAnimacja

Shorthand for transition properties.

<property> <duration> <easing> <delay>
animationAnimacja

Shorthand for animation properties.

<name> <duration> <easing> <delay> <iteration> <direction> <fill-mode>
transformAnimacja

Applies 2D/3D transforms.

none | translate() rotate() scale() skew() matrix()
will-changeAnimacja

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

O tym narzędziu

Ten podręcznik obejmuje najczęściej używane właściwości CSS w ośmiu kategoriach: Układ, Model pudełkowy, Flexbox, Grid, Typografia, Wizualne, Animacja i interakcja UI.

Użyj pola wyszukiwania, aby filtrować według nazwy właściwości, opisu lub dopuszczalnych wartości.

Jak używać

  1. Wpisz nazwę właściwości lub słowo kluczowe w polu wyszukiwania, aby filtrować listę.
  2. Wybierz kategorię z listy rozwijanej, aby wyświetlić tylko tę grupę.
  3. Każdy wiersz pokazuje nazwę właściwości, tag kategorii, opis i dopuszczalne wartości.

Przypadki użycia

Programiści front-end wyszukują nazwy właściwości i prawidłowe wartości podczas tworzenia.

Często zadawane pytania

  • Czy wszystkie właściwości CSS są uwzględnione?Nie. Ten podręcznik obejmuje tylko najczęściej używane właściwości.
  • Czy wymienione są właściwości z prefiksami dostawców?Nie. Wymieniane są tylko standardowe właściwości bez prefiksów.