نحوه اضافه کردن فایل CSS به قالب
وقتی که فایل html که نوشته شده در مرورگر اجرا می شه ، به همراهش با شناسایی آدرس فایل css اون هم اجرا می شه و درنتیجه با ترکیب هم قالب زیبایی را از html / css برای کاربر نمایش داده می شه.
برای وارد کرد فایل css سه راه وجود داره.
- استایل خارجی (External style sheet)
- استایل داخلی (Internal style sheet)
- استایل میان خطی (Inline style)
استایل خارجی (External style sheet)
با این روش که روش معمول طراحان ظاهری وب سایت هست ، کافی است که شما در یک فایل خارجی کدهای css خودون رو بنویسید و بعد با آدرس دادن فایل css به صفحه html براحتی اجرا بشه و می تونید با تغییر کدهای دلخواه در html هم اجرا بشه. مزی این روش سبک کردن قالب سایت می باشد .
فایل index.html
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
فایل .style.css
با استفاده از کد های css نوع رنگ و شکل عناصر و تگ های html رو به دلخواه تغییر می دیم.
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
استایل داخلی (Internal style sheet)
در این روش باید در head اhtml کده ها را نوشت ، که نسبت به روش قبلی سرعت بارگذاری قالب رو افزایش می ده .
<head>
<style>
body {
background-color: linen;
}
h1 {
color: maroon;
margin-left: 40px;
}
</style>
</head>
استایل میان خطی (Inline style)
در این روش برای استایل دهی به یک عنصر خاص می توانید استفاده کنید .
مثلا: برای تگ <h1> رنگ آبی، فاصله از چپ 30 px انتخاب شده.
<h1 style="color:blue;margin-left:30px;">This is a heading.</h1>