تفاوت 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 مشخص کردهایم.
کاربرد 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 به خوبی برای شما روشن شده باشد.
مطالب زیر را حتما مطالعه کنید
23 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
مثل همیشه عالی و کاربردی بود
پیشنهاد می کنم
آیا برنامه ای برای تولید آموزش های زیر رو دارید؟
JavaScript و XML در قالب پروژه مثل دوره بی نظیر PHP & mysql
تشکر
ممنونم از محبت شما
بله بزودی درباره اون مباحث هم آموزشهایی خواهیم داشت
لطفا یک بخش حمایت مالی برای سایت در نظر بگیرید یا یک قیمت مناسب برای دوره های بعدی که قصد تهیه دارید
تا ما هم بتونیم شما رو حمایت کنیم
اینجوری ما هم در کنار شما پیشرفت می کنیم
خیلی خوشحالم که اینقدر آموزشها براتون مفید بوده که دوست دارید بازهم به یادیفای کمک کنید.
از لطف شما ممنونم و بزودی برنامههایی برای گسترش یادیفای دارم که انشالله این مورد هم (با کمی تغییر) شامل میشه.
نه خواهش میکنم پولیش نکنید آموزشهارو تا اونایی که توانایی مالی ندارند ولی علاقه مند به یادگیری هستند هم بتونن پیشرفت کنند
آموزشهای رایگان رو هم خواهیم داشت ولی آموزشهایی کمی پیشرفتهتر و کاملتر بصورت محصولات غیررایگان ارائه خواهند شد.
سلام
لطفا صفحه بندی با php رو آموزش بدید
با تشکر
مثل همیشه عالی
ممنون از زحمت شما
واقعا عالی بود مرسی از زحمات شما. منتظر آموزش های پیشرفته تر شما هستیم
عالی هستین شما دمتون گرمممممم
خیلی ممنون بابات آمورش عالی. واقعا خیلی قشنگ مفهوم رو توضیح دادی. بی نهایت تشکر
آقا کارت درسته
سلام دوست استاد عزیز مطلب کاملا مفید و کاربردی بود ولی کیفیت ویدیو خیلی پایین بود
سلام دوست خوبم
اگر در آپارات فیلم هارو مشاهده میکنید، میتونید کیفیت اونروز تنظیم کنید. و بصورت خودکار کیفیت ویدئو با توجه به سرعت اینترنت شما تنظیم میشه. اگر باز هم کیفیت پایین بود از شما عذرخواهی میکنم و سعی میکنیم که فیلم های آینده رو با کیفیت بهترین ضبط و منتشر کنیم. البته باید این نکته رو هم مد نظر داشته باشیم که فیلم ها باید حجم معقولی داشته باشند، چون اصلا دوست نداریم عزیزانی که اینترنت پرسرعت ندارند، فیلم های آموزشی را از دست بدهند
ممنونم از شما و انتقاد سازندتون
من همیشه یه id به نام wrp درست میکنم که بشه بلوک اصلی سایت بقیه رو فقط class میدم (:
بسیار عالی
مرسی که تجربیاتتون رو با ما و بقیه دوستان به اشتراک میزارید.
درود
سپاس از آموزش مفیدتون. اما فیلم پس از دقیقه ۱۱:۱۹ صدا نداره متاسفانه.
سلام خانوم رضایی بزرگوار
ممنون بابت ریزبینی شما. مشکل فایل برطرف شد و الان میتوانید بدون مشکل اقدام به مشاهدهی این فایل کنید.
موفق باشید
دختر بازی نکن خخخخ
اینجا یه سایت آموزشی و تخصصی هست مجبتی جان. بنظرم این ادبیات زیاد مناسب نیست 🙂
سلام.من تازه دارم خودم یاد میگیرم از روی منابع خارجی.واسه خودم این سوال پیش اومد که واقعا فرق id با class تو چیه؟ ویدیوتون رو دیدم.آقا لینک دانلود نداره؟؟؟چرا؟؟؟؟ میخوام دانلودش کنم؟چیکار کنم؟ اگه میشه لینک دانلود رو قرار بدید. خیلی آموزنده بود.دست درد نکنه.
سلام جناب اقبالی گرامی
خوشحالم که این آموزش واستون مفید بوده. این فیلم رو میتونید از آپارات دانلود کنید. داخل صفحهی فیلم در سایت آپارات قسمتی برای دانلود فیلم ها هست