تفاوت id و class در HTML + ویدیو آموزشی
تفاوت id و class در HTML چیست؟ کلاس و آیدی سلکتورهایی هستند که برای کنترل المانها در css به کار می روند. درست است که هر دو کار مشابهی را انجام می دهند ولی شیوه استفاده آنها و موقعیتی که استفاده می شوند متفاوت است. در این نوشته تفاوت id و class در HTML را به صورت کامل بیان می کنیم و شما زمان استفاده از هر کدام را به صورت کامل خواهی آموخت.
⭐ (پیشنهاد می کنم برای یادگیری بهتر، ابتدا ویدیو بالا که قسمتی از دوره رایگان آموزش HTML CSS به زبان ساده است را ببینید سپس ادامه متن را مطالعه نمایید.)⭐
آموزش id و class در HTML
زمانی که می خواهید یک سایت ایجاد کنید نیاز است تا تمام صفحات آن یکپارچه و منظم باشند. اگر توسعه دهندگان مجبور باشند تک به تک عناصر در صفحات مختلف را تنظیم کنند کاری بسیار طاقت فرسا و تقریبا غیرممکن است. بنابراین از انتخابگرهایی مانند id و class استفاده می کنند و در css این موارد را کنترل کنند. حالا آی دی و کلاس چه تفاوت هایی با هم می کنند و باید از کدام استفاده کنیم؟
- id برای توصیف موارد منحصر به فرد به کار می رود و هر آیدی فقط یکبار در کدها قابل استفاده است.
- class می تواند برای عناصر متعدد و در چندین جا به کار رود.
- در صورتی که هر دوی آنها کاربرد مشابهی دارند ولی استفاده درست از آنها می تواند باعث بهینه شدن و استاندارد شدن کدها شود.
اتریبیوت id چیست؟
اتریبیوت id به شما امکان شناسایی یک عنصر در html را می دهد تا بتوانید یک سبک منحصر به فرد برای آن به وجود بیاورید. آی دی ها منحصر به فرد و هدفمند هستند مانند یک اسم خاص. در یک صفحه ممکن است عناصر گوناگونی وجود داشته باشند ولی id فقط یکبار قابل استفاده است و یک عنصر خاص را مشخص می کند. هر عنصر فقط می تواند یک آی دی داشته باشد و در هر صفحه فقط یکبار از آن شناسه می توان استفاده کرد. برای استایل دهی به id در css از کاراکتر # استفاده می شود.
class چیست؟
کلاس منحصر به فرد نیست و در یک صفحه می تواند چندین بار از آن استفاده کرد. همانطور که گفته شد هر عنصر مجاز به داشتن فقط یک id است ولی می تواند چندین کلاس متفاوت داشته باشد. در css برای استایل دهی به class، قبل از نام کلاس یک نقطه قرار می دهیم.
کلاس و آی دی در css
تنها تفاوتی که آی دی و کلاس در css دارند، کاراکتری است که قبل از نام آنها به کار می رود:
- قبل از نام id در css از کاراکتر # استفاده می شود.
- قبل از نام class در css از کاراکتر نقطه استفاده می شود.
اگر بخواهیم در مثال بالا استایل ها را در فایل css اعمال کنیم به صورت زیر عمل می کنیم (به کاراکترهایی که قبل از نام id و class استفاده کرده ایم دقت کنید):
خروجی کار به صورت زیر خواهد بود:
تفاوت id و class در HTML
در ابتدا ممکن است نتوانید به خوبی زمان استفاده از id و class را به خوبی تشخیص دهید زیرا کار مشابهی انجام می دهند. ممکن است مدتی زمان ببرد تا زمان استفاده از هر کدام را تشخیص دهید. در ادامه سعی می کنیم با یک مثال تفاوت این دو را بهتر بیان کنیم.
اگر به یک فروشگاه موبایل مراجعه کنید خواهی دید که هر گوشی یک بارکد و یک شماره سریال دارد. تمام گوشی های یک مارک خاص همگی یک بارکد مشترک دارند و نمی توان با استفاده از بارکد تفاوت آنها را از هم تشخیص داد. ولی هر گوشی یک شناسه خاص دارد که فقط منحصر به همان گوشی می باشد. در کد نویسی class مانند بارکد و id مانند شناسه عمل می کند.
جمع بندی
همانطور که گفته شد تفاوت id و class در HTML فقط در زمان استفاده از آنها است وگرنه کارکرد یکسانی دارند. استفاده به موقع از آنها باعث می شود کدهای تمیزتری داشته باشید. در بالا سعی کردیم با مثال تفاوت ها آنها را درک کنید. اگر سوال یا ابهامی در این زمینه دارید در بخش نظرات مطرح نمایید.
منبع: https://www.bestcolleges.com/bootcamps/guides/css-class-vs-id/
نظرات :