تفاوت id و class در HTML و CSS | صفت id در html | صفت class

تفاوت id و class را در این مقاله از سایت آموزی برای شما کابران گرامی شرح می دهم.

تفاوت id و class در HTML و CSS 

تفاوت id و class در HTML و CSS | صفت id در html | صفت class

تفاوت id و class در HTML و CSS | صفت id در html | صفت class

هریک از تگ ها در HTML می توانند شامل Attribute های id و class شوند

تعریف خصوصیت عمومی class در تگ های html

در حقیقت زمانی نیاز داریم مجموعه ای از تگ ها همه شامل یک خصوصیت یکسان شوند.

مثلا شاید بخواهیم عکسی را در داخل یک تگ p (پاراگراف) از سایتمان در موقعیت چپ قرار دهیم.

در این حالت کافی است تگ img مورد نظر را شامل یک اسم class کنید.

و در سند css خود کد استایل را براساس اسم کلاس بنویسید.

تفاوت id و class در HTML و CSS | صفت id در html | صفت class

تفاوت id و class در HTML و CSS | صفت id در html | صفت class

کلاس alignleft (اسم دلخواه) می تواند برای تگ img مورد نظر در این پاراگراف نوشته شود.

حال برای نوشتن کد css این عکس کافی است به شکل زیر عمل کنیم و این کد را در سند css بنویسیم:

{ ;alignleft { float: left.

البته خصوصیت عمومی class ، را می توانیم در چندین تگ با اسم یکسانی به کار برده و همه را با هم تغییر دهیم.

مثلا اگر گروهی عکس در یک گالری عکس دارید کافی است آن دسته عکسها را شامل اسم کلاس یکسان کنید.

و در سند css خود با نوشتن یکبار کدهای مدنظر برای تمام تگ ها که اسم کلاس یکسان دارند ، اعمال کنید.

تعریف خصوصیت عمومی id در تگ های html

اما زمانی نیاز داریم یک کد استایل مخصوص را برای یک تگ به شکل اختصاصی بنویسیم.

به شکل زیر که دارای دو تگ h1 در سند html می باشد توجه کنید:

تفاوت id و class در HTML و CSS | صفت id در html | صفت class

تفاوت id و class در HTML و CSS | صفت id در html | صفت class

همانطور که در شکل مشخص می باشد، یکی از تگ های h1 دارای یک id با نام myid می باشد.

با این روش فقط تگ هدینگی که شامل این اسم id می باشد ، رنگ آن را تغییر می دهیم.

ما ممکن است در سند خود از تعداد زیادی تگ h1 استفاده کرده باشیم ، اما تغییر رنگ را فقط روی یکی میخواهیم اجرا کنیم.

در این حالت از Attribute عمومی id استفاده می کنیم.

و حالا کافی است در سند css خود این کد را برای این id بنویسیم تا تغییر رنگ فقط در هدینگ مورد نظر ما اعمال گردد :

{ ;myid  { color: red#

تفاوت class و id

خصوصیت class را گروه های مختلفی می توانیم تکرار کرده و با اسم های یکسان در گروه ها و تگ های مختلف به کار بریم.

اما خصوصیت عمومی id تنها مخصوص یک عنصر و یا یک گروه تگ می باشد.

لذا در خصوصیت id شما نمی توانید آن اسم را به تگ یا گروه تگ دیگری اختصاص دهید.

نکات مهم :

1- خصوصیت عمومی  id و class در تگ های html با یک Attribute Name و یک Attribute Value مشخص می شود:

“اسم مورد نظرتان”=class

“اسم مورد نظرتان”=id

2- خصوصیت عمومی  id و class در یک سند css قبل از اسم انتخابی به ترتیب با علامت # در id و علامت . در class همراه است:

ID in css document –> #myid

Class in css document –> .myclass

3- تفاوت id و class در اسناد html و css در اختصاصی و عمومی عمل کردن برای تگ یا گروه تگ ها می باشد.

تفاوت id و class در HTML و CSS | صفت id در html | صفت class – اختصاصی سایت آموزی