آموزش جامع استایل‌دهی در HTML

🎯 اهداف یادگیری

آشنایی با سه روش اصلی استایل‌دهی در HTML
یادگیری نحوه اعمال استایل‌های مختلف به عناصر
درک مفهوم Selectorها در CSS
آشنایی با بهترین روش‌های استایل‌دهی

📌 روش‌های استایل‌دهی در HTML

۱. استایل درون‌خطی (Inline)

استایل‌ها مستقیماً در خود تگ HTML با ویژگی style اعمال می‌شوند:

html

            <p style="color: red; font-size: 20px;">
    این یک پاراگراف با استایل درون‌خطی است
</p>

۲. استایل داخلی (Internal)

استایل‌ها در بخش head سند و داخل تگ <style> تعریف می‌شوند:

html

            <head>
    <style>
        p {
            color: blue;
            font-family: Arial;
        }
    </style>
</head>

            

۳. استایل خارجی (External)

استایل‌ها در یک فایل جداگانه با پسوند .css ذخیره می‌شوند:

html

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

مقایسه روش‌های استایل‌دهی

روش	مزایا	معایب
درون‌خطی	سریع برای تغییرات موقت	نگهداری سخت، عدم استفاده مجدد
داخلی	مناسب برای صفحات تک‌صفحه‌ای	عدم استفاده مجدد در صفحات دیگر
خارجی	استفاده مجدد، نگهداری آسان	نیاز به بارگیری فایل اضافی

📌 Selectorهای پرکاربرد CSS

۱. انتخابگر تگ

تمام عناصر با تگ مشخص را انتخاب می‌کند:

css

            p {
    color: red;
}

۲. انتخابگر کلاس

عناصری که کلاس مشخص دارند را انتخاب می‌کند:

css

            .highlight {
    background-color: yellow;
}

۳. انتخابگر ID

عنصر با ID مشخص را انتخاب می‌کند:

css

            #header {
    font-size: 24px;
}

۴. انتخابگر ترکیبی

ترکیب چند انتخابگر برای انتخاب دقیق‌تر:

css

            div.box {
    border: 1px solid #ccc;
}

📌 تمرین عملی

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

html

            <div class="card">
    <h2>عنوان کارت</h2>
    <p>توضیحات کارت در این قسمت قرار می‌گیرد</p>
</div>

            

راهنمای تمرین:

کارت باید دارای حاشیه و سایه باشد
عنوان باید رنگ متفاوتی داشته باشد
از padding مناسب استفاده کنید
رنگ پس‌زمینه را تنظیم کنید

📌 قدم بعدی

❮ قبلی بعدی ❯