در جلسات قبلی آموزش CSS از بی اس دیزاین آکادمی دیدیم که چطوری میتونیم سینتکس CSS بنویسیم و یه مباحث اولیه رو یاد گرفتیم. حالا میخوایم ببینیم چجوری میشه این فایل ها و کدهای CSS رو داخل HTML بیاریم .
قبل تر در دوره آموزش HTML اندکی درباره روش های مختلف افزودن CSS به کدهای HTML توضیح دادیم. الان میخوایم بصورت حرفه ای تر این کار رو یاد بگیریم . سه روش وجود داشت برای اینکه به مرورگر اعلام کنیم ما این کدهای CSS رو لازم داریم . روش inline – internal و external. که توضیح دادیم هر روش چه معایب و مزایایی داره . روش external بهترین گزینه هست . چرا که یکبار توسط مرورگر کش میشه و از اون کش برای بقیه سایت استفاده میشه ولی روش های دیگه هر بار که صفحه لود میشه باید اجرا بشن و سرت لود سایت رو میاره پایین و حجم صفحه ها هم میره بالا. مورد بعدی هم این هستش که از فایل external میتونیم در چندین صفحه مختلف با یک تگ link استفاده کنیم .
در زیر چند تا مثال میزنیم که یادآوری بشه این سه روش:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="mystyle.css">
</head>
<body>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
فایل لینک شده هم داخلش میتونه این کدهای زیر قرار داشته باشه :
body {
background-color: lightblue;
}
h1 {
color: navy;
margin-left: 20px;
}
نکته ای که وجود داره و اغلب تازه کاران ممکنه این اشتباه رو انجام بدن این هست که بین مقدارهای خصوصیت و واحدشون فاصله ندین ! یعنی تو مثال بالا عدد ۲۰ رو به px باید بچسبونین و نباید فاصله ای بینشون وجود داشته باشه وگرنه کدتون اشتباه میشه .
<!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>
مثال بالا هم روش داخلی یا همون internal هستش که داخل تگ head کدها رو قرار میدیم.
<!DOCTYPE html>
<html>
<body>
<h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p>
</body>
</html>
مثال بالا هم روش inline هست که داخل خط خود تگ html کدمون رو مینویسیم که داغون ترین روش به حساب میاد !
روش ترکیبی و اولویت انتخاب
حالا یه سوال پیش میاد که آیا میشه برای یک المان از هر سه روش برای کدنویسی CSS استفاده کرد !؟ جواب بله هست ! حالا سوال بعدی که بوجود میاد این هست که از کجا میفهمه کدوم رو استفاده کنه !؟ جواب میشه آخرین کدی که اجرا میشه رو مرورگر لود میکنه و کدهای قبلی رو براش پاک میکنه ! یعنی ما اگه بیایم از روش خارجی استفاده کنیم و چند خط پایین تر داریم کدهای داخلی تعریف میکنیم دیگه فایل خارجی رو کاری باهاش نداره و کدهای داخلی رو جایگزین اون ها میکنه . حالا وقتی میایم از روش inline استفاده میکنیم دیگه با کدهای داخلی هم کاری نداره و به خود کدهای inline توجه میکنه و اون ها رو لود میکنه .
اولویت های اصلی کدومه !؟
اگه بخوایم به ترتیب بگیم که اهمیت کدوم برای لود شدن توی مرورگر بیشتره میشه این ترتیب :
۱- کدهای inline
۲- کدهای داخلی و خارجی
۳- کدهای پیش فرض مرورگر
پس با این حساب کدهای inline برای مرورگر بیشترین اولویت رو برای لود دارند و کدهای خود مرورگر که پیش فرض هستن هم آخرین اولویت !
