فصل ۱۲ | رسانه و پیوندها

سه روش اتصال CSS به HTML

CSS مسئول ظاهر و چیدمان صفحه است، در حالی که HTML فقط ساختار و محتوا را مشخص می‌کند. برای افزودن استایل به یک سند HTML، سه روش رایج وجود دارد.

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

همان‌طور که در فصل استایل درون‌خطی دیدیم، با ویژگی style می‌توان مستقیم روی یک عنصر، CSS نوشت.

inline.html
<h1 style="color:blue;">تیتر آبی</h1>

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

با استفاده از عنصر <style> در بخش <head>، می‌توان استایل‌های چند عنصر را در یک‌جا و برای کل صفحه تعریف کرد.

internal.html
<head>
    <style>
        body {
            background-color: linen;
        }
        h1 {
            color: maroon;
            margin-inline-start: 40px;
        }
    </style>
</head>

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

حرفه‌ای‌ترین و رایج‌ترین روش، نوشتن استایل‌ها در یک فایل جداگانه با پسوند .css و اتصال آن با عنصر <link> است. این روش باعث می‌شود بتوانید یک فایل استایل واحد را برای چندین صفحه‌ی HTML استفاده کنید.

index.html
<head>
    <link rel="stylesheet" href="styles.css">
</head>
styles.css
body {
    background-color: linen;
}
h1 {
    color: maroon;
    margin-inline-start: 40px;
}
نکته: اگر هر سه روش هم‌زمان روی یک عنصر اعمال شوند، استایل درون‌خطی بالاترین اولویت را دارد و روی بقیه غالب می‌شود.