بی‌اس.آکادمی
Bs.Academy

فهرست مطلب

سفارش آنلاین پروژه
آنلاین پروژه ات رو سفارش بده !
چگونه CSS رو در HTML بکار ببریم ؟

در جلسات قبلی آموزش 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 برای مرورگر بیشترین اولویت رو برای لود دارند و کدهای خود مرورگر که پیش فرض هستن هم آخرین اولویت !