CSS Reference
در اینجا یک راهنمای جامع CSS Reference (مرجع CSS) برایت آوردهام — شامل ساختار کلی، دستهبندی ویژگیها، و منابع معتبر برای یادگیری بیشتر:
🧩 CSS Reference — مرجع کامل CSS
📘 1. مفاهیم پایه
-
Selectors (انتخابگرها):
انتخاب عناصر HTML برای اعمال استایل.
مثال:
p { color: blue; } /* بر اساس تگ */
.className { color: red; } /* بر اساس کلاس */
#idName { color: green; } /* بر اساس شناسه (ID) */
-
Specificity (اولویت):
تعیین میکند کدام استایل در صورت تعارض اعمال شود. -
Inheritance (ارثبری):
برخی ویژگیها مثلcolorوfont-familyاز والد به فرزند منتقل میشوند.
🎨 2. دستهبندی ویژگیها (Properties)
🖋️ Typography (متن و فونت)
| ویژگی | توضیح | مثال |
|---|---|---|
font-family |
نوع فونت | font-family: Arial, sans-serif; |
font-size |
اندازه متن | font-size: 16px; |
font-weight |
ضخامت | font-weight: bold; |
text-align |
تراز متن | text-align: center; |
line-height |
فاصله بین خطوط | line-height: 1.6; |
color |
رنگ متن | color: #333; |
📏 Box Model (مدل جعبهای)
| ویژگی | توضیح | مثال |
|---|---|---|
width, height |
عرض و ارتفاع | width: 100px; |
padding |
فاصله داخلی | padding: 10px; |
margin |
فاصله خارجی | margin: 20px; |
border |
حاشیه | border: 1px solid black; |
box-sizing |
نوع محاسبه اندازه | box-sizing: border-box; |
🧭 Layout (چیدمان)
| ویژگی | توضیح | مثال |
|---|---|---|
display |
نوع نمایش | display: flex; |
position |
موقعیت عنصر | position: absolute; |
top, left, right, bottom |
موقعیت دقیق | top: 10px; |
float |
چپ یا راستچین | float: left; |
clear |
رفع float | clear: both; |
z-index |
ترتیب لایه | z-index: 10; |
🧩 Flexbox
| ویژگی | توضیح | مثال |
|---|---|---|
display |
فعالسازی فلکس | display: flex; |
justify-content |
تراز افقی | justify-content: space-between; |
align-items |
تراز عمودی | align-items: center; |
flex-direction |
جهت چینش | flex-direction: row; |
gap |
فاصله بین آیتمها | gap: 10px; |
Grid Layout
| ویژگی | توضیح | مثال |
|---|---|---|
display |
فعالسازی گرید | display: grid; |
grid-template-columns |
تعداد و اندازه ستونها | grid-template-columns: 1fr 2fr; |
grid-gap |
فاصله بین سلولها | grid-gap: 10px; |
justify-items |
تراز افقی آیتمها | justify-items: center; |
🌈 Colors & Backgrounds
| ویژگی | توضیح | مثال |
|---|---|---|
background-color |
رنگ پسزمینه | background-color: #f5f5f5; |
background-image |
تصویر پسزمینه | background-image: url('bg.jpg'); |
background-size |
اندازه تصویر | background-size: cover; |
opacity |
شفافیت | opacity: 0.8; |
✨ Effects & Animation
| ویژگی | توضیح | مثال |
|---|---|---|
transition |
انتقال نرم | transition: all 0.3s ease; |
transform |
تغییر شکل | transform: rotate(45deg); |
animation |
انیمیشن | animation: move 2s infinite; |
box-shadow |
سایه جعبه | box-shadow: 0 4px 10px rgba(0,0,0,0.1); |
🧠 3. واحدها (Units)
-
مطلق:
px,cm,mm -
نسبی:
em,rem,%,vw,vh
دیدگاهتان را بنویسید