CSS Properties Cheat Sheet

مرجع سریع پرکاربردترین ویژگی‌های CSS برای چیدمان و استایل‌دهی. منبع کامل: CSS reference — MDN و CSS Reference — W3Schools.

دسته: CSS ←مفهوم مرتبط: CSS چیست؟ ←

چیدمان

نام	امضا	مثال	خروجی	کاربرد
display	display: flex \| grid \| block \| none	`.box { display: flex; }`		تعیین نوع رندر عنصر
position	position: relative \| absolute \| fixed \| sticky	`.modal { position: fixed; top: 0; }`		کنترل مکان‌یابی عنصر

Flexbox

نام	امضا	مثال	خروجی	کاربرد
justify-content	justify-content: center \| space-between	`.row { display: flex; justify-content: space-between; }`		چیدمان افقی آیتم‌ها در Flex Container
align-items	align-items: center \| stretch	`.row { display: flex; align-items: center; }`		چیدمان عمودی آیتم‌ها در Flex Container

Grid

نام	امضا	مثال	خروجی	کاربرد
grid-template-columns	grid-template-columns: repeat(3, 1fr)	`.grid { display: grid; grid-template-columns: repeat(3, 1fr); }`		تعریف ستون‌های Grid

جعبه

نام	امضا	مثال	خروجی	کاربرد
margin / padding	margin: 0 auto; padding: 16px;	`.card { padding: 16px; margin: 0 auto; }`		فاصله بیرونی/داخلی عنصر
border-radius	border-radius: 8px;	`.card { border-radius: 8px; }`		گردکردن گوشه‌های عنصر

ظاهر

نام	امضا	مثال	خروجی	کاربرد
color / background-color	color: #333; background-color: #fff;	`body { color: #333; }`		رنگ متن و پس‌زمینه

تایپوگرافی

نام	امضا	مثال	خروجی	کاربرد
font-size / font-weight	font-size: 16px; font-weight: 700;	`h1 { font-weight: 700; }`		اندازه و ضخامت فونت

جلوه

نام	امضا	مثال	خروجی	کاربرد
transition	transition: all 0.2s ease;	`.btn { transition: background-color 0.2s; }`		انیمیشن نرم بین دو حالت

واکنش‌گرا

نام	امضا	مثال	خروجی	کاربرد
@media	@media (max-width: 768px) { ... }	`@media (max-width: 768px) { .col { width: 100%; } }`		اعمال استایل بر اساس اندازه صفحه