کلاس یکی از چهار اتریبیوت های جهانی است که میتوان به کمک آن یک یا چند نام برای المان HTML درنظر گرفت. کلاس میتواند برای هر المان HTML درنظر گرفته شود. با کمک نام کلاس، میتوان از طریق CSS و JavaScript تسک های خاصی برای المان ها درنظر گرفت.
بنابراین، با کمک CSS، همه المان های HTML که اتریبیوت کلاس یکسانی دارند فورمت و استایل یکسانی خواهند داشت.
مثال
<!DOCTYPE html> <html> <head> <style> .cities { background-color: black; color: white; margin: 20px; padding: 20px; } </style> </head> <body> <div class="cities"> <h2>London</h2> <p>London is the capital of England.</p> </div> <div class="cities"> <h2>Paris</h2> <p>Paris is the capital of France.</p> </div> <div class="cities"> <h2>Tokyo</h2> <p>Tokyo is the capital of Japan.</p> </div> </body> </html>
London
London is the capital of England.
Paris
Paris is the capital of France.
Tokyo
Tokyo is the capital of Japan.
هرچند برای انتخاب نام کلاس هیچ محدودیتی وجود ندارد، اما توصیه میشود از نام هایی استفاده شود که هدف معنایی المان را توصیف کند. برای مثال قرار است المان span نام کشورها را به شکل italic نمایش دهد. بهتر است نام کلاس المان city باشد نه italic، زیرا این امکان وجود دارد که بعدها بخواهیم نام شهرها را به صورت bold نمایش دهیم. بنابراین نام های معنایی حتی با تغییر استایل صفحه منطقی خواهند ماند.
نکاتی که باید در ذهن داشته باشید
- اتریبیوت کلاس یک اتریبیوت جهانی است و برای همه المان ها، حتی المان های inline هم استفاده میشود.
- در CSS، برای انتخاب یک المان توسط نام کلاس، قبل از نام کلاس کاراکتر (.) نوشته میشود.
- المان های HTML میتوانند بیش از یک کلاس داشته باشد.
- المان های مختلف میتوانند کلاس های یکسانی داشته باشند.
مثال المان inline
<!DOCTYPE html> <html> <head> span.note { font-size: 120%; color: red; } </style> </head> <body> <h1>My <span class="note">Important</span> Heading</h1> <p>This is some <span class="note">important</span> text.</p> </body> </html>
خروجی مثال بالا:
My Important Heading
This is some important text.
مثال چند کلاس
<!DOCTYPE html> <html> <head> <style> .city { background-color: tomato; color: white; padding: 10px; margin: 20px; } </style> <head> <body> <h2 class="city main">London</h2> <h2 class="city">Paris</h2> <h2 class="city">Tokyo</h2> </body> </html>
خروجی مثال بالا:
London
Paris
Tokyo
مثال المان های مختلف با کلاس یکسان
<h2 class="city">London</h2> <p class="city">Paris</p>
خروجی مثال بالا:
London
Paris