حتما شما هم به عنوان یک طراح وب دیده‌اید که در کدهایی که یک طراح وب استفاده میکند دو المان و خصیصه‌ی 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) از هم جدا میکنیم.
<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 ها را با یک فاصله میدهیم. حاصل کد بالا این شد:
