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

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

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

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

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

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

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

ساخت فروشگاه اینترنتی با php

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

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

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

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

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

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

<div>این یک متن عادی است</div>
<div class="bold">این یک متن کلفت است</div>
<div class="bold blue-text">این یک متن کلفت و آبی رنگ است</div>

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

.bold {
    font-weight: bold;
}

.blue-text {
    color: blue;
}

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

class-id-1

 

ساخت فروشگاه اینترنتی با php

نویسنده: مهدی خسروی

سلام، مهدی خسروی هستم، نویسنده کتاب «دوبار فکر کن، یک بار کد بزن» و مدرس دوره‌های طراحی و برنامه نویسی زنبیل. همیشه، بزرگ‌ترین موضوعی که من را اذیت میکرد، نبود دوره‌های آموزشی باکیفیت، پروژه‌محور و حرفه‌ای به زبان فارسی بود. همین موضوع باعث شد «زنبیل» متولد شود. اگر علاقمند به یادگیری هستید، دوره‌های رایگان و ویژه زنبیل را در آدرس xanbil.com/vip از دست ندهید.

13 دیدگاه برای “تفاوت بین Class و ID در طراحی وب با HTML و CSS”

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

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

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

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

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

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

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

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

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