CSS Properties Reference

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

52 คุณสมบัติ

displayเลย์เอาต์

Defines how element is rendered in the document.

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.

z-indexเลย์เอาต์

Sets stacking order of elements.

auto | <integer>

overflowเลย์เอาต์

Controls content that overflows element box.

visible | hidden | scroll | auto | clip

width / heightBox Model

Sets element dimensions.

max-width / max-heightBox Model

Sets maximum element dimensions.

<length> | <percentage> | none | min-content | max-content

min-width / min-heightBox Model

Sets minimum element dimensions.

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

marginBox Model

Space outside the element border.

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

paddingBox Model

Space between content and border.

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

borderBox Model

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

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

border-radiusBox Model

Rounds corners of element border box.

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

box-sizingBox Model

How width/height is calculated.

content-box | border-box

box-shadowBox Model

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.

align-itemsFlexbox

Default alignment along cross axis.

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

align-contentFlexbox

Multi-line flex container alignment.

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.

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.

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.

pointer-eventsUI

Controls when element can be target of pointer events.

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 property ที่ใช้บ่อยที่สุดใน 8 หมวดหมู่: เลย์เอาต์, Box Model, Flexbox, Grid, การพิมพ์, ภาพ, แอนิเมชัน และ UI

ใช้กล่องค้นหาเพื่อกรองตามชื่อ property, คำอธิบาย หรือค่าที่รองรับ ใช้ตัวกรองหมวดหมู่เพื่อดูกลุ่มเฉพาะ

วิธีใช้งาน

พิมพ์ชื่อ property หรือคำสำคัญในกล่องค้นหาเพื่อกรองรายการ
เลือกหมวดหมู่จากเมนูแบบเลื่อนลงเพื่อแสดงเฉพาะกลุ่มนั้น
แต่ละแถวแสดงชื่อ property, แท็กหมวดหมู่, คำอธิบาย และค่าที่รองรับ

กรณีการใช้งาน

นักพัฒนา front-end ค้นหาชื่อ property และค่าที่ถูกต้องระหว่างการพัฒนา

คำถามที่พบบ่อย

รวม CSS property ทั้งหมดหรือไม่? — ไม่ เอกสารนี้ครอบคลุมเฉพาะ property ที่ใช้บ่อยที่สุดเท่านั้น
มี property ที่มี vendor prefix ไหม? — ไม่ มีเฉพาะ property มาตรฐานที่ไม่มี prefix เท่านั้น