تا الان توی جلسه قبلی آموزش HTML از بی اس دیزاین آکادمی یاد گرفتیم که کلاس بندی چطور هستش. یه اشاره کوچیکی کردیم که فرق class و id چی هست . اگر خاطرتون باشه این بود که هر تگ میتونه چندتا کلاس بگیره ولی هر تگ میتونه یه المان بگیره و تگ های دیگه هم نباید همون اسم و مقدار ویژگی id رو داشته باشن. و اگر اومدیم توی صفحه از ویژگی id با مقدار testblock استفاده کردیم برای یک تگ دیگه نباید هیچ جایی از اون مقدار برای ویژگی id در هیچ المانی استفاده کنیم . بعدا همه چی قروقاطی میشه ها! نگید نگفتید ! (توی دوره های جاوا اسکریپت وقتی میخوایم بیایم مثلا یه المان رو صدا بزنیم روش های زیادی وجود داره ولی یکیش بر اساس اسمی هستش که الان داریم میدیم به تگ. اون موقع مثل این میمونه که صدا میزنیم بلند ممد و هزار تا ممد میگن بله! نمیدونی کی به کیه کدوم ممد رو کار داری! )
توی CSS هم میتونیم بیایم به این مقادیری که داریم برای id تنظیم میکنیم خصوصیت بدیم بگیم چه شکلی ظاهر بشه توی وب سایت و این id که میدیم میره از توی CSS اون خصوصیت ها رو ور میداره میاره میذاره روی تگ HTML که نوشتیم . مثال زیر رو ببینین :
<!DOCTYPE html>
<html>
<head>
<style>
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
</style>
</head>
<body data-rsssl=1>
<h1 id="myHeader">My Header</h1>
<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>
این نکته هم برای id رعایت کنین که حتما هر حروفی مینویسین همون رو باید توی CSS استفاده کنین و بزرگ و کوچیک بودن حروف تاثیر داره !
نکته بعدی هم این هستش که حتما باید یه حرف بذارین برای مقدار id و این مقدار نمیتونه با عدد شروع بشه و حتما باید با حرف شروع بشه .و هیچ فاصله ای نباید باشه توی نوشتن مقدار id ! وگرنه همه چی بهم میریزه !
مثال زیر رو ببینین یکم کدنویسی رو ببریم جلوتر :
<style>
/* Style the element with the id "myHeader" */
#myHeader {
background-color: lightblue;
color: black;
padding: 40px;
text-align: center;
}
/* Style all elements with the class name "city" */
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
<!-- An element with a unique id -->
<h1 id="myHeader">My Cities</h1>
<!-- Multiple elements with same class -->
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
یه اشاره کوچیکی هم توی دوره لینک دهی با تگ a داشتیم که میومدیم بوک مارک میکردیم لینک رو و گفتیم لینک مقدار id رو به تگ a میدیم و میاد میره روی این تگ که بهش گفتیم ! اینجا هم یبار دیگه مرور میکنیم . میتونیم از این مقدار id استفاده کنیم که یجایی لینک بدیم و اون لینک رو کلیک کردن بیاد روی این مقدار id که به تگ دادیم. مثلا یه تگ داریم مثال زیر هست :
<h2 id="C4">Chapter 4</h2>
و یه جای دیگه ای از کدها ما اومدیم یه لینک دادیم به این تگ این شکلی و وقتی روی اون لینک کلیک کنن میان روی این تگ :
<a href="#C4">Jump to Chapter 4</a>
اگر هم لینکمون توی یه صفحه دیگه بود خاطرتون هست که چطوری لینک میدادیم !؟
<a href="html_demo.html#C4">Jump to Chapter 4</a>
