چگونه 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 data-rsssl=1>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode-wpr",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></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 data-rsssl=1>

<h1>This is a heading</h1>
<p>This is a paragraph.</p>

</body>
</html>

مثال بالا هم روش داخلی یا همون internal هستش که داخل تگ head کدها رو قرار میدیم.

				
					<!DOCTYPE html>
<html>
<body data-rsssl=1>

<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 توجه میکنه و اون ها رو لود میکنه .