روش‌های افزودن استایل

آشنایی با سه روش افزودن CSS به HTML: استایل درون‌خطی، داخلی و خارجی و مقایسه آن‌ها

مقدمه‌ای بر CSS

در مبحث قبلی با تعریف CSS آشنا شدیم. حالا عمیق‌تر می‌شویم و می‌بینیم CSS چگونه کار می‌کند، چه مزایایی دارد و چطور می‌توان آن را به صفحات HTML اضافه کرد.

CSS چه مشکلی را حل می‌کند؟

در گذشته، قبل از اختراع CSS، طراحی صفحات وب بسیار دشوار بود. توسعه‌دهندگان مجبور بودند از تگ‌هایی مثل <font> و ویژگی‌هایی مثل color و bgcolor داخل HTML استفاده کنند که باعث می‌شد:

CSS این مشکل را با جدا کردن ظاهر (Presentation) از ساختار (Structure) حل کرد. این جدایی «جداسازی دغدغه‌ها» (Separation of Concerns) نامیده می‌شود و یکی از مهم‌ترین اصول طراحی وب است.

مزایای استفاده از CSS

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

سه روش برای اضافه کردن CSS

سه راه برای اعمال استایل CSS روی عناصر HTML وجود دارد:

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

ساده‌ترین اما کم‌ترین توصیه‌شده روش. استایل مستقیماً در ویژگی style تگ نوشته می‌شود:

<p style="color: red; font-size: 20px;">
    این متن قرمز است
</p>

معایب: ترکیب استایل با ساختار، عدم قابلیت استفاده مجدد، سخت بودن نگهداری.

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

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

<head>
    <style>
        p {
            color: blue;
            font-size: 18px;
        }
    </style>
</head>

مزیت: مناسب برای صفحات تک‌صفحه‌ای. عیب: استایل‌ها فقط در همان صفحه کار می‌کنند.

۳. استایل External (خارجی) ⭐ توصیه می‌شود

استایل در یک فایل جداگانه با پسوند .css نوشته می‌شود و با تگ <link> به HTML متصل می‌گردد:

<!-- در فایل index.html -->
<head>
    <link rel="stylesheet" href="style.css">
</head>
/* در فایل style.css */
p {
    color: green;
    font-family: Tahoma, sans-serif;
}

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

مقایسه سه روش

روشاولویت (Cascading)قابلیت استفاده مجددتوصیه
Inlineبالاترین❌ خیر❌ فقط برای تست سریع
Internalمتوسط⚠️ فقط همان صفحه⚠️ برای صفحات خاص
Externalپایین‌ترین✅ بله✅ همیشه توصیه می‌شود

ساختار یک قانون CSS

هر قانون CSS از چند بخش تشکیل شده است:

selector {
    property: value;
}
بخشتوضیحمثال
Selector (انتخابگر)عنصر هدف را انتخاب می‌کندp, h1, .class
Property (ویژگی)چه چیزی تغییر کندcolor, font-size
Value (مقدار)مقدار جدید ویژگیred, 20px
Declaration (اعلان)یک جفت property:valuecolor: red;

کامنت‌گذاری در CSS

کامنت‌ها در CSS بین /* و */ قرار می‌گیرند و برای توضیح کد استفاده می‌شوند:

/* این یک کامنت است */
p {
    color: blue; /* رنگ متن آبی */
    /* font-size: 20px; این خط غیرفعال است */
}

کدام روش را انتخاب کنیم؟

بهترین شیوه‌ها

نکات مهم

این مبحث بخشی از دوره آموزش کامل CSS است.

ابزارهای مرتبط