تفاوت بین Class و ID در طراحی وب با HTML و CSS

تفاوت بین Class و ID در طراحی وب با HTML و CSS

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

برای این آموزش هم فایل ویدئویی ضبط شده و هم متن آن در زیر قابل دریافت است. اگر میتوانید فیلم آموزشی را دانلود و مشاهد کنید و اگر امکان این کار را ندارید از آموزش متنی لذت ببرید.

ID ها و Class ها مانند قلاب عمل میکنند

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

برای مثال فرض کنید شما در صفحه‌ی وب خودتان چندین div دارید که یکی برای بخش محتوای اصلی، یکی برای منوی کناری، یکی برای منوی بالایی و دیگری برای قسمت پایینی سایت (Footer) است. حالا اگر شما بخواهید هر کدام از این قسمت‌ها را بصورت خاص و جداگانه با css استایل دهی کنید چاره‌ی کار دقیقا همین است که با id ها و class ها اینکار را انجام دهید.

بصورت خلاصه id ها و class ها به ما کمک میکنند که یک المان را بصورت کاملا خاص هدف گیری کنیم و آن را به قلاب بیندازیم و بعد با استفاده از css تغییرات مورد نظرمان را روی آن اعمال کنیم. سوالی که پیش می‌آید این است که تفاوت بین id ها و class ها چیست؟ در ادامه به این سوال میپردازیم.

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

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

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

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

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

زمانی که میخواهید یک استایل خاص را روی چندین المان تکرار کنید باید از class ها استفاده کنید. برای مثال شما در کدتان چندین جا مجبور میشوید یک استایل خاص را به یک تکه از متن بدهید.برای مثال در جایی میخواهید آن متن را به این شکل کلفت و Bold کنید  و جاهایی هم میخواهید علاوه بر Bold بودن رنگ آن آبی هم باشد. در کد زیر در خط اول میخواهیم یک متن ساده داشته باشیم، پس هیچ class خاصی به آن اختصاص نمیدهیم. در خط دوم فقط میخواهیم یک متن کلفت داشته باشیم، به همین دلیل class آنرا برابر bold و در خط سوم چون میخواهیم متن‌مان هم کلفت و هم آبی باشد مقدار class آن را برابر دو مقدار bold و blue-text قرار میدهیم و این دو را با یک فاصله (space) از هم جدا میکنیم.

و حالا میرویم و در css این کدها را برای یک متن کلفت و یک متن آبی رنگ مینویسیم :

از این به بعد در هرجای کدمان بخواهیم یک متن کلفت داشته باشیم به یک المان class=bold و هر جا بخواهیم یک متن آبی رنگ داشته باشیم به یک المان class=blue-text و هرجا که هردوی این‌ها را باهم بخواهیم به آن المان هر دوی این class ها را با یک فاصله میدهیم. حاصل کد بالا این شد:

class-id-1

 

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

از حدود 5 سالگی با دنیایی به اسم کامپیوتر آشنا شدم و الان چیزی حدود 6 سال است که با کامپیوتر (و خصوصا برنامه‌نویسی) زندگی میکنم. در زنبیل دوست دارم اطلاعاتم را با شما دوستان عزیزم به اشتراک بگذارم. برای دانلود دوره‌های رایگان و ویژه لطفا به www.xanbil.com/vip مراجعه کنید.از توجه شما ممنونم :)

مطالب مرتبط

9 نظر

  1. yaghob

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

    پاسخ
  2. yaghob

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

    پاسخ
    1. مهدی خسروی

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

      پاسخ
    2. محمد

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

      پاسخ
      1. مهدی خسروی

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

        پاسخ

نظر بدهید

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

7 ساعت آموزش رایگان و پروژه‌محور طراحی وب
ایمیل خود را در زیر وارد کنید تا لینک دانلود 7 ساعت آموزش ویدئویی طراحی وب با HTML5 و CSS3 بلافاصله برایتان ایمیل شود.
در این دوره 2 پروژه‌ی عملی را از صفر تا صد باهم طراحی و برنامه‌نویسی خواهیم کرد.
قول می‌دهیم اطلاعات شما نزد ما محفوظ بماند :)
programmer