در جلسه های قبلی گفتیم که میتونیم توی HTML استایل بدیم به تمام المان ها. ویژگی style برای این منظور یاد گرفتیم . حالا اینجا میخوایم یکم بیشتر توضیح بدیم که چطوری میتونیم انواع استایل ها رو توی کدهای HTML استفاده کنیم.
CSS چیست ؟
مبحث کدنویسی CSS رو توی دوره CSS بطور کامل توضیح میدیم بهتون . در کل اگر بخوایم برای وب سایت یه ساحتمون فرض کنیم وجود داشته باشه HTML فقط میاد ستون رو تشکیل میده ولی دیوار ها و ارتفاع اون ها و چیدمان دیوار ها و نقشه و چیدمان وسایل داخل اون ساختمون رو دوش CSS هستش و خیلی بکار میاد.
CSS کوتاه شده Cascading Style Sheets هست که کلا باهاش میتونیم تمامی رنگ ها – فونت ها – سایز نوشته – سایز المان ها – طریقه قرارگیری اون ها در جایگاه های مختلف – فاصله بین المان ها – انواع بک گراند ها و خیلی از موارد دیگه رو انجام بدیم . حتی این که توی موبایل وب سایت ما باید به یک شکل نشون داده بشه و توی لپ تاپ یا دسکتاپ ها به یه شکل دیگه که بهش میگن رسپانسیو ! با CSS انجام میشه .
انواع استفاده از CSS در HTML
بطور کلی سه روش برای استفده از کدهای CSS داخل HTML وجود داره. یکی رو تا الان یاد گرفتیم و اون استفاده از ویژگی style بود . به این روش میگن inline یعنی تو همون خط میایم CSS میزنیم . ولی دو تا روش دیگه وجود داره و عموما از روش inline زیاد استفاده نمیکنم چون معایب بزرگی داره و برای بهینه سازی وب سایت در موتورهای جستجو هم اذیت کننده است . اون دو تا روش دیگه یکی داخل خود برگه نوشته میشه . کجای برگه !؟ در داخل تگ head تگ style رو باز و بسته میکنیم و داخلش کدهای CSS رو مینویسیم و یکی دیگه هم میایم یه فایل جداگانه میسازیم که تو اون فایل تمامی کدهای CSS رو درج میکنیم و توی تگ head برای HTML لینک به اون برگه رو میدیم . به روش دوم میگیم داخلی و روش سوم که لینک میدیم هم میگیم خارجی .
استفاده از روش خارجی که میایم لینک میدیم به فایل خیلی مرسومه. چرا ؟! چون که روش اول inline که تا الان یاد گرفتیم واسه هر خط کد باید بیایم CSS جداگانه بزنیم . ولی خیلی زمان بره و عملا بلااستفاده هستش. بطور مثال ما تو طراحی وب سایت یا برنامه نویسی وب سایت مون اومدیم از المان های زیادی استفاده کردیم توی HTML و کلی هدینگ با تگh1 داریم. نمیتونیم بیایم تک تک همه خط کدهای h1 رو پیدا کنیم و بهشون inline CSS اختصاص بدیم . حجم صفحه هم خیلی میره بالا و کار بیهوده ای هستش .
اگر توی مثال بالا بخوایم به تمام هدینگ های h1 خصوصیت های مشخصی بدیم از روش دوم CSS نویسی توی HTML میایم توی تگ head یه تگ style باز میکنیم و مینویسیم h1 و به اون مثلا خصوصیت رنگ رو میدیم. حالا چه اتفاقی میوفته !؟ تمامی تگ های h1 استفاده شده توی اون صفحه رنگ که زدیم رو میگیرن.
روش سوم چیه !؟ فرض کنید اون روش دوم که بالا توضیح دادیم هم استفاده کردیم . ولی ما یه برگه دیگه داریم که دقیقا عمون کد باید برای h1 ها استفاده بشه . دیگه نمیتونیم از اون کدهایی که توی اون یکی صفحه زدیم استفاده کنیم . باید دوباره اون کد های رو داخل اون صفحه جدید هم بیاریم کپی کنیم . واسه همین میایم یه فایل جداگانه میسازیم و کد تغییر رنگ h1 رو میذاریم توی اون فایل CSS و اون فایل رو فقط لینک دهی میکنیم توی HTML و تمامی صفحات ما از اون فایل CSS خصوصیت ها رو دریافت میکنن.
روش inline
توی قسمت بالا ذکر کردیم که چی هست و چه معایبی داره این روش . حالا طریقه استفاده روش line CSS رو یبار مرور میکنیم و با مثال توضیح میدیم :
<h1 style="color:blue;">A Blue Heading</h1>
<p style="color:red;">A red paragraph.</p>
روش internal یا روش داخلی CSS
این روش هم کافیه مثل خط کدهای زیر بیایم برای تمامی المان های مورد نظرمون ازش استفاده کنیم . خاطرتون باشه که این تگ style رو توی head بذارید . البته میتونید هم داخل body استفاده کنین ولی رایج هست که در داخل head قرار بگیره .
<!DOCTYPE html>
<html>
<head>
<style>
body {background-color: powderblue;}
h1 {color: blue;}
p {color: red;}
</style>
</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>
توی مثال بالا ما اگه بیایم صد تا المان h1 و p هم بنویسیم همه المان های h1 رنگ آبی میگیرن و همه المان های p هم رنگ قرمز .
روش external یا روش خارجی CSS
توی مثال زیر هم اومدیم بک فایل درست کردیم و لینک دادیم تا اون فایل توی صفحه ما لود بشه و از مقادیر CSS توی این صفحه استفاده بشه .
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="styles.css">
</head>
<body data-rsssl=1>
<h1>This is a heading</h1>
<p>This is a paragraph.</p>
</body>
</html>
یک خوبی دیگه هم داره روش خارجی یا همون روش external CSS این هست که مرورگر ها یک قابلیتی دارن که میان فایل های CSS و JS رو تو خودشون ذخیره میکنن که لود وب سایت سری بعدی بره بالاتر. ولی اگه از روش inline و روش internal استفاده کنین این قابلیت رو ندارین و هر سری که صفحه لود میشه تمامی کدهای CSS باید حتما لود بشه و زمان لود وب سایت رو میبره بالاتر و واسه همین به اصطلاح میگن وب سایت برای موتورهای جستجو بهینه نیست .
حالا تو اون فایل styles.css که توی مثال بالا آوردیم چه خبره!؟ هیچی فقط و فقط کدهای CSS هست و نیومدیم توش تگ style رو بیاریم .
body {
background-color: powderblue;
}
h1 {
color: blue;
}
p {
color: red;
}
یه مزیت خیلی خوب دیگه هم داره استفاده از external که مهم ترین مزیت هستش! فرض کنید اومدیم و از روش inline و internal استفاده کردیم و حالا میخوایم پروژه رو تغییرات بزنیم! به معنای واقعی کلمه دهنمون صاف میشه تا همه صفحات رو بیایم تغییرات بدیم! ولی توی روش external فقط کافیه تا اون فایل رو ویرایش کنیم تا روی همه صفحات اعمال بشه !
