🎨 درس ششم: آشنایی با CSS

🎯 هدف این درس: آشنایی با CSS و نحوه زیبا کردن صفحات وب

سلام دوست عزیز! 👋

توی درس‌های قبل، یاد گرفتی چطور صفحات وب بسازی. اما این صفحات هنوز زیبا و جذاب نیستن. اینجا جایی‌ست که CSS به کمک ما می‌آید.

توی این درس، با هم یاد می‌گیریم:

✅ CSS چیست و چه کاربردی دارد؟
✅ روش‌های افزودن CSS به صفحه
✅ رنگ‌ها، فونت‌ها و استایل‌دهی
✅ تمرین: زیبا کردن صفحات

🎨 بخش ۱: CSS چیست؟

CSS مخفف Cascading Style Sheets هست و به زبان ساده، لباس وب‌سایت محسوب می‌شه.

با CSS می‌تونیم:

✅ رنگ‌ها رو تغییر بدیم
✅ فونت‌ها رو عوض کنیم
✅ اندازه‌ها رو تنظیم کنیم
✅ فاصله‌ها رو مدیریت کنیم
✅ و خیلی کارهای دیگه…

💡 مقایسه HTML و CSS:

HTML اسکلت ساختمونه و CSS دکوراسیون و رنگ‌آمیزی اونه. هر دو با هم یه وب‌سایت کامل رو می‌سازن.

📝 بخش ۲: روش‌های افزودن CSS

سه روش برای افزودن CSS به صفحه وجود داره:

۱. CSS داخلی (Internal)

با استفاده از تگ <style> در بخش <head>:

🎨
CSS داخلی

CSS
v3


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>صفحه با CSS</title>
        <style>
            h1 {
                color: blue;
            }
        </style>
    </head>
    <body>
        <h1>این عنوان آبی است</h1>
    </body>
</html>

۲. CSS خطی (Inline)

استفاده از ویژگی style در خود تگ‌ها:

🎨
CSS خطی

CSS
v3


<h1 style="color: blue; font-size: 30px;">
    این عنوان آبی و بزرگ است
</h1>

۳. CSS خارجی (External)

لینک به یک فایل CSS جداگانه:

🎨
CSS خارجی

CSS
v3


<head>
    <link rel="stylesheet" 
          href="style.css">
</head>

✅ روش پیشنهادی

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

🎨 بخش ۳: رنگ‌ها و فونت‌ها

رنگ‌ها در CSS

🎨
رنگ‌ها در CSS

CSS
v3


<style>
    .color-example {
        /* نام رنگ */
        color: red;
        
        /* کد هگزادسیمال */
        color: #FF0000;
        
        /* RGB */
        color: rgb(255, 0, 0);
        
        /* رنگ پس‌زمینه */
        background-color: #f0f0f0;
    }
</style>

فونت‌ها در CSS

🎨
فونت‌ها در CSS

CSS
v3


<style>
    .font-example {
        /* نوع فونت */
        font-family: "Vazir", "Arial", sans-serif;
        
        /* اندازه فونت */
        font-size: 18px;
        
        /* ضخامت فونت */
        font-weight: bold;
        
        /* فاصله خطوط */
        line-height: 2;
    }
</style>

📐 بخش ۴: فاصله‌ها و حاشیه‌ها

🎨
فاصله‌ها و حاشیه‌ها

CSS
v3


<style>
    .box {
        /* فاصله داخلی */
        padding: 20px;
        
        /* فاصله خارجی */
        margin: 30px;
        
        /* حاشیه */
        border: 2px solid #333;
        
        /* گوشه‌های گرد */
        border-radius: 10px;
    }
</style>

📝 بخش ۵: پروژه عملی – زیبا کردن صفحه

حالا بیایید یک صفحه HTML ساده رو با CSS زیبا کنیم:

📝 پروژه: صفحه معرفی با CSS

یک صفحه معرفی بسازید که با CSS زیبا شده باشد:

پس‌زمینه مناسب
رنگ‌های هماهنگ
فونت خوانا
فاصله‌های مناسب

🔍 راه‌حل پروژه:

🎨
صفحه با CSS

CSS
v3


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>صفحه من</title>
        <style>
            body {
                background-color: #f0f4f8;
                font-family: "Vazir", "Arial", sans-serif;
                margin: 0;
                padding: 40px;
                text-align: center;
            }

            .card {
                background: white;
                max-width: 500px;
                margin: 0 auto;
                padding: 40px;
                border-radius: 20px;
                box-shadow: 0 10px 30px rgba(0,0,0,0.1);
            }

            h1 {
                color: #2563EB;
                font-size: 2.5rem;
            }

            p {
                color: #4B5563;
                line-height: 1.8;
                font-size: 1.1rem;
            }

            img {
                width: 150px;
                height: 150px;
                border-radius: 50%;
                border: 4px solid #2563EB;
            }
        </style>
    </head>
    <body>
        <div class="card">
            <img src="profile.jpg" 
                 alt="پروفایل">
            <h1>یونس رجستری</h1>
            <p>
                من عاشق یادگیری و آموزش هستم. 
                توی رجستری آکادمی دوره‌های برنامه‌نویسی رو یاد می‌گیرم.
            </p>
        </div>
    </body>
</html>

📝 تمرین‌های عملی

🎯 تمرین شماره ۱: استایل‌دهی به متن

به یک صفحه HTML ساده، CSS اضافه کنید و رنگ، اندازه و فونت متن‌ها را تغییر دهید.

🎯 تمرین شماره ۲: کارت معرفی

یک کارت معرفی با CSS طراحی کنید که شامل تصویر، عنوان، توضیحات و دکمه باشد.

🧩 جمع‌بندی درس

تبریک می‌گم! 🎉 توی این درس یاد گرفتی:

✅ CSS چیست و چه کاربردی دارد
✅ سه روش افزودن CSS به صفحه
✅ استفاده از رنگ‌ها و فونت‌ها
✅ تنظیم فاصله‌ها و حاشیه‌ها
✅ زیبا کردن یک صفحه با CSS

🎯 برای درس بعدی آماده‌اید؟

در درس بعدی، پروژه نهایی رو با هم می‌سازیم و همه چیزهایی که یاد گرفتی رو توی یه صفحه کامل جمع می‌کنیم.

🔗 لینک‌های مرتبط

⬅️
درس قبل: فرم‌ها

🚀
پروژه نهایی

🏠
صفحه دوره‌ها

👤

نویسنده

📅

تاریخ انتشار 19 مرداد 1405

🔄

آخرین بروزرسانی 19 مرداد 1405

دنیای تکنولوژی
از یادگیری شروع می‌شود

آشنایی با CSS