وقتی یک مرورگر یک فایل CSS، یا اطلاعات بین تگ <style> را می خواند، صفحه اچ تی ام ال را طبق اطلاعات داده شده در آن ها قالب بندی می کند.
سه راه برای اضافه کردن CSS به صفحه HTML
سه راه کلی برای وارد کردن برگه ی سبک وجود دارد:
- استفاده از فایل خارجی
- استفاده از تگ <style>
- استایل دادن به المان به صورت inline
استفاده از فایل CSS خارجی
با یک برگه استایل خارجی شما می توانید با فقط تغییر یک فایل کل ظاهر یک سایت را تغییر دهید!
یک صفحه وب می تواند شامل یک یا چند ارجاع به فایل CSS با استفاده از المان <link> باشد.
در مثال زیر المان <link> داخل بخش <head> است، گرچه هر جایی می تواند باشد، نه فقط head
یک فایل css خارجی را می توان در هر ویرایشگر متن نوشت. این فایل نباید حاوی هیچگونه تگ اچ تی ام ال باشد. فایل استایل باید با پسوند .css ذخیره شود.
در این مثال می توانید نحوه وارد کردن فایلی به نام mystyle.css به یک صفحه HTML را ببینید:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
محتویات فایل mystyle.css می تواند چیزی شبیه زیر باشد:
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
نکته: در بین مقدار مولفه و واحد آن فاصله قرار ندهید. یعنی بنویسید
20pxو نه20 px
ما پیشنهاد می کنیم تا حد ممکن از فایل css خارجی استفاده کنید زیرا کد های شما کاملا تفکیک می شوند و همچنین فایل های css توسط مرورگر “کش” می شود تا در بارگزاری های آینده سریع تر لود شود.
استایل دادن به المان ها با تگ <style>
در مثال زیر، استایل داخلی در المان <style> واقع در بخش <head> از یک صفحه اچ تی ام ال تعریف می شود:
<!DOCTYPE html>
<html>
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
استایل دادن به المان ها به صورت inline
یک استایل inline را می توان برای اعمال کردن یک سبک منحصر به فرد که فقط بر روی یک المان اعمال می شود استفاده کرد.
برای استفاده از استایل دهی به صورت اینلاین، خاصیت style را به المان مرتبط اضافه کنید. خاصیت style میتواند حاوی هرگونه مولفه سی اس اس باشد.
مثال زیر نشان می دهد که چگونه رنگ و حاشیه بندی المان <h1> را تغییر دهید:
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">این یک پاراگراف است</h1>
<p style="color:red;">این یک پاراگراف دیگر است.</p>
</body>
</html>
نکته : با استفاده از استایل دادن به صورت inline، شما بسیاری از منافع یک سی اس اس خارجی را از دست می دهید. بهتر است این روش را کمتر استفاده کنید.
استفاده از چندین فایل CSS
اگر تعدادی مولفه برای یک انتخاب گر در مکان های مختلف تعریف شده باشد، مقدار آخرین استایل خوانده شده اعمال خواهد شد.
فرض کنید که یک فایل سی اس اس خارجی، استایل زیر را برای المان <h1> درخواست کرده است:
h1 {
color: navy;
}
سپس فرض کنید که یک استایل داخلی با تک استایل، سبک زیر را برای المان <h1> درخواست کرده است:
h1 {
color: orange;
}
اگر استایل درون تگ <style>، بعد از لینک به فایل css خارجی تعریف شده باشد، مقدار orange اعمال خواهد شد.
یعنی اگر کد HTML صفحه، شبیه زیر باشد، مقدار orange اعمال می شود:
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
<style>
h1 {
color: orange;
}
</style>
</head>
همچنین اگر استایل داخلی، قبل از لینک به فایل css خارجی تعریف شده باشد، مقدار navy اعمال خواهد شد.
یعنی اگر کد HTML صفحه، شبیه زیر باشد، مقدار navy اعمال می شود:
<head>
<style>
h1 {
color: orange;
}
</style>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
اولویت بندی دستورات CSS
وقتی که برای یک المان HTML چندین دستور CSS وجود دارد، کدام یک اولویت بیشتری برای اجرا دارد؟
به ترتیب شماره، اولویت بیشتر برابر است با:
- استایل اینلاین نوشته شده داخل یک المان اچ تی ام ال
- استایل های داخلی و خارجی در بخش head
- حالت پیشفرض مرورگر برای چاپ هر المان
پس یک استایل که به صورت inline نوشته شده، بیشترین اولویت را دارد و استایل داخلی، خارجی و پیشفرض مرورگر را باطل می کند.
