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 / heightنموذج الصندوق

Sets element dimensions.

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.

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

cursorواجهة المستخدم

Type of mouse cursor.

pointer-eventsواجهة المستخدم

Controls when element can be target of pointer events.

user-selectواجهة المستخدم

Controls if text can be selected.

auto | none | text | all | contain

outlineواجهة المستخدم

Outline drawn around element outside border.

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

resizeواجهة المستخدم

Whether/how user can resize element.

none | both | horizontal | vertical

حول هذه الأداة

يغطي هذا المرجع أكثر خصائص CSS استخداماً في ثماني فئات: التخطيط، نموذج الصندوق، Flexbox، Grid، الطباعة، مرئي، الرسوم المتحركة، وتفاعل واجهة المستخدم.

استخدم مربع البحث للتصفية حسب اسم الخاصية أو الوصف أو القيم المقبولة.

كيفية الاستخدام

اكتب اسم خاصية أو كلمة مفتاحية في مربع البحث لتصفية القائمة.
حدد فئة من القائمة المنسدلة لإظهار تلك المجموعة فقط.
تُظهر كل صف اسم الخاصية وعلامة الفئة والوصف والقيم المقبولة.

حالات الاستخدام

يستخدم مطورو الواجهة الأمامية هذا المرجع للبحث عن أسماء الخصائص والقيم الصالحة أثناء التطوير.

الأسئلة الشائعة

هل تم تضمين جميع خصائص CSS؟ — لا. يغطي هذا المرجع فقط الخصائص الأكثر استخداماً.
هل الخصائص ذات بادئات المورد مدرجة؟ — لا. يتم إدراج الخصائص القياسية فقط بدون بادئات.