Class در HTML

در این بخش از آموزش طراحی سایت به آموزش class ها در HTML می پردازیم.

Class در HTML

استفاده از ویژگی class برای مشخص کردن یک دسته از  عناصر HTML می باشد. چندین عنصر می توانند از یک کلاس یکسان استفاده کنند و همه ویژگی هایی که در آن class تعریف شده باشد روی این عناصر اعمال می شود.


استفاده از ویژگی Class

ویژگی class اغلب برای اشاره به نام یک کلاس در فایل css استفاده می شود. 

مثال زیر، سه عنصر < div > با یک ویژگی class با مقدار "city" دارد. هر سه عنصر < div > به طور یکسان بر طبق تعریف استایل city در بخش head استایل داده شده اند:

آموزش طراحی سایت

همانطور که در نتیجه کد بالا مشاهده می کنید، تمام عناصر div که کلاس city را دارند، از یک استایل پیروی کرده و هیچ تفاوتی میان آنها از نظر ظاهر وجود ندارد.

آموزش کلاس در HTML

در مثال بعدی ما دو عنصر < span > با یک ویژگی class با مقدار "note" داریم. هر دو عنصر < span > طبق تعریف note در بخش head استایل دهی شده اند:

آموزش کلاس در HTML

همانطور که در نتیجه کد مشاهده می کنید، کلاس note باعث دریافت رنگ قرمز و فونت سایز 120% برای همه عناصری که آن کلاس را دریافت کرده اند شده است.

آموزش CSS

قاعده Class

برای ساخت یک class در HTML، یک نقطه بگذارید و نام کلاس را بنویسید. سپس، مشخصه های CSS را درون آکولاد {} قرار دهید:

آموزش HTML

که نتیجه کد فوق به شکل زیر است:

آموزش طراحی سایت

استفاده از چندین کلاس برای عناصر HTML

عنصرهای HTML می توانند بیشتر از یک کلاس داشته باشند. برای تعریف کردن چندین کلاس، اسامی کلاس ها را با یک (Space) جدا کنید. مثال: <"div class="city main>. عنصر بر اساس تمام کلاس های مشخص شده استایل داده خواهد شد. یعنی همه ویژگی های CSS که در هریک از کلاس ها تعریف شده باشد را دریافت می کند.

در مثال بعد، اولین عنصر <h2> هم به کلاس city و هم به کلاس main تعلق دارد، و استایل ها را از هر دو کلاس دریافت می کند.

آموزش HTML

در این مثال مشاهده می کنید که اولین h2 که در آن متن London نوشته شده است، از هر دو کلاس city و main استفاده می کند. بنابراین همه ویژگی های کلاس city به علاوه ویژگی های کلاس main را دریافت کرده است. وجه تمایز این عنصر نسبت به سایر عناصر h2 را می توانید در زیر مشاهده کنید:

آموزش طراحی سایت

عنصرهای متفاوت می توانند از کلاس یکسان استفاده کنند. در مثال بعدی، هم < h2 > و هم <p> به کلاس "city" اشاره دارند و استایل یکسان را سهیم می شوند:

آموزش طراحی سایت

در این مثال مشخص شده که می توان از کلاس یکسان بر روی عناصر متفاوت html استفاده کرد که نتیجه آن در زیر مشخص شده است:

آموزش طراحی سایت

کاربرد ویژگی کلاس در جاوا اسکریپت

نام کلاس می تواند همچنین توسط جاوا اسکریپت و به منظور انجام دادن فعالیت های مشخصی بر روی عناصر به خصوص استفاده شود. جاوا اسکریپت می تواند با یک نام مشخص و با متد ()getElementsByClassName به عنصرها دسترسی داشته باشد:

آموزش HTML

در این مثال جاوا اسکریپت سعی دارد پس از کلیک شدن روی دکمه، تمام عناصری را که کلاس city دارند را دریافت کرده و در متغیر x ذخیره کند. سپس به همه آن عناصر ویژگی display = none را اختصاص دهد.

آموزش طراحی سایت

و سپس با زدن دکمه ی Hide elements همه عناصری که کلاس city داشتند در صفحه مخفی شوند:

آموزش HTML
آموزش طراحی سایت دوره آموزش طراحی سایت آموزش HTML آموزش CSS آموزش class در HTML سلکتور class در HTML