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

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

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

📌 استایل‌دهی چیست؟

استایل‌دهی به مجموعه روش‌هایی گفته می‌شود که ظاهر و چیدمان عناصر HTML را کنترل می‌کنند:

html

            <p style="color: red; font-size: 20px;">این یک متن با استایل است</p>

امتحان کنید

📌 سینتکس پایه CSS

سینتکس CSS از سه بخش اصلی تشکیل شده است:

css

            selector {
  property: value;
  property: value;
}

            

اجزای تشکیل دهنده:

انتخابگر (Selector): مشخص می‌کند کدام عنصر HTML باید استایل بگیرد
خاصیت (Property): ویژگی که می‌خواهید تغییر دهید (مثل color, font-size)
مقدار (Value): مقداری که به خاصیت اختصاص می‌دهید (مثل red, 16px)

مثال‌های کاربردی:

css

            body {
  font-family: 'Tahoma', sans-serif;
  background-color: #f9f9f9;
}
h1 {
  color: #d35400;
  text-align: center;
}

            

📌 روش‌های مختلف استایل‌دهی

1. استایل inline (درون‌خطی)

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

html

            <h1 style="color: blue; text-align: center;">عنوان صفحه</h1>

امتحان کنید

2. استایل internal (داخلی)

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

html

            <head>
  <style>
    h1 {
      color: blue;
      text-align: center;
    }
  </style>
</head>

            

امتحان کنید

3. استایل external (خارجی)

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

html

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

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

روش	مزایا	معایب
Inline	سریع برای تغییرات کوچک	نگهداری سخت برای صفحات بزرگ
Internal	مدیریت بهتر استایل‌ها	عدم امکان استفاده مجدد در صفحات دیگر
External	بهترین روش برای پروژه‌های بزرگ	نیاز به فایل اضافی

📌 تمرین عملی

صفحه HTML زیر را با استفاده از CSS داخلی (internal) استایل‌دهی کنید:

html

            <!DOCTYPE html>
<html dir="rtl" lang="fa">
<head>
  <meta charset="UTF-8">
  <title>تمرین استایل‌دهی</title>
</head>
<body>
  <h1>عنوان اصلی</h1>
  <p>این یک پاراگراف نمونه است.</p>
</body>
</html>

            

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

فونت صفحه را به Tahoma تغییر دهید
رنگ عنوان اصلی را به نارنجی (#e67e22) تنظیم کنید
پاراگراف‌ها را با حاشیه و پس‌زمینه سفید طراحی کنید
رنگ پس‌زمینه صفحه را به #f5f5f5 تغییر دهید

📌 قدم بعدی

در درس بعدی با انتخابگرهای CSS و روش‌های پیشرفته‌تر استایل‌دهی آشنا خواهیم شد!

❮ بخش قبلی بخش بعدی ❯