دوره‌ها / Django / استایل‌دهی پروژه (Add Styles)

استایل‌دهی پروژه (Add Styles)

20 دقیقه Article

استایل‌دهی پروژه: زیبا کردن سایت شما 💅

حالا وقتشه که سایت رو زیبا کنیم! با CSS می‌تونید رنگ‌ها، فونت‌ها، فاصله‌ها و خیلی چیزهای دیگه رو کنترل کنید.

ساختار CSS پیشنهادی

/* static/css/base.css */
:root {{
    --primary-color: #4caf50;
    --secondary-color: #2196f3;
    --text-color: #333;
    --bg-color: #fff;
}}

body {{
    font-family: 'Vazirmatn', sans-serif;
    color: var(--text-color);
    background: var(--bg-color);
    line-height: 1.6;
}}

.post {{
    background: #f5f5f5;
    padding: 20px;
    margin: 20px 0;
    border-radius: 8px;
}}

CSS Variables:

استفاده از CSS Variables (Custom Properties) باعث میشه تغییر رنگ‌ها و استایل‌ها در کل سایت خیلی راحت‌تر بشه!

نکته: برای پروژه‌های بزرگ، از یک CSS Framework مثل Bootstrap یا Tailwind استفاده کنید. این کار سرعت توسعه رو خیلی بالا می‌بره!

🎯 تمرین عملی:

یک سیستم رنگ برای سایت تعریف کنید (primary، secondary، success، danger) و از CSS Variables استفاده کنید. سپس استایل‌های پایه برای typography و spacing بنویسید.

آماده رفتن به درس بعدی هستید؟

این درس را به پایان رساندید و می‌توانید به درس بعدی بروید.

برای ذخیره پیشرفت وارد شوید