راهنمای عملی طراحی وب | آکادمی آموزشی الماوب
آموزش CSS از صفر؛ مفاهیم پایه، مثال‌های کاربردی و طراحی سایت واکنش‌گرا
از اولین دستور CSS تا طراحی یک کارت زیبا و صفحه سازگار با موبایل
اگر می‌خواهید ظاهر صفحات وب را طراحی کنید، CSS یکی از اولین مهارت‌هایی است که باید یاد بگیرید. با CSS می‌توانید رنگ‌ها، فونت‌ها، فاصله‌ها و چیدمان عناصر را کنترل کنید و ظاهر سایت را در موبایل و دسکتاپ بهبود دهید.
در این آموزش یاد می‌گیرید: CSS چیست، چگونه به HTML متصل می‌شود، انتخابگرها چه هستند، Box Model چگونه کار می‌کند و چه زمانی باید از Flexbox، Grid و Media Query استفاده کنید.
۱. CSS چیست و چه کاربردی دارد؟
CSS مخفف Cascading Style Sheets است و زبان استایل‌دهی صفحات وب محسوب می‌شود. HTML ساختار و معنای محتوا را مشخص می‌کند؛ CSS ظاهر و چیدمان آن را شکل می‌دهد.
برای مثال، عنوان صفحه با HTML ایجاد می‌شود و با CSS می‌توان رنگ، اندازه و فاصله آن را تغییر داد. اگر هنوز با ساختار صفحات آشنا نیستید، ابتدا دوره HTML و CSS الماوب را ببینید.
۲. سه روش استفاده از CSS
روش اول: CSS درون‌خطی (Inline)
در این روش استایل مستقیماً در ویژگی style عنصر قرار می‌گیرد. برای آزمایش سریع مناسب است، اما در پروژه‌های بزرگ نگهداری آن دشوار می‌شود.
روش دوم: CSS داخلی (Internal)
می‌توان استایل‌ها را در بخش style سند HTML نوشت. این روش برای صفحات آزمایشی یا نمونه‌های کوچک کاربرد دارد.
روش سوم: CSS خارجی (External)
روش رایج‌تر در پروژه‌ها، قرار دادن قوانین CSS در فایلی جداگانه مانند style.css و اتصال آن به HTML است.
نکته کاربردی: در پروژه‌های واقعی معمولاً استفاده از فایل CSS جداگانه، مدیریت و استفاده مجدد از استایل‌ها را ساده‌تر می‌کند.
۳. ساختار یک دستور CSS
color: #4f46e5;
font-size: 30px;
text-align: center;
}
در مثال بالا، h1 انتخابگر است؛ color و font-size ویژگی هستند و مقدار هر ویژگی بعد از علامت دونقطه قرار می‌گیرد. هر اعلان معمولاً با نقطه‌ویرگول تمام می‌شود.
۴. انتخابگرهای مهم CSS
- انتخابگر تگ: مانند
pبرای همه پاراگراف‌ها - انتخابگر کلاس: مانند
.cardبرای عناصر دارای کلاس card - انتخابگر شناسه: مانند
#headerبرای عنصری با شناسه مشخص - انتخابگر حالت: مانند
a:hoverهنگام قرار گرفتن نشانگر روی لینک
.card { padding: 20px; }
#header { background: #eef2ff; }
a:hover { color: #7c3aed; }
برای استایل‌های قابل استفاده مجدد معمولاً کلاس‌ها انتخاب مناسبی هستند. بهتر است نام کلاس‌ها مفهوم نقش عنصر را بیان کنند، نه فقط رنگ یا ظاهر فعلی آن.
۵. رنگ، فونت و فاصله‌ها در CSS
رنگ‌ها را می‌توان با نام، کد HEX یا قالب‌هایی مانند RGB تعریف کرد. اندازه متن را نیز می‌توان با واحدهایی مانند px و rem تعیین کرد.
color: #26344d;
background-color: #f5f3ff;
font-size: 1rem;
line-height: 1.9;
padding: 20px;
border-radius: 12px;
}
نکته فونت فارسی: برای نمایش یک فونت مشخص مانند ایران‌سنس در سایت، فایل فونت باید به‌درستی روی هاست قرار بگیرد و با CSS بارگذاری شود. نوشتن نام فونت به‌تنهایی کافی نیست.
۶. Box Model؛ درک اندازه و فاصله عناصر
هر عنصر در CSS یک جعبه دارد که از محتوا، padding (فاصله داخلی)، border (کادر) و margin (فاصله بیرونی) تشکیل می‌شود. درک این چهار بخش، کلید جلوگیری از به‌هم‌ریختگی چیدمان است.
width: 300px;
padding: 20px;
border: 2px solid #c4b5fd;
margin: 16px auto;
box-sizing: border-box;
}
با box-sizing: border-box، عرض تعیین‌شده شامل padding و border نیز می‌شود و محاسبه اندازه‌ها ساده‌تر خواهد بود.
۷. Flexbox یا Grid؛ کدام را یاد بگیریم؟
| ویژگی | Flexbox | Grid |
|---|---|---|
| نوع چیدمان | اغلب یک‌بعدی | دو‌بعدی |
| کاربرد مناسب | منو، ردیف دکمه‌ها | گالری و شبکه کارت‌ها |
| کنترل اصلی | ردیف یا ستون | ردیف و ستون هم‌زمان |
نمونه Flexbox
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
نمونه CSS Grid
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 20px;
}
۸. طراحی واکنش‌گرا با Media Query
طراحی واکنش‌گرا یعنی ظاهر و چیدمان سایت با اندازه صفحه سازگار باشد. برای مثال، شبکه سه‌ستونه در نمایشگر کوچک می‌تواند به یک ستون تبدیل شود.
.cards {
grid-template-columns: 1fr;
}
}
در طراحی واکنش‌گرا فقط کوچک‌کردن فونت کافی نیست؛ عرض تصاویر، فاصله دکمه‌ها، اندازه بخش‌های قابل لمس و خوانایی متن هم اهمیت دارند.
۹. پروژه عملی: ساخت یک کارت معرفی
برای تمرین، دو فایل index.html و style.css بسازید. ابتدا ساختار کارت را در فایل HTML قرار دهید:
سلام، من طراح وب هستم
در حال یادگیری CSS هستم.
سپس در فایل style.css این قوانین را بنویسید:
body {
margin: 0;
min-height: 100vh;
display: grid;
place-items: center;
background: #f3f0ff;
font-family: Tahoma, sans-serif;
}
.card {
width: min(90%, 480px);
padding: 28px;
background: #fff;
border-radius: 18px;
text-align: center;
box-shadow: 0 12px 35px #34216a20;
}
.card h1 { color: #32216c; font-size: 25px; }
.card p { color: #4b5870; line-height: 2; }
.card a {
display: inline-block;
padding: 10px 20px;
background: #6441c8;
color: white;
border-radius: 9px;
text-decoration: none;
}
تمرین تکمیلی: رنگ کارت را تغییر دهید، یک تصویر به آن اضافه کنید و با Media Query اندازه عنوان را در موبایل کمتر کنید. نتیجه را در مرورگر و گوشی آزمایش کنید.
۱۰. نقشه راه یادگیری CSS از مبتدی تا پروژه واقعی
مرحله 1: مبانی CSS
انتخابگرها، رنگ، فونت و اندازه
مرحله 2: Box Model
margin، padding، border و box-sizing
مرحله 3: چیدمان مدرن
Flexbox و CSS Grid
مرحله 4: طراحی واکنش‌گرا
Media Query و سازگاری با موبایل
مرحله 5: ساخت پروژه
صفحه شخصی، کارت محصول و صفحه فرود
۱۱. اشتباهات رایج در یادگیری CSS
- استفاده بی‌رویه از
!importantبه‌جای درک اولویت استایل‌ها - استفاده از اندازه‌های ثابت برای همه بخش‌ها بدون بررسی موبایل
- بی‌توجهی به کنتراست رنگ و خوانایی متن
- کپی کردن کدها بدون آزمایش و تغییر آن‌ها
- شروع هم‌زمان چند فریم‌ورک پیش از یادگیری اصول CSS
۱۲. پرسش‌های متداول درباره آموزش CSS
آیا برای یادگیری CSS باید HTML بلد باشیم؟
آشنایی اولیه با تگ‌ها و ساختار HTML کمک زیادی می‌کند، چون CSS ظاهر عناصر HTML را تغییر می‌دهد.
یادگیری CSS چقدر زمان می‌برد؟
به زمان تمرین و هدف شما بستگی دارد. بهتر است پیشرفت را با پروژه‌های قابل اجرا بسنجید، نه فقط تعداد روزها.
Flexbox بهتر است یا Grid؟
هیچ‌کدام همیشه بهتر نیستند. Flexbox معمولاً برای چیدمان یک‌بعدی و Grid برای شبکه‌های دو‌بعدی مناسب‌تر است.
آیا فقط با CSS می‌توان سایت ساخت؟
CSS ظاهر صفحه را طراحی می‌کند؛ برای ساختار محتوا به HTML و برای تعامل‌های پیچیده معمولاً به JavaScript نیاز دارید.
۱۳. جمع‌بندی و قدم بعدی
در این راهنما با CSS، روش‌های اتصال آن به HTML، انتخابگرها، Box Model، Flexbox، Grid و طراحی واکنش‌گرا آشنا شدید. برای تسلط بیشتر، هر بخش را با یک تمرین کوچک اجرا کنید و در پایان یک صفحه کامل بسازید.
برای ادامه مسیر یادگیری
آموزش HTML و CSS در آکادمی الماوب
مفاهیم پایه را در کنار تمرین و پروژه دنبال کنید.
مشاهده دوره HTML و CSS
