کلاس در مقابل ID
Cascading Style Sheets (CSS) زبانی است که ظاهر و قالب بندی یک سند نوشته شده با استفاده از زبان نشانه گذاری را توصیف می کند. CSS به طور گسترده ای برای استایل دادن به صفحات وب نوشته شده در HTML استفاده می شود. CSS به شما امکان می دهد علاوه بر اعمال سبک برای عناصر HTML، انتخابگرهای سبک خود را نیز مشخص کنید. این کار با استفاده از شناسه و انتخابگر کلاس انجام می شود. هنگام تعیین یک سبک برای یک عنصر منحصر به فرد، از انتخابگر ID استفاده می شود. هنگام تعیین یک سبک برای گروهی از عناصر، از انتخابگر کلاس استفاده می شود.
کلاس چیست؟
در CSS، انتخابگر کلاس می تواند برای اعمال سبک خود بر روی گروهی از عناصر استفاده شود.انتخابگر کلاس برای اعمال یک سبک خاص به مجموعه ای از عناصر با همان کلاس استفاده می شود. در CSS، انتخابگر کلاس با نقطه (.) مشخص می شود. در زیر نمونه ای از انتخابگر کلاس تعریف شده در CSS آمده است.
.my_class {
رنگ: آبی؛
وزن فونت: پررنگ;
}
HTML می تواند با استفاده از کلاس مشخصه همانطور که در زیر نشان داده شده است به کلاس تعریف شده در CSS اشاره کند.
این قالب بندی من است
این دوباره قالب بندی من است
همانطور که در بالا نشان داده شد، یک کلاس می تواند برای چندین عنصر و یک عنصر واحد می تواند از چندین کلاس استفاده کند. هنگامی که چندین کلاس در یک عنصر استفاده می شود، کلاس ها در صفت کلاس که با یک فاصله محدود شده است، مطابق شکل زیر وارد می شوند.
این قالب بندی من با استفاده از دو کلاس است
ID چیست؟
در CSS، از انتخابگر ID می توان برای اعمال سبک خود بر روی یک عنصر منحصر به فرد استفاده کرد. در CSS، یک انتخابگر ID با یک هش () شناسایی می شود. در زیر نمونه ای از انتخابگر ID تعریف شده در CSS آمده است.
my_ID {
رنگ: قرمز؛
text-align:right;
}
HTML می تواند به انتخابگر شناسه تعریف شده در CSS با استفاده از شناسه مشخصه همانطور که در زیر نشان داده شده است اشاره کند.
این قالب بندی من از یک انتخابگر شناسه است
شناسه ها منحصر به فرد هستند. بنابراین هر عنصر فقط می تواند یک شناسه واحد داشته باشد و هر صفحه می تواند تنها یک عنصر با آن شناسه خاص داشته باشد. شناسه ها یک ویژگی مهم دارند که می توان با مرورگر از آن استفاده کرد. اگر URL صفحه حاوی یک مقدار هش باشد (به عنوان مثال https://myweb.commy_id)، مرورگر سعی می کند به طور خودکار عنصر را با شناسه "my_id" پیدا کند و صفحه وب را برای نمایش آن عنصر اسکرول کند. این یکی از دلایلی است که صفحه باید یک عنصر با آن شناسه خاص داشته باشد تا مرورگر بتواند آن عنصر را پیدا کند.
تفاوت بین کلاس و ID چیست؟
حتی اگر هم از انتخابگر کلاس و هم انتخابگر شناسه می توان برای اعمال سبک خود بر روی عناصر یک صفحه وب استفاده کرد، اما تفاوت های مهمی با هم دارند.انتخابگر کلاس می تواند برای اعمال سبک خود بر روی یک گروه از عناصر استفاده شود، در حالی که انتخابگر ID برای اعمال یک سبک به یک عنصر واحد و منحصر به فرد استفاده می شود. هنگام استفاده از ID، هر عنصر فقط می تواند یک شناسه داشته باشد و هر صفحه می تواند تنها یک عنصر با آن شناسه خاص داشته باشد، اما Class می تواند برای چندین عنصر و یک عنصر می تواند از چندین کلاس استفاده کند. علاوه بر این، از ID میتوان برای پیمایش خودکار یک صفحه برای نمایش عنصر با آن شناسه استفاده کرد، اما با انتخابگر کلاس این امکان وجود ندارد.