🎨 درس اول: آشنایی با CSS و انتخابگرها

🎯 هدف این درس: آشنایی با CSS، انواع انتخابگرها و نحوه استایل‌دهی به عناصر

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

به اولین درس از دوره جامع CSS خوش آمدی. توی این درس، با قدرت CSS آشنا می‌شیم و یاد می‌گیریم چطور به عناصر HTML استایل بدیم.

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

✅ CSS چیست و چه کاربردی دارد
✅ روش‌های افزودن CSS به صفحه
✅ انتخابگرهای پایه (tag، class، id)
✅ اولویت انتخابگرها
✅ تمرین: استایل‌دهی به یک صفحه ساده

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

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

۱. CSS داخلی (Internal)

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

🎨
CSS داخلی

CSS
v3


<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>CSS داخلی</title>
        <style>
            h1 {
                color: blue;
                font-size: 30px;
            }
        </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 برای چندین صفحه استفاده کنی.

🎯 بخش ۲: انتخابگرهای پایه

انتخابگرها مشخص می‌کنن که استایل به کدام عناصر HTML اعمال بشه. سه نوع انتخابگر پایه وجود داره:

📊 انواع انتخابگرهای پایه

نوع	نحوه نوشتن	کاربرد	مثال
تگ	`نام تگ`	همه عناصر با آن تگ	`p { color: red; }`
کلاس	`.نام کلاس`	عناصر با کلاس مشخص	`.highlight { background: yellow; }`
شناسه (id)	`#نام شناسه`	عنصر با شناسه مشخص	`#header { font-size: 30px; }`

مثال: استفاده از انتخابگرهای مختلف

🎨
انتخابگرها

CSS
v3


<style>
    /* انتخابگر تگ */
    p {
        color: #4B5563;
        font-size: 18px;
    }

    /* انتخابگر کلاس */
    .highlight {
        background: #FEF3C7;
        padding: 10px;
        border-radius: 8px;
    }

    /* انتخابگر شناسه */
    #title {
        color: #2563EB;
        font-size: 32px;
        text-align: center;
    }
</style>

<h1 id="title">عنوان اصلی</h1>
<p>این یک پاراگراف معمولی است.</p>
<p class="highlight">این پاراگراف هایلایت شده است.</p>

💡 تفاوت کلاس و شناسه:

کلاس (class) برای چندین عنصر قابل استفاده است، اما شناسه (id) فقط برای یک عنصر در کل صفحه باید استفاده شود.

📊 بخش ۳: اولویت انتخابگرها

وقتی چند انتخابگر به یک عنصر اشاره می‌کنن، کدوم استایل اعمال می‌شه؟ اولویت انتخابگرها به این ترتیبه:

CSS خطی (Inline): بالاترین اولویت
شناسه (id): اولویت دوم
کلاس (class): اولویت سوم
تگ (tag): پایین‌ترین اولویت

🎨
اولویت انتخابگرها

CSS
v3


<style>
    /* تگ - اولویت پایین */
    p {
        color: gray;
    }

    /* کلاس - اولویت متوسط */
    .text-blue {
        color: blue;
    }

    /* شناسه - اولویت بالا */
    #text-red {
        color: red;
    }
</style>

<p id="text-red" 
   class="text-blue">
    این متن قرمز است (چون id اولویت بالاتری دارد)
</p>

📝 بخش ۴: پروژه عملی – استایل‌دهی به یک صفحه ساده

📝 پروژه: استایل‌دهی به یک صفحه

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

عنوان اصلی با شناسه
چند پاراگراف با کلاس‌های مختلف
یک دکمه با استایل اختصاصی

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

🎨
صفحه با CSS

CSS
v3


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

        #main-title {
            color: #2563EB;
            font-size: 2.5rem;
            margin-bottom: 20px;
        }

        .intro {
            color: #4B5563;
            font-size: 1.1rem;
            line-height: 1.8;
            max-width: 500px;
            margin: 0 auto 20px;
        }

        .highlight {
            background: #FEF3C7;
            padding: 12px 20px;
            border-radius: 8px;
            border-right: 4px solid #F59E0B;
            max-width: 500px;
            margin: 0 auto 20px;
        }

        .btn {
            background: #2563EB;
            color: white;
            border: none;
            padding: 12px 30px;
            border-radius: 8px;
            font-size: 1rem;
            cursor: pointer;
            transition: background 0.3s;
        }

        .btn:hover {
            background: #1D4ED8;
        }
    </style>
</head>
<body>
    <h1 id="main-title">🚀 به دنیای CSS خوش آمدید</h1>
    
    <p class="intro">
        CSS به شما قدرت میدهد تا صفحات وب را زیبا و جذاب کنید.
    </p>
    
    <p class="highlight">
        💡 با یادگیری CSS میتوانید هر طرحی که در ذهن دارید را پیادهسازی کنید.
    </p>
    
    <button class="btn">شروع یادگیری</button>
</body>
</html>

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

🎯 تمرین شماره ۱

یک صفحه HTML با سه پاراگراف بسازید. پاراگراف اول با کلاس، پاراگراف دوم با شناسه و پاراگراف سوم با تگ استایل داده شود.

🎯 تمرین شماره ۲

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

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

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

✅ سه روش افزودن CSS به صفحه (داخلی، خطی، خارجی)
✅ انتخابگرهای پایه (تگ، کلاس، شناسه)
✅ اولویت انتخابگرها
✅ استایل‌دهی به یک صفحه ساده

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

در درس بعدی، با رنگ‌ها، فونت‌ها و متن آشنا می‌شیم و صفحات خود را زیباتر می‌کنیم.

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

⬅️
مقدمه دوره

🚀
درس بعدی: رنگ‌ها و فونت‌ها

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

👤

نویسنده یونس رجستری

📅

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

🔄

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

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

آشنایی با CSS و انتخابگرها