یکی از کاربردهای رایج المان <link> در HTML، اعمال استایل‌شیت‌های خارجی روی المان های سند (از طریق ارجاع به فایل استایل‌شیت) می‌باشد. استایل‌شیت‌های خارجی (اکسترنال یا External) امکان نگه‌داری اطلاعات مربوط به استایل را در قالب یک فایل مجزا فراهم می‌کنند. استایل‌شیت‌های خارجی CSS در فایل‌هایی با پسوند .css ذخیره میشوند و با کمک المان‌های <link> در سند HTML به آن‌ها ارجاع داده می‌شود.
مزایای استایل‌شیت‌های خارجی CSS
با استفاده از استایل‌شیت‌های خارجی می‌توانید محتویات یک استایل شیت را روی چند سند یا صفحه HTML اعمال کنید. علاوه بر این، استایل‌شیت‌های خارجی ضمن جداسازی فایل استایل از محتوای سند، نگه داری و ویرایش استایل ها را به سادگی امکان‌پذیر می‌کنند چرا که در این حالت لازم است تغییرات موردنیاز تنها روی فایل یا فایل‌های CSS مربوطه انجام گیرد. به این ترتیب بدون نیاز به دستکاری صفحات HTML، تغییرات استایل روی تمام یا مجموعه‌ای از صفحات یک سایت اعمال می‌شود.
با توجه به موارد فوق، این شیوه متداول‌ترین و مناسب‌ترین روش برای افزودن CSS به HTML محسوب می‌شود.
نحوه اضافه کردن استایل شیت خارجی به سند HTML با کمک المان <link>
برای افزودن استایل‌شیت خارجی به یک سند HTML لازم است یک المان <link> را مشابه با نمونه زیر داخل بخش <head> سند قرار دهید. این المان فاقد محتوای داخلی است و خصوصیت href در آن به فایل استایل شیت خارجی موردنظر اشاره می‌کند.
<link href="style.css" rel="stylesheet">
نام خصوصیت rel از ابتدای واژه relationship به معنای ارتباط گرفته شده و مقدار آن در المان <link> مشخص می‌کند آیتمی که به آن ارجاع داده شده است چه ارتباطی با سند فعلی دارد. همانطور که در مثال فوق مشاهده می‌کنید برای ارجاع به استایل‌شیت‌های خارجی می‌بایست مقدار این خصوصیت به صورت stylesheet درج شود.
مثال زیر نمونه‌ای از یک سند HTML ساده را نمایش می‌دهد که در آن از المان <link> برای ارجاع به یک استایل‌شیت خارجی با نام style.css استفاده شده است.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>آموزش سی‌اس‌اس</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<h1>یک هدینگ نمونه</h1>
<p>این یک پاراگراف نمونه است.</p>
</body>
</html>محتویات استایل‌شیت (در اینجا فایل style.css) می‌تواند چیزی مشابه با نمونه زیر باشد. فراموش نکنید در این مثال، فایل style.css داخل همان دایرکتوری قرار می‌گیرد که سند HTML فوق در آن قرار دارد (بیشتر بخوانید: مسیر فایل ها در HTML).
body {
background-color: yellow;
}
h1 {
color: blue;
margin: 5px;
}
p {
font-size: 20px;
}همانطور که در این مثال مشاهده می‌کنید در استایل‌شیت های خارجی، صرفا قوانین CSS (بدون تگ <style>) درج میشوند. این درحالیست که استایل‌های داخلی (اینترنال یا Internal) مابین تگ‌های <style> و </style> در بخش <head> سند HTML قرار می‌گیرند. استایل های درخط (اینلاین یا Inline) نیز به عنوان مقدار خصوصیت style در تگ شروع المان‌ها درج میشوند.
بیشتر بخوانید: آشنایی با روش های اضافه کردن CSS به HTML – استایل‌شیت‌های خارجی و داخلی و استایل های درخط
بیشتر بخوانید: فهرست مطالب مجموعه آموزشی CSS
بازگشت به فهرست مجموعه آموزشی HTML
