ID و کلاس در CSS و تفاوتشان

کلاس ها در CSS و HTML

مهمترین بخش CSS، اختصاص صحیح HTML به کلاس مخصوصش در CSS می باشد. شما هر تکه کد CSS را به عنصری در html مرتبط می کنید مگر اینکه آن عنصر به خصوصیات استایل دهی دیگری مرتبط باشد. کلاس ها را می توان برای ساخت ساختاری از زیرکلاس ها استفاده کرد.

شمای کلی یک کلاس به این صورت است.

<pre class="lang:default decode:true ">&lt;style type=”text/css”&gt;
div.special {
color:#900;
}
&lt;/style&gt;

&lt;div class=”special”&gt;
Sample Text
&lt;/div&gt;</pre>

کد بالا در بخش HTML خودش یک کلاس به نام special دارد. این نام کلاس با div.special خودش در CSS پیوند برقرار می کند و رنگ محتوای آن را از طریق CSS به رنگی با کد 900# در می آورد. بنابراین اگر ما div را به تگ p تغییر نام دادیم بایستی در کد CSS به صورت p.special داشته باشیم. اما اگر می خواهید استایلی داشته باشید که به هر کلاسی با نام special اعمال شود بایستی در کد CSS تنها special. را بیاورید. با اینکار تمام عناصری که خصوصیت special دارند از این استایل بهره خواهند برد.

ID ها در CSS و HTML

<style type=”text/css”>
#special {
color:#900;
}
</style>
 
<div id=”special”>
Sample Text
</div>

خصوصیت id تنها به یک عنصر اختصاص می یابد؛ برخلاف کلاس ها که می توانستید به بی شمار عنصر اختصاصش دهید.

همیشه برای تغییر چندین عنصر یکسان در یک صفحه از کلاس استفاده کنید. اگر نیاز به تغییر یک عنصر به خصوص به شکلی ویژه دارید بایستی از ID بهره ببرید.