کلاس ها در HTML - بی اس دیزاین

توی جلسات قبلی آموزش HTML از بی اس دیزاین دیدیم که هر المان رو میتونیم بهش ویژگی class بدیم . ولی نمیدونیم این اصلا یعنی چی !؟ تو این جلسه میخوایم یکم بیشتر وارد قضیه کلاس ها بشیم و بفهمیم که کلاس دهی چی هست و چه کاربردی داره و فرقش با id دادن چیه و …

ما وقتی به یه المان داریم کلاس میدیم در اصل داریم بهش میگیم بیا برو از توی CSS ها بگرد این کدهای خاص این کلاس رو پیدا کن و وصل کن به این المان و تگ المان ما رو این شکلی توی صفحه ظاهر کن . حالا اینکه ما میتونیم به جای اینکه بیایم توی هر تگ ویژگی style بدیم که مثلا میخوایم چهار تا المان یه شکل پس زمینه مشکی بگیره میایم بهشون کلاس میدیم و اون کلاس رو توی کدهای CSS تعریف میکنیم و تمام اون تگ ها ظاهرشون رو از اون کلاس میگیرن.

فکر کنم توی توضیحات بالا متوجه شده باشین که میتونیم یه کلاس تعریف کنیم و بیایم به پونصد هزار تا المان همون کلاس رو بدیم ! حالا یه فرقی class و id دارن با همدیگه ! هر تگ میتونه هر چقدر که میتونیم بهش کلاس بدیم . مثلا ۶ تا کلاس ! ولی به هر تگ نباید بیشتر از یک id داد. چرا که اون تگ با همون یک id شناخته میشه و در اصل هویت و اسم اون تگ رو تشکیل میده . ولی میتونیم بیایم چند تا المان رو id شون رو یکسان بذاریم ! ولی این کار فوله ! زیاد توی کدهای مشاهده نمیشه که یک برنامه نویس حرفه ای بیاد id یک تگ رو به تگ های دیگه بده . کار زشتیه بچه ها نکنین این کار رو!

توی مثال کد زیر اومدیم یکم CSS نوشتیم و بهش یه کلاس دادیم و از اون کلاس توی کدهای HTML استفاده کردیم :

				
					<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body data-rsssl=1>

<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

<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>

توی کد زیر هم اومدیم و دو تا تگ span رو یه کلاس یکسان note دادیم و توی CSS مشخص کردیم که این کلاس چه خصوصیت هایی رو بگیره و نمایش بده .

				
					<!DOCTYPE html>
<html>
<head>
<style>
.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body data-rsssl=1>

<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>

</body>
</html>

نکته خیلی خیلی مهم ! همیشه حواستون باشه که کلاس رو چجوری مینویسید ! چون بزرگ و کوچیک بودن حروف توی اسم کلاس مهم هستش ! اگر بیاید با حروف بزرگ بنویسین و توی CSS با حروف کوچیک نوشته باشین کار نمیکنه ها! نگی نگفتی.

تو مثال زیر هم اومدیم به المان چند تا کلاس متفاوت دادیم:

				
					<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

راستی یه چیزی هم فراموش نشه! فکر نکنین اگر کلاس تعریف کردین فقط میتونین توی المان های یکسان بنویسیدش ! یعنی اگر کلاس تعریف کردن و اومدین به کلاس رنگ خاصی دادین میتونین از اون کلاس توی div – h1,h2,,h3,h4,h5,h6 – p – ul – li – a و هر چی که میتونین استفاده کنین !‌

				
					<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>

یه کارایی ها خیلی خفن هم داره کلاس بندی که بعدا توی دوره جاوااسکریپت javascript کاملا بهتون توضیح میدیم که این کلاس هایی که داریم انجام استفاده میکنیم چه کمک های بزرگی بهمون میکنه که هنوز خبر نداریم .