CSS3 HTML5 طراحی وب فرانت اند (Front End)

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

تفاوت id و class
نوشته شده توسط مهدی خسروی

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

 

تفاوت id و class

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

id چیست؟

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

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

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

 

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

#myId{
 color: green;
}

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

خمیده کردن گوشه‌ی المان‌ها (Border Radius) در CSS

 

کاربرد 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 مشخص کرده‌ایم.

HTML5 چیست و چه تفاوتی با HTML دارد؟

 

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

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

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

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

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

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

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

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

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

امتیاز مقاله
  • کیفیت فایل ویدئویی
  • بومی بودن مطلب
  • کاربردی بودن مطلب
  • مثال های کاربردی
۴.۷۵

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

مهدی خسروی

۸ سال پیش که یادگیری برنامه نویسی رو آغاز کردم، با یک مشکل بزرگ مواجه شدم: کمبود منابع آموزشی حرفه‌ای و کاربردی به زبان فارسی. به همین دلیل، بعد از چندین سال فعالیت حرفه‌ای در زمینه‌ی برنامه نویسی، تصمیم گرفتم دانسته‌ها و تجربیات خودم را با شما عزیزان به اشتراک بگذارم. پیشنهاد میکنم به آدرس yadify.com/gifts حتما سر بزنید :)

۱۴ دیدگاه

  • مثل همیشه عالی و کاربردی بود
    پیشنهاد می کنم
    آیا برنامه ای برای تولید آموزش های زیر رو دارید؟
    JavaScript و XML در قالب پروژه مثل دوره بی نظیر PHP & mysql
    تشکر

  • لطفا یک بخش حمایت مالی برای سایت در نظر بگیرید یا یک قیمت مناسب برای دوره های بعدی که قصد تهیه دارید
    تا ما هم بتونیم شما رو حمایت کنیم
    اینجوری ما هم در کنار شما پیشرفت می کنیم

    • خیلی خوشحالم که اینقدر آموزش‌ها براتون مفید بوده که دوست دارید بازهم به یادیفای کمک کنید.
      از لطف شما ممنونم و بزودی برنامه‌هایی برای گسترش یادیفای دارم که انشالله این مورد هم (با کمی تغییر) شامل میشه.

    • نه خواهش میکنم پولیش نکنید آموزشهارو تا اونایی که توانایی مالی ندارند ولی علاقه مند به یادگیری هستند هم بتونن پیشرفت کنند

      • آموزش‌های رایگان رو هم خواهیم داشت ولی آموزش‌هایی کمی پیشرفته‌تر و کامل‌تر بصورت محصولات غیررایگان ارائه خواهند شد.

    • سلام دوست خوبم
      اگر در آپارات فیلم هارو مشاهده میکنید، میتونید کیفیت اونروز تنظیم کنید. و بصورت خودکار کیفیت ویدئو با توجه به سرعت اینترنت شما تنظیم میشه. اگر باز هم کیفیت پایین بود از شما عذرخواهی میکنم و سعی میکنیم که فیلم های آینده رو با کیفیت بهترین ضبط و منتشر کنیم. البته باید این نکته رو هم مد نظر داشته باشیم که فیلم ها باید حجم معقولی داشته باشند‌، چون اصلا دوست نداریم عزیزانی که اینترنت پرسرعت ندارند، فیلم های آموزشی را از دست بدهند
      ممنونم از شما و انتقاد سازندتون

درج دیدگاه

This site uses Akismet to reduce spam. Learn how your comment data is processed.