مرجع پراپرتی‌های CSS ۱۱۴ مورد
مرجع کامل پراپرتی‌های CSS با مقادیر، مثال واقعی و توضیح فارسی برای هر ویژگی. روی هر مورد کلیک کنید تا صفحه کامل آن با مثال و توضیحات باز شود.
تعامل و اشاره‌گر (۷)
accent-color
ارث‌بر
رنگ کنترل‌های بومی فرم مثل چک‌باکس و رادیو و رنج را بدون CSS سنگین تغییر می‌دهد؛ یک خط، تم…
caret-color
ارث‌بر
رنگ نشانگر چشمک‌زن داخل ورودی‌ها را تعیین می‌کند؛ هماهنگی آن با رنگ برند در فرم‌های مدرن ج…
cursor
ارث‌بر
شکل اشاره‌گر ماوس روی عنصر را تعیین می‌کند؛ pointer برای کلیک‌پذیرها و not-allowed برای بخ…
pointer-events
غیرارث‌بر
پاسخ‌دهی عنصر به رویدادهای ماوس را قطع یا وصل می‌کند؛ none برای لایه‌های تزئینی روی تصویر…
resize
غیرارث‌بر
قابلیت تغییر اندازه عنصر توسط کاربر (معمولاً textarea) را کنترل می‌کند؛ vertical محبوب‌تری…
scroll-behavior
غیرارث‌بر
اسکرول نرم خودکار هنگام پرش لنگری یا فراخوانی scrollTo را فعال می‌کند؛ یک خط برای تجربه پی…
user-select
غیرارث‌بر
قابلیت انتخاب متن توسط کاربر را کنترل می‌کند؛ none برای دکمه‌ها و رابط‌های شبیه اپ مناسب ا…
چیدمان (۳۶)
align-content
غیرارث‌بر
تراز کل ردیف‌های آیتم‌های فلکس/گرید چندخطی روی محور عرضی را کنترل می‌کند؛ فقط وقتی بیش از…
align-items
غیرارث‌بر
تراز آیتم‌ها روی محور عرضی (متقاطع) را تعیین می‌کند؛ هم در فلکس و هم در گرید کار می‌کند و…
align-self
غیرارث‌بر
بازنویسی فردی align-items برای یک آیتم خاص؛ وقتی همه آیتم‌ها وسط‌چین‌اند و یک آیتم باید پا…
bottom
غیرارث‌بر
فاصله لبه پایین عنصر از مرجع position را تعیین می‌کند؛ با position: fixed برای نوارهای پای…
clear
غیرارث‌بر
تعیین می‌کند عنصر کنار عناصر شناور قرار نگیرد و به سطر بعدی برود؛ برای پایان‌دادن به اثر f…
column-gap
غیرارث‌بر
فاصله افقی بین ستون‌های کانتینر گرید یا فلکس؛ در طراحی‌های پرمحتوا معمولاً بزرگ‌تر از row-…
display
غیرارث‌بر
مهم‌ترین پراپرتی چیدمان که تعیین می‌کند عنصر چگونه در جریان صفحه رفتار کند؛ فلکس و گرید دو…
flex
غیرارث‌بر
شکل خلاصه flex-grow و flex-shrink و flex-basis برای فرزندان کانتینر flex؛ الگوی flex: 1 یع…
flex-basis
غیرارث‌بر
اندازه اولیه آیتم فلکس پیش از توزیع فضای باقی‌مانده را تعیین می‌کند؛ auto یعنی بر اساس wid…
flex-direction
غیرارث‌بر
جهت محور اصلی کانتینر flex را تعیین می‌کند؛ row برای ردیف افقی و column برای ستون عمودی. د…
flex-flow
غیرارث‌بر
شکل خلاصه flex-direction و flex-wrap؛ یک خط کوتاه‌تر برای تعریف هم‌زمان جهت و شکست سطر کان…
flex-grow
غیرارث‌بر
نسبت رشد آیتم فلکس در پرکردن فضای خالی کانتینر را تعیین می‌کند؛ صفر یعنی هیچ رشدی نکند. تو…
flex-shrink
غیرارث‌بر
نسبت جمع‌شدن آیتم فلکس هنگام کمبود فضا را تعیین می‌کند؛ مقدار 0 جلوگیری از فشرده‌شدن را تض…
flex-wrap
غیرارث‌بر
مشخص می‌کند آیا آیتم‌های فلکس در نبود جا به سطر بعدی بروند یا در یک سطر جمع شوند؛ nowrap پ…
float
غیرارث‌بر
شناورسازی عنصر به چپ یا راست و چرخش متن دور آن؛ امروزه در چیدمان اصلی جای خود را به flex و…
gap
غیرارث‌بر
فاصله بین آیتم‌های flex یا grid بدون نیاز به margin؛ جایگزین مدرن و تمیز هک‌های margin منف…
grid-area
غیرارث‌بر
تعیین ناحیه یا مختصات شروع/پایان آیتم گرید؛ با نام ناحیه‌های grid-template-areas یا شماره…
grid-auto-columns
غیرارث‌بر
اندازه ستون‌های ضمنی گرید؛ وقتی آیتم‌ها بیش از تعداد ستون‌های تعریف‌شده باشند ستون‌های جدی…
grid-auto-flow
غیرارث‌بر
جهت چینش خودکار آیتم‌های گرید را تعیین می‌کند؛ مقدار dense به دنبال جای خالی می‌گردد و شکا…
grid-auto-rows
غیرارث‌بر
اندازه سطرهای ضمنی (خارج از تعریف صریح) گرید را تعیین می‌کند؛ برای گالری‌هایی که تعداد ردی…
grid-column
غیرارث‌بر
شکل خلاصه grid-column-start و grid-column-end؛ الگوی 1 / -1 یعنی پهنای کامل گرید و span 2…
grid-row
غیرارث‌بر
شکل خلاصه grid-row-start و grid-row-end برای تعیین ردیف قرارگیری آیتم؛ برای ساخت کاشی‌های…
grid-template-areas
غیرارث‌بر
نقشه نام‌دار چیدمان گرید با رشته‌های بصری؛ خوانایی طرح را به اوج می‌رساند و جابه‌جایی بخش…
grid-template-columns
غیرارث‌بر
ستون‌های کانتینر گرید را تعریف می‌کند؛ الگوی repeat(auto-fill, minmax(240px, 1fr)) معروف‌ت…
grid-template-rows
غیرارث‌بر
سطرهای کانتینر گرید را تعریف می‌کند؛ با مقدار auto سطرها بر اساس محتوا کش می‌آیند و با fr…
inset
غیرارث‌بر
شکل خلاصه چهار پراپرتی top/right/bottom/left است؛ مقدار واحد هر چهار لبه را یکسان تنظیم می…
justify-content
غیرارث‌بر
تراز آیتم‌ها روی محور اصلی کانتینر flex یا grid را تعیین می‌کند؛ space-between برای منوها…
justify-items
غیرارث‌بر
تراز پیش‌فرض افقی همه آیتم‌های گرید داخل سلول‌شان را تعیین می‌کند؛ stretch باعث پهن‌شدن کا…
left
غیرارث‌بر
فاصله لبه چپ عنصر از مرجع position را تعیین می‌کند؛ مانند سایر پراپرتی‌های آفست فقط با pos…
order
غیرارث‌بر
ترتیب نمایش آیتم‌های فلکس/گرید را بدون تغییر HTML جابه‌جا می‌کند؛ برای موبایل-first و جابه…
place-items
غیرارث‌بر
شکل خلاصه align-items و justify-items؛ معروف‌ترین ترفند وسط‌چین کامل در مرکز گرید یعنی pla…
position
غیرارث‌بر
نحوه جای‌گیری عنصر را مشخص می‌کند؛ absolute نسبت به نزدیک‌ترین والد position-dار، fixed نس…
right
غیرارث‌بر
فاصله لبه راست عنصر از مرجع position را تعیین می‌کند؛ در طراحی RTL سایت‌های فارسی حواستان…
row-gap
غیرارث‌بر
فاصله عمودی بین ردیف‌های کانتینر گرید یا فلکس چندخطی؛ وقتی فاصله سطر و ستون متفاوت است جدا…
top
غیرارث‌بر
فاصله لبه بالای عنصر را نسبت به مرجع position تعیین می‌کند؛ فقط برای عناصر با position غیر…
z-index
غیرارث‌بر
ترتیب لایه‌بندی عناصر موقعیت‌دار را روی محور z تعیین می‌کند؛ عدد بزرگ‌تر یعنی بالاتر. فقط…
انیمیشن و ترنزیشن (۱۷)
animation
غیرارث‌بر
شکل خلاصه تمام ویژگی‌های keyframe شامل نام، مدت، منحنی، تکرار و جهت؛ انیمیشن‌های مستمر مثل…
animation-delay
غیرارث‌بر
تاخیر پیش از شروع انیمیشن؛ مقدار منفی انیمیشن را از میانه سیکل شروع می‌کند و ترفند خوبی بر…
animation-duration
غیرارث‌بر
مدت یک سیکل کامل انیمیشن را تعیین می‌کند؛ بدون آن انیمیشن پیش‌فرض صفر ثانیه است و چیزی دید…
animation-iteration-count
غیرارث‌بر
تعداد تکرار انیمیشن را تعیین می‌کند؛ infinite برای لودرها و اعداد مشخص برای انیمیشن‌های یک…
animation-name
غیرارث‌بر
نام کادرهای @keyframes که باید اجرا شود؛ مقدار none هر انیمیشن جاری را قطع می‌کند.
animation-timing-function
غیرارث‌بر
منحنی سرعت هر سیکل انیمیشن؛ برای سیکل‌های بی‌نهایت، linear از پرش ابتدای سیکل جلوگیری می‌ک…
@keyframes
غیرارث‌بر
کادرهای کلیدی انیمیشن را تعریف می‌کند؛ از درصد (0% تا 100%) یا from/to برای توصیف حالت‌های…
rotate
غیرارث‌بر
پراپرتی مستقل چرخش؛ با translate و scale جدا می‌ماند و کد انیمیشن چندلایه را خواناتر می‌کن…
scale
غیرارث‌بر
پراپرتی مستقل مقیاس‌دهی؛ برای هاور کارت‌ها و دکمه‌ها مقدار 1.03 تا 1.06 ظریف و حرفه‌ای است…
transform
غیرارث‌بر
جابه‌جایی، چرخش، مقیاس و کجی عنصر را بدون تکان‌دادن چیدمان انجام می‌دهد؛ چون روی GPU کامپو…
transform-origin
غیرارث‌بر
نقطه مرجع اعمال transform را تعیین می‌کند؛ برای چرخش از گوشه یا افکت فلیپ روی لبه کاربرد د…
transition
غیرارث‌بر
شکل خلاصه چهار ویژگی ترنزیشن برای تغییر نرم حالت‌ها؛ فقط پراپرتی‌های قابل انیمیشن (رنگ، ان…
transition-delay
غیرارث‌بر
تاخیر پیش از شروع ترنزیشن را تعیین می‌کند؛ برای انیمیشن‌های پلکانی (stagger) با تاخیرهای م…
transition-duration
غیرارث‌بر
مدت‌زمان یک سیکل ترنزیشن را تعیین می‌کند؛ بین ۱۵۰ تا ۴۰۰ میلی‌ثانیه حس تعامل درست می‌دهد و…
transition-timing-function
غیرارث‌بر
منحنی سرعت ترنزیشن را تعیین می‌کند؛ ease-out برای ورود عناصر و cubic-bezier سفارشی برای حس…
translate
غیرارث‌بر
پراپرتی مستقل جابه‌جایی که با transform ترکیب‌پذیر است؛ جداسازی جابه‌جایی از مقیاس، کنترل…
will-change
غیرارث‌بر
به مرورگر از پیش اعلام می‌کند کدام پراپرتی قرار است تغییر کند تا بهینه‌سازی لایه‌ای انجام…
اندازه و فاصله (۲۱)
aspect-ratio
غیرارث‌بر
نسبت عرض به ارتفاع عنصر را قفل می‌کند؛ برای ویدئوی 16:9 و کارت‌های هم‌نسبت بدون جاوااسکریپ…
border
غیرارث‌بر
مرز دور عنصر با عرض، سبک و رنگ؛ شکل خلاصه هر سه ویژگی است و border: 1px solid پرکاربردترین…
border-color
غیرارث‌بر
رنگ مرز عنصر؛ با چهار مقدار می‌توان رنگ هر لبه را جدا کنترل کرد و برای حالت‌های هاور/فوکوس…
border-radius
غیرارث‌بر
گردی گوشه‌های عنصر؛ از 999px برای قرص‌شدن کامل تا مقادیر متفاوت برای هر گوشه. روی تصاویر و…
border-style
غیرارث‌بر
شکل خط مرز را تعیین می‌کند؛ solid ممتد، dashed خط‌چین و dotted نقطه‌چین. بدون سبک، مرزی رن…
border-width
غیرارث‌بر
ضخامت مرز عنصر؛ مقادیر thin/medium/thick و اعداد پیکسلی. بیشتر طراحی‌ها بین ۱ تا ۳ پیکسل ب…
box-shadow
غیرارث‌بر
سایه دور عنصر با جابه‌جایی، بلور و رنگ؛ سایه لطیف برای عمق کارت‌ها و سایه رنگی برای دکمه‌ه…
box-sizing
غیرارث‌بر
الگوریتم محاسبه عرض و ارتفاع را تعیین می‌کند؛ border-box یعنی پدینگ و مرز داخل اندازه محاس…
height
غیرارث‌بر
ارتفاع محتوای عنصر را تعیین می‌کند؛ 100vh کل ارتفاع صفحه‌نمایش و min-height جایگزین امن‌تر…
margin
غیرارث‌بر
فاصله بیرونی عنصر با همسایه‌ها؛ مقدار auto در چپ/راست برای وسط‌چین کردن بلوک‌ها و مقادیر م…
max-height
غیرارث‌بر
سقف ارتفاع عنصر را تعیین می‌کند؛ همراه overflow: auto برای اسکرول‌های داخلی و منوهای بلند…
max-width
غیرارث‌بر
سقف عرض عنصر را تعیین می‌کند؛ الگوی max-width: 1200px با margin: auto محبوب‌ترین ابزار ساخ…
min-height
غیرارث‌بر
کف ارتفاع عنصر را تضمین می‌کند؛ برای heroها و بخش‌هایی که باید همیشه حداقل یک صفحه دیده شو…
min-width
غیرارث‌بر
کف عرض عنصر را قفل می‌کند تا از فشرده‌شدن بیش از حد جلوگیری شود؛ در ستون‌های فلکس همراه mi…
object-fit
غیرارث‌بر
نحوه جای‌گیری محتوای img/video داخل جعبه‌اش را تعیین می‌کند؛ cover تصویر را پر می‌کند و بر…
object-position
غیرارث‌بر
نقطه تمرکز تصویر داخل جعبه را تعیین می‌کند؛ center top برای آواتارها و چهره‌ها انتخاب هوشم…
outline
غیرارث‌بر
خطی بیرون از مرز عنصر که فضا اشغال نمی‌کند؛ ابزار اصلی فوکوس‌رینگ دسترس‌پذیری برای کاربران…
outline-offset
غیرارث‌بر
فاصله خط outline از مرز عنصر؛ مقدار مثبت خط را دورتر و منفی داخل مرز می‌برد و برای طراحی ف…
overflow
غیرارث‌بر
رفتار محتوای بیرون‌زده از جعبه عنصر را کنترل می‌کند؛ hidden برش می‌زند و auto در صورت نیاز…
padding
غیرارث‌بر
فاصله داخلی بین محتوا و مرز عنصر؛ پس‌زمینه عنصر ناحیه پدینگ را می‌پوشاند و برای فضای تنفس…
width
غیرارث‌بر
عرض محتوای عنصر را تعیین می‌کند؛ با box-sizing: border-box پدینگ و بوردر داخل محاسبه می‌شو…
افکت و فیلتر (۸)
backdrop-filter
غیرارث‌بر
فیلتر روی محتوای «پشت» عنصر اعمال می‌کند و ابزار اصلی شیشه‌مات (glassmorphism) در طراحی‌ها…
clip-path
غیرارث‌بر
برش هندسی عنصر با شکل‌های پایه یا مسیر SVG؛ بنرهای مورب و دکمه‌های شش‌ضلعی بدون تصویر با آ…
columns
غیرارث‌بر
شکل خلاصه column-count و column-width برای چیدمان چندستونه متن؛ برای لیست‌های متنی بلند بد…
content
غیرارث‌بر
محتوای تزریقی pseudo-elements (::before و ::after) را تعیین می‌کند؛ تزئینات، شماره‌گذاری و…
filter
غیرارث‌بر
فیلترهای گرافیکی مثل بلور، روشنایی و تشبیه را روی عنصر اعمال می‌کند؛ blur روی پس‌زمینه هدر…
mix-blend-mode
غیرارث‌بر
نحوه ترکیب رنگ عنصر با لایه پشتش را تعیین می‌کند؛ multiply روی تصاویر برای بج‌های رنگی و d…
opacity
غیرارث‌بر
شفافیت کل عنصر و محتوایش را بین صفر و یک تعیین می‌کند؛ در انیمیشن‌ها به‌دلیل کامپوزیت شدن…
visibility
غیرارث‌بر
نمایش عنصر را کنترل می‌کند اما برخلاف display: none، فضا را اشغال می‌گذارد و با transition…
رنگ و پس‌زمینه (۷)
background
غیرارث‌بر
شکل خلاصه همه ویژگی‌های پس‌زمینه شامل رنگ، تصویر، اندازه، تکرار و موقعیت؛ گرادیان‌های CSS…
background-clip
غیرارث‌بر
ناحیه پخش پس‌زمینه را تعیین می‌کند؛ الگوی text با رنگ شفاف، گرادیان را داخل حروف می‌کشد و…
background-color
غیرارث‌بر
رنگ زیرین عنصر را تعیین می‌کند؛ شفافیت با rgb(0 0 0 / .5) و متغیرهای CSS برای تم‌های روشن/…
background-image
غیرارث‌بر
یک یا چند تصویر پس‌زمینه (شامل گرادیان) را تعیین می‌کند؛ چند تصویر با کاما لایه می‌شوند و…
background-position
غیرارث‌بر
موقعیت تصویر پس‌زمینه داخل جعبه را تعیین می‌کند؛ center center برای بنرها و مقادیر درصدی ب…
background-repeat
غیرارث‌بر
تکرار تصویر پس‌زمینه را کنترل می‌کند؛ no-repeat برای تصاویر بزرگ و repeat برای الگوهای کوچ…
background-size
غیرارث‌بر
اندازه تصویر پس‌زمینه را کنترل می‌کند؛ cover برای پرکردن کامل با برش و contain برای دیدن ک…
تایپوگرافی (۱۸)
color
ارث‌بر
رنگ متن عنصر را تعیین می‌کند و به فرزندان ارث می‌رسد؛ مقدار currentcolor به پراپرتی‌های دی…
direction
ارث‌بر
جهت نوشتار بلوک را تعیین می‌کند؛ rtl ستون فقرات سایت‌های فارسی است و همراه unicode-bidi در…
font-family
ارث‌بر
فهرست اولویت‌دار فونت‌ها را تعیین می‌کند؛ مرورگر اولین فونت موجود را برمی‌گزیند و فونت امن…
font-size
ارث‌بر
اندازه قلم متن را تعیین می‌کند؛ واحد rem نسبت به ریشه مقیاس‌پذیر است و clamp() برای تایپوگ…
font-style
ارث‌بر
سبک ایتالیک قلم را کنترل می‌کند؛ برای فونت‌های فارسی که ایتالیک واقعی ندارند، معمولاً بی‌ا…
font-weight
ارث‌بر
ضخامت قلم را تعیین می‌کند؛ اعداد ۱ تا ۹۰۰ استاندارد هستند و 400 معمولی و 700 بولد. فونت مت…
letter-spacing
ارث‌بر
فاصله بین حروف را تعیین می‌کند؛ در فارسی باید صفر بماند چون حروف چسبیده‌اند و فاصله زدن ات…
line-height
ارث‌بر
ارتفاع سطر متن را تعیین می‌کند؛ مقدار بدون واحد (مثل 1.8) نسبت به اندازه فونت است و برای م…
list-style
ارث‌بر
شکل خلاصه نشانه‌های لیست شامل نوع، تصویر و موقعیت؛ none برای لیست‌های سفارشی با آیکون CSS…
overflow-wrap
ارث‌بر
شکستن واژه‌های طولانی بی‌فاصله (مثل URLها) در پایان سطر را کنترل می‌کند؛ جلوگیری از خرابی…
text-align
ارث‌بر
تراز افقی متن درون بلوک را تعیین می‌کند؛ مقدار start نسبت به جهت صفحه (RTL یا LTR) درست رف…
text-decoration
ارث‌بر
خط تزئینی روی متن (زیرخط، خط‌خورده) را کنترل می‌کند؛ shape: none حذف زیرخط لینک‌ها و under…
text-overflow
غیرارث‌بر
نمایش محتوای سرریزشده متن درون خطی را تعیین می‌کند؛ الگوی سه‌گانه overflow: hidden + white…
text-shadow
ارث‌بر
سایه متن با جابه‌جایی و بلور؛ افکت نئون و خوانایی متن روی تصویر از کاربردهای اصلی آن است و…
text-transform
ارث‌بر
تبدیل خودکار حروف لاتین به بزرگ/کوچک را انجام می‌دهد؛ روی حروف فارسی اثری ندارد و uppercas…
white-space
ارث‌بر
مدیریت فاصله‌ها و شکست سطرها در متن؛ nowrap جلوگیری از شکست سطر و pre حفظ دقیق قالب‌بندی ک…
word-spacing
ارث‌بر
فاصله بین کلمات را کم‌وزیاد می‌کند؛ برای متن فارسی زیاده‌روی در آن جلوه نامناسب دارد اما م…
writing-mode
ارث‌بر
جهت جریان خطوط متن را از افقی به عمودی تغییر می‌دهد؛ برای تیترهای عمودی لاتین و لیبل‌های ک…