مرورگر HTML را بر اساس اطلاعات موجود در استایل شیت شکل میدهد. سه راه برای وارد کردن سی اس اس داخل سند HTML وجود دارد.
- استایل شیت خارجی
- استایل شیت داخلی
- استایل خطی
استایل شیت خارجی
در این روش، میتوانید تنها با تغییر در یک فایل ظاهر کل سایت را تغییر دهید!
در هر صفحه آدرس فایل استایل شیت باید داده شده باشد. آدرس فایل استایل شیت باید داخل المان link داخل بخش head باشد.
مثال
<head> <link rel="stylesheet" type="text/css" href="style.css"> </head>
نکاتی که باید در ذهن داشته باشید
I.استایل شیت خارجی را میتوان در هر ادیتوری نوشت
II.هرگز داخل فایل های استایل شیت تگ های HTML ننویسید
III. فایل های استایل شیت باید با فورمت .css نوشته شود.
استایل شیت داخلی
اگر یک صفحه استایل خاص داشته باشد از استایل شیت داخلی استفاده کنید، زیرا در این شیوه شما استایل ها را داخل بخش head همان صفحه مینویسید.
نحوه نگارش سی اس اس داخلی به این صورت است که شما المان style را داخل بخش head مینویسید.
مثال
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
استایل خطی
استایل اینلاین زمانی استفاده میشود که شما بخواهید به یک المان استایل خاص بدهید.
برای استفاده از استایل اینلاین اتریبیوت style را به المانی که میخواهید به آن استایل بدهید اضافه کنید. اتریبیوت استایل میتواند همه پراپرتی های CSS را بگیرد.
مثال
<h1 style="color:blue; margin-left: 30px;">This is a heading</h1>
استفاده همزمان از چند استایل شیت
اگر شما چند پراپرتی برای یک سلکتور در یک استایل شیت تعریف کرده باشید، ولیوهای آخرین استایل شیت اعمال خواهد شد.
برای مثال اگر شما برای المان h1 در یک بار رنگ سبز و یک بار رنگ آبی را تعریف کرده باشید، رنگ h1 آبی خواهد بود.
حال اگر شما در همان صفحه و پس از استایل شیت خارجی، استایل داخلی تعریف کرده باشید و برای h1 رنگ نارنجی داده باشید، المان های h1 در آن صفحه نارنجی خواهد بود.
با این حال اگر شما برای یکی از h1 های صفحه استایل خطی تعریف کرده باشید و به آن رنگ قرمز بدهید آن المان قرمز خواهد بود.
مثال
فایل سی اس اس شما شامل این پراپرتی ها می باشد:
h1 { color: green; } p { margin: 0; } h1 { color: blue; }
فایل اچ تی ام ال شما نیز شامل این کدها می باشد:
<!DOCTYPE html> <html> <head> <title>Multiple Style Sheets</title> <link rel="stylesheet" type="text/css" href="style.css" /> <style> h1 { color: orange; } </style> </head> <body> <h1>This is orange!</h1> <p>This paragraph has no margin!</p> <h1 style="color: red;">This is red!</p> </body> </html>
چیدمان آبشاری
آبشاری بودن استایل شیت یعنی تمام استایل های موجود در یک صفحه به شکل آبشار داخل یک استایل شیت "مجازی" ریخته میشود که قوانین آن به شرح زیر است:
- استایل خطی
- استایل شیت های داخلی و خارجی (که در بخش
headنوشته شده است - پیش فرض مرورگر
که شماره یک بیشترین و شماره سه کمترین اولویت را دارد.
البته شما در بخش استفاده همزمان از چند استایل شیت تا حدودی با این مفهوم آشنا شدید.
زمانی که میگوییم استایل خطی بیشترین اولویت را دارد بدین معناست که استایل های داخلی تعریف شده در تگ head، یا استایل شیت های خارجی، یا پیش فرض مرورگر را باطل (override) میکند.