تفاوت ID و Class در طراحی وب (راهنمای کامل ویدئویی)

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

تفاوت id و class

برای اینکه تفاوت id و class را به خوبی درک کنید، پیشنهاد میکنیم که حتما فیلم آموزشی زیر را مشاهده کنید. حتما برای‌تان مفید خواهد بود.

https://www.aparat.com/v/u7ftM

id چیست؟

حتما در طراحی وب، اسم ایدی ها را شنیده اید. id ها یکی از اتریبیوت‌ ‌هایی (attribute) هستند که میتوانیم در تگ ها از آن‌ها استفاده کنیم. حتما دیده‌اید برای مثال زما‌ن‌هایی را که طراحان وب‌، برای یک تگ از id ها استفاده میکنند. کاربرد id ها این است که قسمت های مختلف صفحه وب را مشخص میکنند و شما میتوانید با مشخص کردن یک id برای یک تگ، در آینده با استفاده از css به آن تگ استایل دهید.

برای مثال کد زیر را نگاه کنید:

< div id="myId">This is my div

در این تکه از کد، ما به تگ div یک ایدی با نام myId داده‌ایم. حالا اگر بخواهیم با استفاده css به این تگ استایل دهیم، به این شکل میتوانیم اقدام کنیم:

#myId{
	color: green;
}

برای استایل دهی به id ها از طریق css، باید قبل از نام آن‌ها یک علامت # قرار دهیم و سپس نام آن ایدی را بنویسیم و سپس استایل های موردنظرمان را به آن ها اضافه کنیم. برای مثال در بالا رنگ سبز را برای المانی با ایدی myId مشخص کرده‌ایم.

کاربرد id در طراحی وب

ایدی ها در طراحی وب و برنامه نویسی وب، کاربردهای مختلفی دارند. اما یکی از اصلی ترین کاربردهای آن, مشخص کردن قسمت های مختلف صفحه وب است.

یکی از مهم ترین نکاتی که در استفاده از id ها باید رعایت کنید, این است که تنها و تنها باید یکبار از انها در صفحه ی وب استفاده کنید.

فرض کنید که میخواهید بخش های مختلف صفحه وب را مشخص کنید. مثلا مشخص کنید که header کجاست, footer کجاست, منو کجاست و… یکی از بهترین راه ها این است که از id ها استفاده کنید.

نکته ی مهم درباره ی id ها این است که ایدی ها منحصر به فرد هستند:

  • هر المان فقط میتواند یک id داشته باشد.
  • هر صفحه‌ی وب فقط میتواند یک المان با آن ایدی داشته باشد.

class چیست؟

کلاس ها در html و css برای استایل دهی به صفحات وب به کار برده میشوند. بری استفاده از کلاس ها, به شکل زیر میتوانید عمل کنید:

< div class="myClass">This is a class

در این تکه از کد، ما به تگ div یک class با نام myClass داده‌ایم. حالا اگر بخواهیم با استفاده css به این تگ استایل دهیم، به این شکل میتوانیم اقدام کنیم:

.myClass{
	color: blue;
}

برای استایل دهی به class ها از طریق css، باید قبل از نام آن‌ها یک علامت . (نقطه) قرار دهیم و سپس نام آن کلاس را بنویسیم و سپس استایل های موردنظرمان را به آن ها اضافه کنیم. برای مثال در بالا رنگ آبی را برای المانی با کلاس myClass مشخص کرده‌ایم.

تفاوت id و class در چیست

همانطور که گفتیم, از ایدی ها برای مشخص کردن قسمت های مختلف صفحه وب مثل هدر, فوتر, منو و…استفاده میکنیم. و کلاس ها را برای استایل دهی و نشانه گذاری تگ ها.

نکته ی بسیار مهم در استفاده از id ها و class ها این است:

ID ها منحصر به فرد هستند

  • هر المان فقط میتواند یک id داشته باشد.
  • هر صفحه‌ی وب فقط میتواند یک المان با آن ایدی داشته باشد.

برای مثال اگر برای منوی کناری خودتان از کد <“div id=”sidebar>  استفاده کنید دیگر نمتوانید در جایی دیگر این id را به کار بگیرید و اینجا تنها جایی است که شما باید از “id=”sidebar استفاده کنید.

CLass ها منحصر به فرد نیستند

  • شما میتوانید یک class را روی چندین المان استفاده کنید.
  • شما میتوانید چندین class را برای یک المان تعیین کنید.

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

منبع: یادیفای

نوشته تفاوت ID و Class در طراحی وب (راهنمای کامل ویدئویی) اولین بار در ویرگول پدیدار شد.

گردآوری توسط ایده طلایی

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

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