در حال بارگذاری...
مرجع کامل خصوصیات CSS
این مرجع کامل برای خصوصیات CSS طراحی شده تا توسعه‌دهندگان بتوانند به سرعت به اطلاعات دقیق و جامع دسترسی پیدا کنند. هدف این راهنما، فراهم کردن یک مرجع همه‌جانبه برای همه ویژگی‌های CSS است، به‌گونه‌ای که بتوان در هنگام کدنویسی به راحتی به آن مراجعه کرد و نمونه‌های واقعی را مشاهده نمود. خصوصیات در این مرجع بر اساس دسته‌بندی‌های منطقی مانند «چیدمان و موقعیت‌دهی»، «مدل جعبه»، «حاشیه و حاشیه‌های خطی»، «پس‌زمینه»، «تایپوگرافی»، «فلکس‌باکس» و «گرید» ارائه شده‌اند. این سازمان‌دهی امکان جستجوی سریع و کارآمد را برای توسعه‌دهندگان فراهم می‌کند و با مثال‌های عملی و پشتیبانی مرورگرها همراه است.
📊 Layout & Positioning Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| display | display: value | کنترل نوع نمایش عنصر | display: flex | تمام مرورگرها |
| position | position: value | روش موقعیت‌دهی عنصر | position: absolute | تمام مرورگرها |
| top | top: value | جابجایی عمودی | top: 10px | تمام مرورگرها |
| right | right: value | فاصله افقی از سمت راست | right: 20px | تمام مرورگرها |
| bottom | bottom: value | فاصله عمودی از پایین | bottom: 10px | تمام مرورگرها |
| left | left: value | فاصله افقی از سمت چپ | left: 20px | تمام مرورگرها |
| z-index | z-index: number | ترتیب روی هم قرار گرفتن عناصر | z-index: 999 | تمام مرورگرها |
| float | float: value | جهت شناور شدن عنصر | float: left | تمام مرورگرها |
| clear | clear: value | پاک کردن شناوری عناصر | clear: both | تمام مرورگرها |
| overflow | overflow: value | مدیریت محتوای اضافی | overflow: hidden | تمام مرورگرها |
| overflow-x | overflow-x: value | سرریز افقی | overflow-x: scroll | تمام مرورگرها |
| overflow-y | overflow-y: value | سرریز عمودی | overflow-y: auto | تمام مرورگرها |
| visibility | visibility: value | نمایش عنصر | visibility: hidden | تمام مرورگرها |
| clip | clip: rect() | برش محتوا | clip: rect(0,50px,50px,0) | تمام مرورگرها |
| vertical-align | vertical-align: value | تراز عمودی | vertical-align: middle | تمام مرورگرها |
📊 Box Model Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| width | width: value | عرض عنصر | width: 300px | تمام مرورگرها |
| height | height: value | ارتفاع عنصر | height: 200px | تمام مرورگرها |
| max-width | max-width: value | حداکثر عرض | max-width: 100% | تمام مرورگرها |
| min-width | min-width: value | حداقل عرض | min-width: 200px | تمام مرورگرها |
| max-height | max-height: value | حداکثر ارتفاع | max-height: 500px | تمام مرورگرها |
| min-height | min-height: value | حداقل ارتفاع | min-height: 100px | تمام مرورگرها |
| margin | margin: value | فضای بیرونی | margin: 20px | تمام مرورگرها |
| margin-top | margin-top: value | حاشیه بالا | margin-top: 10px | تمام مرورگرها |
| margin-right | margin-right: value | حاشیه راست | margin-right: 15px | تمام مرورگرها |
| margin-bottom | margin-bottom: value | حاشیه پایین | margin-bottom: 10px | تمام مرورگرها |
| margin-left | margin-left: value | حاشیه چپ | margin-left: 15px | تمام مرورگرها |
| padding | padding: value | فضای داخلی | padding: 15px | تمام مرورگرها |
| padding-top | padding-top: value | فضای داخلی بالا | padding-top: 10px | تمام مرورگرها |
| padding-right | padding-right: value | فضای داخلی راست | padding-right: 20px | تمام مرورگرها |
| padding-bottom | padding-bottom: value | فضای داخلی پایین | padding-bottom: 10px | تمام مرورگرها |
| padding-left | padding-left: value | فضای داخلی چپ | padding-left: 20px | تمام مرورگرها |
| box-sizing | box-sizing: value | محاسبه مدل جعبه | box-sizing: border-box | IE8+ |
📊 Border & Outline Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| border | border: width style color | کل حاشیه‌ها | border: 2px solid #000 | تمام مرورگرها |
| border-width | border-width: value | ضخامت حاشیه | border-width: 3px | تمام مرورگرها |
| border-style | border-style: value | نوع حاشیه | border-style: dashed | تمام مرورگرها |
| border-color | border-color: value | رنگ حاشیه | border-color: red | تمام مرورگرها |
| border-top | border-top: width style color | حاشیه بالا | border-top: 1px solid blue | تمام مرورگرها |
| border-right | border-right: width style color | حاشیه راست | border-right: 2px dotted red | تمام مرورگرها |
| border-bottom | border-bottom: width style color | حاشیه پایین | border-bottom: 3px double green | تمام مرورگرها |
| border-left | border-left: width style color | حاشیه چپ | border-left: 1px solid gray | تمام مرورگرها |
| border-radius | border-radius: value | گوشه‌های گرد | border-radius: 10px | IE9+ |
| outline | outline: width style color | خط دور عنصر | outline: 2px solid red | تمام مرورگرها |
| outline-offset | outline-offset: value | فاصله خط دور | outline-offset: 5px | تمام مرورگرها |
📊 Background Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| background | background: color image repeat position size | پس‌زمینه کامل | background: #fff url() no-repeat center | تمام مرورگرها |
| background-color | background-color: value | رنگ پس‌زمینه | background-color: #ff0000 | تمام مرورگرها |
| background-image | background-image: url() | تصویر پس‌زمینه | background-image: url('bg.jpg') | تمام مرورگرها |
| background-repeat | background-repeat: value | تکرار تصویر | background-repeat: no-repeat | تمام مرورگرها |
| background-position | background-position: value | موقعیت تصویر | background-position: center top | تمام مرورگرها |
| background-size | background-size: value | مقیاس تصویر | background-size: cover | IE9+ |
| background-attachment | background-attachment: value | رفتار اسکرول | background-attachment: fixed | تمام مرورگرها |
📊 Typography Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| font | font: style variant weight size/height family | کل فونت | font: bold 16px/1.5 Arial | تمام مرورگرها |
| font-family | font-family: name | نوع فونت | font-family: 'Arial', sans-serif | تمام مرورگرها |
| font-size | font-size: value | اندازه متن | font-size: 18px | تمام مرورگرها |
| font-weight | font-weight: value | ضخامت متن | font-weight: bold | تمام مرورگرها |
| font-style | font-style: value | استایل متن | font-style: italic | تمام مرورگرها |
| line-height | line-height: value | فاصله خطوط | line-height: 1.6 | تمام مرورگرها |
| text-align | text-align: value | تراز افقی متن | text-align: center | تمام مرورگرها |
| text-decoration | text-decoration: value | تزئین متن | text-decoration: underline | تمام مرورگرها |
| text-transform | text-transform: value | حالت حروف | text-transform: uppercase | تمام مرورگرها |
| text-overflow | text-overflow: value | مدیریت سرریز متن | text-overflow: ellipsis | IE6+ |
📊 Flexbox Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| display | display: flex | فعال‌سازی فلکس‌باکس | display: flex | IE10+ |
| flex-direction | flex-direction: value | جهت محور اصلی | flex-direction: column | IE10+ |
| flex-wrap | flex-wrap: value | شکستن آیتم‌ها | flex-wrap: wrap | IE10+ |
| justify-content | justify-content: value | تراز محور اصلی | justify-content: space-between | IE10+ |
| align-items | align-items: value | تراز محور متقاطع | align-items: center | IE10+ |
| align-self | align-self: value | تراز آیتم فردی | align-self: flex-end | IE10+ |
📊 Grid Properties
| Property | Syntax | Description | Example | Browser Support |
|---|---|---|---|---|
| display | display: grid | فعال‌سازی گرید | display: grid | IE10+ (-ms-) |
| grid-template-columns | grid-template-columns: values | عرض ستون‌ها | grid-template-columns: 1fr 2fr | IE10+ (-ms-) |
| grid-template-rows | grid-template-rows: values | ارتفاع ردیف‌ها | grid-template-rows: 100px auto | IE10+ (-ms-) |
| grid-gap | grid-gap: row column | فاصله بین آیتم‌ها | grid-gap: 20px 10px | IE10+ (-ms-) |
| justify-items | justify-items: value | تراز افقی آیتم‌ها | justify-items: center | IE10+ (-ms-) |
| align-items | align-items: value | تراز عمودی آیتم‌ها | align-items: center | IE10+ (-ms-) |
Quick Examples
css
CSS Code
/* نمونه چیدمان */
.container {
display: grid;
grid-template-columns: 1fr 2fr;
gap: 20px;
}
/* نمونه تایپوگرافی */
.text {
font: bold 18px/1.6 'Arial', sans-serif;
text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
}
/* نمونه انیمیشن */
.box {
transition: transform 0.3s ease;
transform: scale(1);
}
.box:hover {
transform: scale(1.1);
}- همیشه فونت‌های جایگزین را در font-family مشخص کنید
- از واحدهای نسبی (em، rem، %) برای طراحی واکنش‌گرا استفاده کنید
- حداقل از !important استفاده کنید
- ویژگی‌های CSS را در مرورگرهای مختلف بررسی کنید، مخصوصاً ویژگی‌های جدید
- از خواص شورت‌هند برای کاهش حجم فایل استفاده کنید
- اثرات پیچیده انیمیشن‌ها و فیلترها بر عملکرد را در نظر بگیرید
- کد CSS را با ولیدیتورهای آنلاین بررسی کنید
- از متغیرهای CSS (Custom Properties) برای نگهداری بهتر استفاده کنید
- برای ویژگی‌های تجربی، پیشوندهای مرورگر را اضافه کنید
- ویژگی‌های مرتبط را کنار هم گروه‌بندی کنید تا کد منظم و خوانا باشد
🧠 دانش خود را بیازمایید
آماده شروع
Reference Knowledge Check
دانش خود را در مورد خصوصیات CSS و کاربرد آن‌ها بیازمایید.
3
سوالات
70%
برای قبولی
∞
زمان
∞
تلاش‌ها
📝 دستورالعمل‌ها
- هر سوال را با دقت بخوانید
- بهترین پاسخ را برای هر سوال انتخاب کنید
- می‌توانید آزمون را هر چند بار که می‌خواهید تکرار کنید
- پیشرفت شما در بالا نمایش داده می‌شود