TL
Tool Lab
💰Donate
💰Donate

CSS Properties Reference

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

52 özellik

displayDüzen

Defines how element is rendered in the document.

block | inline | flex | grid | inline-flex | inline-grid | none | contents
positionDüzen

Specifies positioning method.

static | relative | absolute | fixed | sticky
top / right / bottom / leftDüzen

Offset for positioned elements.

<length> | <percentage> | auto
floatDüzen

Moves element to left/right of container.

left | right | none | inline-start | inline-end
clearDüzen

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

none | left | right | both | inline-start | inline-end
z-indexDüzen

Sets stacking order of elements.

auto | <integer>
overflowDüzen

Controls content that overflows element box.

visible | hidden | scroll | auto | clip
width / heightKutu Modeli

Sets element dimensions.

<length> | <percentage> | auto | min-content | max-content | fit-content
max-width / max-heightKutu Modeli

Sets maximum element dimensions.

<length> | <percentage> | none | min-content | max-content
min-width / min-heightKutu Modeli

Sets minimum element dimensions.

<length> | <percentage> | auto | min-content | max-content
marginKutu Modeli

Space outside the element border.

<length> | <percentage> | auto (shorthand: top right bottom left)
paddingKutu Modeli

Space between content and border.

<length> | <percentage> (shorthand: top right bottom left)
borderKutu Modeli

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

<border-width> || <border-style> || <color>
border-radiusKutu Modeli

Rounds corners of element border box.

<length> | <percentage> (1-4 values for corners)
box-sizingKutu Modeli

How width/height is calculated.

content-box | border-box
box-shadowKutu Modeli

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

Size of the font.

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

Prioritized list of font family names.

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

Weight/boldness of the font.

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

Italic or oblique font.

normal | italic | oblique
line-heightTipografi

Height of a line box.

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

Horizontal alignment of text.

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

Decorative lines on text.

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

Capitalization of text.

none | uppercase | lowercase | capitalize
letter-spacingTipografi

Space between characters.

normal | <length>
word-spacingTipografi

Space between words.

normal | <length>
colorGörsel

Foreground color of text and text decorations.

<color> (name, hex, rgb(), hsl(), oklch())
backgroundGörsel

Shorthand for all background properties.

<color> | <image> | <position> / <size> <repeat> <attachment>
background-colorGörsel

Background color of element.

<color> | transparent
opacityGörsel

Transparency of element (0–1).

<number> (0 = transparent, 1 = opaque)
visibilityGörsel

Shows or hides element without changing layout.

visible | hidden | collapse
transitionAnimasyon

Shorthand for transition properties.

<property> <duration> <easing> <delay>
animationAnimasyon

Shorthand for animation properties.

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

Applies 2D/3D transforms.

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

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

Bu araç hakkında

Bu referans, sekiz kategorideki en yaygın kullanılan CSS özelliklerini kapsar: Düzen, Kutu Modeli, Flexbox, Grid, Tipografi, Görsel, Animasyon ve UI etkileşimi.

Özellik adı, açıklama veya kabul edilen değerlere göre filtrelemek için arama kutusunu kullanın.

Nasıl kullanılır

  1. Listeyi filtrelemek için arama kutusuna bir özellik adı veya anahtar kelime yazın.
  2. Yalnızca o grubu göstermek için açılır listeden bir kategori seçin.
  3. Her satırda özellik adı, kategori etiketi, açıklama ve kabul edilen değerler gösterilir.

Kullanım senaryoları

Ön uç geliştiriciler geliştirme sırasında özellik adlarını ve geçerli değerleri arar.

Sık sorulan sorular

  • Tüm CSS özellikleri dahil mi?Hayır. Bu referans yalnızca en yaygın kullanılan özellikleri kapsar.
  • Tedarikçi önekli özellikler listeleniyor mu?Hayır. Yalnızca önek içermeyen standart özellikler listelenir.