فقط واتساپ ۰۹۱۵۷۲۳۲۳۹۸

تفاوت 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، قبل از نام کلاس یک نقطه قرار می دهیم.

این پست رو حتما ببین : آموزش اینسپکت المنت inspect element

 

کلاس و آی دی در css

تنها تفاوتی که آی دی و کلاس در css دارند، کاراکتری است که قبل از نام آنها به کار می رود:

  • قبل از نام id در css از کاراکتر # استفاده می شود.
  • قبل از نام class در  css از کاراکتر نقطه استفاده می شود.

 

اگر بخواهیم در مثال بالا استایل ها را در فایل css اعمال کنیم به صورت زیر عمل می کنیم (به کاراکترهایی که قبل از نام id و class استفاده کرده ایم دقت کنید):

 

خروجی کار به صورت زیر خواهد بود:

تفاوت id و class در HTML

 

تفاوت id و class در HTML

در ابتدا ممکن است نتوانید به خوبی زمان استفاده از id و class را به خوبی تشخیص دهید زیرا کار مشابهی انجام می دهند. ممکن است مدتی زمان ببرد تا زمان استفاده از هر کدام را تشخیص دهید. در ادامه سعی می کنیم با یک مثال تفاوت این دو را بهتر بیان کنیم.

اگر به یک فروشگاه موبایل مراجعه کنید خواهی دید که هر گوشی یک بارکد و یک شماره سریال دارد. تمام گوشی های یک مارک خاص همگی یک بارکد مشترک دارند و نمی توان با استفاده از بارکد تفاوت آنها را از هم تشخیص داد. ولی هر گوشی یک شناسه خاص دارد که فقط منحصر به همان گوشی می باشد. در کد نویسی class مانند بارکد و id مانند شناسه عمل می کند.

این پست رو حتما ببین : آموزش ساخت اسلایدر با html css

 

جمع بندی

همانطور که گفته شد تفاوت id و class در HTML فقط در زمان استفاده از آنها است وگرنه کارکرد یکسانی دارند. استفاده به موقع از آنها باعث می شود کدهای تمیزتری داشته باشید. در بالا سعی کردیم با مثال تفاوت ها آنها را درک کنید. اگر سوال یا ابهامی در این زمینه دارید در بخش نظرات مطرح نمایید.

 

منبع: https://www.bestcolleges.com/bootcamps/guides/css-class-vs-id/

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

ورود | ثبت نام
شماره موبایل یا ایمیل خود را وارد کنید
برگشت
کد تایید را وارد کنید
کد تایید برای شماره موبایل شما ارسال گردید
ارسال مجدد کد تا دیگر
برگشت
رمز عبور را وارد کنید
رمز عبور حساب کاربری خود را وارد کنید
برگشت
رمز عبور را وارد کنید
رمز عبور حساب کاربری خود را وارد کنید
برگشت
درخواست بازیابی رمز عبور
لطفاً پست الکترونیک یا موبایل خود را وارد نمایید
برگشت
کد تایید را وارد کنید
کد تایید برای شماره موبایل شما ارسال گردید
ارسال مجدد کد تا دیگر
ایمیل بازیابی ارسال شد!
لطفاً به صندوق الکترونیکی خود مراجعه کرده و بر روی لینک ارسال شده کلیک نمایید.
تغییر رمز عبور
یک رمز عبور برای اکانت خود تنظیم کنید
تغییر رمز با موفقیت انجام شد