آموزش استایلهای CSS
بررسی خط به خط کد: style=”max-width: 800px; margin: 0 auto; background: white; padding: 30px; border-radius: 15px; box-shadow: 0 10px 30px rgba(0,0,0,0.1);”
۱. max-width: 800px;
کد
توضیح کامل
📏 حداکثر عرض
به عنصر میگوید که عریضتر از ۸۰۰ پیکسل نشود.
اگر صفحه نمایش کوچکتر باشد، عنصر متناسب با صفحه کوچکتر میشود.
کاربرد: طراحی ریسپانسیو و واکنشگرا
نمایش زنده – باکس محدود به ۸۰۰px
⚡ هر چقدر صفحه عریضتر شود، این باکس از ۸۰۰px بیشتر نمیشود
۲. margin: 0 auto;
کد
/* margin: 0 auto → ۰ = top/bottom, auto = right/left */
توضیح کامل
🎯 وسطچین کردن افقی
margin: 0 auto; یعنی:
- ✅ ۰ = حاشیه بالا و پایین = ۰ پیکسل
- ✅ auto = حاشیه راست و چپ = خودکار (مساوی)
- 🎯 نتیجه: عنصر در وسط صفحه قرار میگیرد!
💡 شرط لازم: عنصر باید عرض مشخصی داشته باشد
نمایش زنده – باکس همیشه در وسط
⚡ باکس قرمز بدون توجه به اندازه صفحه، همیشه در مرکز قرار دارد
۳. background: white;
کد
/* معادل: background: rgb(255,255,255); */
توضیح کامل
🎨 رنگ پسزمینه
پسزمینه عنصر را سفید میکند.
سه روش مقداردهی:
۱️⃣ white – نام رنگ
۲️⃣ #ffffff – کد هگزادسیمال
۳️⃣ rgb(255,255,255) – RGB
💡 پرکاربردترین مقدار برای پسزمینه
نمایش زنده – پسزمینه سفید
۴. padding: 30px;
کد
/* ۳۰px = همه طرفها ۳۰px */
/* padding: 10px 20px = 10px top/bottom, 20px right/left */
توضیح کامل
📦 فاصله داخلی (Padding)
padding فاصله بین محتوای عنصر و حاشیه را مشخص میکند.
✅ padding: 30px; → ۳۰ پیکسل فاصله از همه طرفها
✅ padding: 10px 20px; → ۱۰px بالا/پایین، ۲۰px چپ/راست
✅ padding-top, padding-right, padding-bottom, padding-left → تنظیم تکی هر طرف
💡 تفاوت padding و margin: padding داخل حاشیه، margin خارج حاشیه
نمایش زنده – مقایسه padding
۵. border-radius: 15px;
کد
/* ۵۰% → دایره کامل */
/* border-radius: 10px 20px 30px 40px; */
توضیح کامل
⚪ گوشههای گرد
border-radius گوشههای عنصر را گرد میکند.
✅ ۱۵px → شعاع انحنای ۱۵ پیکسل (گردی ملایم)
✅ ۳۰px → گردی متوسط
✅ ۵۰% → عنصر را کاملاً دایره میکند (برای تصاویر پروفایل)
💡 برای دایره کامل: width و height مساوی + border-radius: 50%
نمایش زنده – مقایسه گردی گوشهها
گردی کم
گردی متوسط
دایره کامل
۶. box-shadow: 0 10px 30px rgba(0,0,0,0.1);
کد
توضیح کامل
🌓 سایه
box-shadow به عنصر سایه اضافه میکند.
۰ ← افقی (مقدار مثبت = راست، منفی = چپ)
۱۰px ← عمودی (مقدار مثبت = پایین، منفی = بالا)
۳۰px ← محو شدگی (هرچه بیشتر = محوتر)
rgba(0,0,0,0.1) ← رنگ مشکی با opacity 10%
/* box-shadow: 0 5px 15px rgba(0,0,0,0.2); */
مقایسه سایهها
۰ ۲px 5px
۰ ۱۰px 30px
۰ ۱۵px 40px
۱۰px ۱۰px 20px
⚡ box-shadow: X Y Blur Color | X=افقی، Y=عمودی، Blur=محوشدگی
آموزش گام به گام تگ <h1> با استایل Inline
بررسی خط به خط ۸ دستور CSS در یک تگ
کد کامل تگ h1
color: #d44a6e;
font-size: 42px;
text-align: center;
border-bottom: 4px solid #ff9aa2;
padding-bottom: 18px;
margin-top: 0;
font-weight: 700;
text-shadow: 2px 2px 4px rgba(255, 107, 149, 0.2);
“>
👩🏫 سلام! من مریم منفرد هستم
</h1>
color
✅ رنگ متن
#d44a6e = صورتی-قرمز
font-size
✅ اندازه قلم
۴۲px = بزرگ و خوانا
۳۲
۴۲
text-align
✅ تراز افقی
center = وسطچین
border-bottom
✅ حاشیه پایین
۴px ضخامت • solid • #ff9aa2
padding-bottom
✅ فاصله داخلی پایین
۱۸px فاصله متن تا حاشیه
margin-top
✅ فاصله خارجی بالا
۰ = حذف فاصله پیشفرض
font-weight
✅ ضخامت قلم
۷۰۰ = bold • ۴۰۰ = normal
bold
text-shadow
✅ سایه متن
۲px 2px 4px rgba(255,107,149,0.2)
با سایه
خروجی نهایی کد – نمایش زنده
👩🏫 سلام! من مریم منفرد هستم
✨ این تگ h1 با ۸ دستور CSS به صورت Inline استایل داده شده است ✨
خلاصه کامل آموزش – نکات کلیدی
📏 Box Model
- • max-width – حداکثر عرض
- • padding – فاصله داخلی
- • margin – فاصله خارجی
- • border – حاشیه
🎨 استایلهای ظاهری
- • background – رنگ پسزمینه
- • color – رنگ متن
- • border-radius – گوشه گرد
- • box-shadow – سایه
✏️ استایلهای متن
- • font-size – اندازه قلم
- • font-weight – ضخامت قلم
- • text-align – تراز متن
- • text-shadow – سایه متن
💡 نکته مهم: Inline CSS با ویژگی style مستقیماً در تگ HTML نوشته میشود و بالاترین اولویت را دارد.