آموزش برنامه نویسی

5 موضوع در باب نحوه ایجاد کلاس ها در HTML

آشنایی با کلاس ها در HTML

درست مانند دنیای واقعی ، افراد نام خانوادگی دارند ، در HTML ، برچسب ها دارای هویت هستند.

در آموزش ابتدایی HTML ، دیدم که یک کلاس در HTML در واقع هویت آن برچسب است.

آیا کلاس ها در یک صفحه HTML منحصر به فرد هستند؟

پاسخ به این سؤال خیر ، اساساً در هر صفحه HTML برچسبهای مختلفی می توانند کلاسهای یکسانی داشته باشند.

بنابراین کلاس های HTML منحصر به فرد نیستند.

برای تعریف یک کلاس جدید ، استفاده از صفت: Class. نیاز به استفاده از کلاس ها در HTML: در هر سند HTML ممکن است برچسب های مختلفی وجود داشته باشد.

اما چگونه می توانیم در صفحه HTML به یک برچسب خاص دسترسی پیدا کنیم؟ اینجاست که استفاده از کلاس کار ما را آسانتر می کند.

در ادامه به بیان کلاس ها در زبان نمادگزاری HTML می پردازیم.

کلاس ها در HTML
کلاس ها در HTML

کلاس ها در زبان نمادگزاری HTML

کلاس ها در HTML | از خاصیت کلاس معمولا برای تعریف استایل بر روی تگ ها استفاده می‌شود. از این رو تگ هایی که از کلاس (ها) یکسان استفاده می‌کنند از یک استایل مشخص پیروی خواهند کرد.

امکان استفاده از کلاس در تگ های برخط (inline) نیز وجود دارد.

برای نمونه در مثال زیر ۳ تگ div داریم که با یک کلاس یکسان تعریف شده‌اند.



 

Karaj

 

Karaj is a city in Iran.

 

Tehran

 

Tehran is a city in Iran.

 

Ardabil

 

Ardabil is a city in Iran.

 

برای معرفی کلاس‌ها در آموزش css بیشتر می‌خوانید، با اینحال بهتر است بدانید که برای معرفی کلاس‌ها در css بایستی در ابتدای نام آن‌ها یک نقطه بگذارید. مانند : cities.

انتخاب یک تگ خاص توسط نام class در CSS


 

class=”city”>Karaj

 

Karaj is a city in Iran.

 

class=”city”>Tehran

 

Tehran is a city in Iran.

 

class=”city”>Ardabil

 

Ardabil is a city in Iran.


استفاده از چند کلاس به صورت همزمان

کلاس ها در HTML |تگ های HTML می توانند همزمان چند کلاس داشته باشند. برای جداسازی نام کلاس ها باید از فاصله استفاده کنید.

Tehran

 

Ahvaz

 

Qom


استفاده برای چندین تگ

کلاس ها در HTML |می توان برای چند تگ متفاوت، کلاس با نام یکسان تعریف کرد و با معرفی تگ در ابتدای نام مانند h2.city برای هر کلاس یک استایل جداگانه تعریف کرد.


Qom

 

Qom is a city in Iran.


استفاده از خاصیت class در جاوا اسکریپت

کلاس ها در HTML |نام کلاس های استفاده شده در تگ ها می توانند در جاوا اسکریپت برای به انجام رساندن وظیفه ای مورد استفاده قرار گیرند.

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

نتیجه گیری

کلاس ها در HTML |  در این مقاله با انواع کلاس ها آشنا شدیم :

  • کلاس ها در HTML |استفاده از یک کلاس برای یک تگ
  • کلاس ها در HTML |استفاده از یک کلاس برای چند تگ با امکان شخصی سازی بر اساس تگ
  • کلاس ها در HTML |استفاده از چند کلاس هم زمان
  • کلاس ها در HTML |استفاده از کلاس‌ در جاوا اسکریپت

خب این مقاله هم از سری مقاله های آموزش HTML به پایان رسید. در جلسه بعدی در رابطه با آی دی ها صحبت خواهیم کرد. اگر سوال یا پیشنهادی داشتین حتما با ما از هر طریقی میتونید به اشتراک بزارید :))). تا جلسه بعد …

کلاس ها در HTML
کلاس ها در HTML
نمایش بیشتر

امیرحسین شمس

امیر حسین شمس | هم اکنون در زمینه های مختلفی چون طراحی سایت ، بهینه سازی سایت ، سئو (SEO) ، امنیت سایت ، آموزش طراحی سایت ، دیجیتال مارکتینگ ، سئو و مشاوره‌ کسب و کارهای اینترنتی فعالیت دارم. از سال 1385 تحصیلات خود را در زمینه ی علوم کامپیوتر شروع کرده و دوره های هوش مصنوعی ، شبکه های عصبی ، منطق فازی ، برنامه نویسی دات نت، طراحی سایت ، دیتابیس ، امنیت دیتابیس ، دیجیتال مارکتینگ، ایمیل مارکتینگ و سئو سایت را بصورت تخصصی گذرانده ام.

نوشته های مشابه

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

دکمه بازگشت به بالا
× چگونه می‌توانم به شما کمک کنم؟