CSS را می‌توان به سه روش اصلی در یک صفحه وب اعمال کرد: درون‌خطی (Inline)، داخلی (Internal) یا خارجی (External).
هر یک از این روش‌ها موارد استفاده، مزایا و محدودیت‌های خاص خود را دارند. دانستن اینکه چه زمانی از هر کدام استفاده کنید برای نوشتن کدی تمیز، کارآمد و قابل نگهداری (Maintainable) ضروری است.
بیایید انواع سه گانه CSS و زمان استفاده از آن‌ها را بررسی کنیم.
CSS درون‌خطی (Inline CSS)
CSS درون‌خطی مستقیماً در داخل یک عنصر HTML با استفاده از ویژگی style نوشته می‌شود. این روش استایل‌ها را فقط به همان عنصر خاص اعمال می‌کند.
در اینجا مثالی از CSS درون‌خطی آورده شده است:
<p style="color: green;">This is an inline-styled paragraph.</p>در این مثال، ما از ویژگی style استفاده می‌کنیم تا رنگ متن پاراگراف را سبز کنیم.
از CSS درون‌خطی معمولاً برای استایل‌های سریع و یک‌باره یا برای بازنویسی (Override) سایر استایل‌ها در یک عنصر خاص استفاده می‌شود.
با این حال، در بیشتر موارد باید از آن اجتناب کرد، زیرا می‌تواند باعث شلوغی HTML شود و نگهداری کد را دشوارتر کند. در اکثر مواقع، بهتر است از CSS داخلی یا خارجی استفاده کنید تا استایل‌های خود را سازمان‌یافته و قابل مدیریت نگه دارید.
CSS داخلی (Internal CSS)
CSS داخلی در داخل تگ‌های <style> در بخش <head> یک سند HTML نوشته می‌شود. این روش استایل‌ها را به کل آن صفحه اعمال می‌کند و زمانی مفید است که بخواهید به یک سند واحد استایل بدهید.
در اینجا مثالی از CSS داخلی آورده شده است:
<head>
<style>
p {
color: blue;
}
</style>
</head>
<body>
<p>This paragraph is styled using internal CSS.</p>
</body>در مثال بالا، CSS داخلی باعث می‌شود متن تمام عناصر p در صفحه به رنگ آبی درآید.
بهترین زمان استفاده از CSS داخلی زمانی است که می‌خواهید استایل‌ها را فقط به یک صفحه خاص اعمال کنید، نه در چندین صفحه مختلف. این روش برای وب‌سایت‌های تک‌صفحه‌ای یا زمانی که استایل‌ها نیازی به استفاده مجدد در جای دیگر ندارند، مفید است.
با این حال، معایبی نیز دارد، مانند عدم ترویج قابلیت استفاده مجدد در صفحات مختلف. علاوه بر این، مانند CSS درون‌خطی، این روش هم HTML و CSS را با هم ترکیب می‌کند که نگهداری کد را در پروژه‌های بزرگتر سخت‌تر می‌کند.
CSS خارجی (External CSS)
CSS خارجی در یک فایل جداگانه با پسوند .css نوشته می‌شود و با استفاده از عنصر <link> در بخش <head> به سند HTML متصل می‌شود.
این روش به شما اجازه می‌دهد تا چندین صفحه را به صورت یکپارچه استایل‌دهی کنید و روش ترجیحی در توسعه وب حرفه‌ای است.
در اینجا مثالی از استایل‌دهی به تمام عناصر پاراگراف آورده شده است:
فایل styles.css:
p {
color: red;
}فایل index.html:
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<p>This paragraph is styled using external CSS.</p>
</body>در درس‌های قبلی آموختید که عنصر link دارای ویژگی rel است که رابطه بین سند فعلی و منبع پیوند داده شده را مشخص می‌کند (مانند پیوند به یک استایل‌شیت یا منبع خارجی).
از سوی دیگر، ویژگی href آدرس (URL) منبع پیوند داده شده را مشخص می‌کند و نشان می‌دهد که آن منبع باید از کجا فراخوانی شود.
CSS خارجی برای پروژه‌های بزرگ که می‌خواهید استایل ثابتی را در چندین صفحه حفظ کنید، ایده‌آل است. این روش با سپردن ساختار به HTML و استایل‌دهی به CSS، باعث «جداسازی دغدغه‌ها» (Separation of Concerns) می‌شود که کد را قابل‌نگهداری‌تر و مقیاس‌پذیرتر می‌کند.
درک زمان استفاده از هر نوع CSS برای توسعه وبِ کارآمد و موثر بسیار مهم است. در بیشتر موارد، CSS خارجی باید رویکرد اصلی شما باشد، به‌ویژه برای پروژه‌های بزرگتر و پیچیده‌تر.
سوالات
۱. چه زمانی استفاده از CSS درون‌خطی (Inline) مناسب‌تر است؟
- برای استایل‌دهی به تمام پاراگراف‌های یک سند.
- برای بازنویسی سریع استایل‌ها در یک عنصر واحد.
- برای استایل‌دهی به یک وب‌سایت کامل.
- برای جداسازی دغدغه‌ها در پروژه‌های بزرگ.
۲. کدام نوع CSS برای اعمال استایل‌ها فقط به یک صفحه وب مناسب‌تر است؟
- Inline CSS.
- External CSS.
- Internal CSS.
- Universal CSS.
۳. چرا CSS خارجی در پروژه‌های بزرگتر ترجیح داده می‌شود؟
- اجازه تغییرات سریع و یک‌باره در استایل را می‌دهد.
- استایل‌ها را فقط به یک عنصر خاص اعمال می‌کند.
- باعث ترویج جداسازی دغدغه‌ها و قابلیت استفاده مجدد در چندین صفحه می‌شود.
- HTML را پیچیده‌تر می‌کند.