ویژگی کلاس (Class) در زبان نشانه گذاری HTML (خصوصیت یا صفت)

زمان مطالعه

5 دقیقه

تعداد بازدید

تعداد پرسش ها

افزودن به لیست علاقه مندی ها

برچسب ها :

اشتراک گذاری این مطلب

دسته بندی مطالب

ویژگی کلاس (Class) در زبان نشانه گذاری HTML (خصوصیت یا صفت)

زمان مطالعه

5 دقیقه

تعداد بازدید

تعداد پرسش ها

افزودن به لیست علاقه مندی ها

برچسب ها :

اشتراک گذاری این مطلب

ویژگی کلاس (Class Attribute) در HTML برای تعیین کلاس به یک عنصر HTML استفاده می شود.

چند عنصر HTML می توانند از یک کلاس (Class) مشترک استفاده کنند.

استفاده از ویژگی کلاس (Class Attribute)

ویژگی کلاس (Class Atribute) اغلب برای اشاره به نام کلاس در یک سند CSS استفاده می شود. همچنین می تواند توسط زبان برنامه نویسی جاوااسکریپت (JavaScript) برای دسترسی و دستکاری عناصر با نام کلاس خاص استفاده شود.

مثال: در مثال زیر ما سه عنصر div با ویژگی کلاس (Class Attribute) با مقدار “city” داریم. هر سه عنصر div مطابق با کلاس city در تگ style در بخش head به طور یکسان تعریف می شوند.

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  border: 2px solid black;
  margin: 20px;
  padding: 20px;
}
</style>
</head>
<body>

<div class="city">
  <h2>London</h2>
  <p>London is the capital of England.</p>
</div>

<div class="city">
  <h2>Paris</h2>
  <p>Paris is the capital of France.</p>
</div>

<div class="city">
  <h2>Tokyo</h2>
  <p>Tokyo is the capital of Japan.</p>
</div>

</body>
</html>

استفاده از ویژگی کلاس (Class Attribute) در HTML

مثال: در مثال زیر ما سه عنصر span با ویژگی کلاس (Class Attribute) با مقدار “note” داریم. هر سه عنصر span مطابق با کلاس note در تگ style در بخش head به طور یکسان تعریف می شوند.

<!DOCTYPE html>
<html>
<head>
<style>
.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>

استفاده از ویژگی کلاس (Class Attribute) در HTML

چند نکته مهم:

ویژگی کلاس (Class Attribute) را می توان برای هر عنصر HTML مورد استفاده قرار داد.

نام کلاس (Class) به حروف بزرگ و کوچک حساس است.

قواعد (Syntax) کلاس (Class)

برای استایل دهی به یک کلاس در یک سند CSS یا در تگ style تعریف شده در تگ head، در سند HTML می توان به صورت زیر عمل کرد:

ابتدا یک کاراکتر (.) و سپس نام کلاس را می نویسیم، سپس ویژگی های CSS را در داخل جفت آکولاد باز و بسته می نویسیم.

مثال: در زیر یک کلاس با نام city ایجاد کرده ایم و استایل هایی را به آن اختصاص داده ایم.

<!DOCTYPE html>
<html>
<head>
<style>
.city {
  background-color: tomato;
  color: white;
  padding: 10px;
}
</style>
</head>
<body>

<h2 class="city">London</h2>
<p>London is the capital of England.</p>

<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>

<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>

</body>
</html>

قواعد (Syntax) کلاس (Class) در HTML

کلاس های چندگانه (Multiple Classes)

عناصر HTML می توانند دارای بیش از یک کلاس باشند.

برای تعریف چندین کلاس نام کلاس ها را با یک فضای خالی (White Space) از یکدیگر جدا کنید. با عنوان مثال :

<h2 class="city main">London</h2>

عنصر مطابق با تمام کلاس های مشخص شده استایل دهی خواهد شد.

مثال: در مثال زیر اولین عنصر h2 چون هر دو کلاس city و main را در خودش دارد، هر دو استایل CSS مربوط به city و main را دریافت می کند.

<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>

کلاس های چندگانه (Multiple Classes) در HTML

اشتراک کلاس (Class) بین چند عنصر

چند عنصر مختلف در HTML می توانند یک کلاس (Class) مشترک داشته باشند.

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

<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>

اشتراک کلاس (Class) بین چند عنصر در HTML

استفاده از کلاس (Class) در جاوااسکریپت (JavaScript)

همچنین می توان از کلاس ها در جاوااسکریپت (JavaScript) برای انجام کارهای خاص بر روی عناصر خاص مورد استفاده قرار داد.

جاوااسکریپت (JavaScript) می تواند با نام کلاس استفاده شده در متد getElementsByClassName() به عنوان پارامتر، به عناصر HTML دسترسی پیدا کند.

مثال: در زیر با کلیک بر روی دکمه Hide elements، همه عناصری که دارای کلاسی با نام city هستند، پنهان می شوند.

<script>
function myFunction() {
  var x = document.getElementsByClassName("city");
  for (var i = 0; i < x.length; i++) {
    x[i].style.display = "none";
  }
}
</script>

تصویر قبل پنهان شدن:

استفاده از کلاس (Class) HTML در جاوااسکریپت (JavaScript)

تصویر بعد پنهان شدن:

استفاده از کلاس (Class) HTML در جاوااسکریپت (JavaScript)

نکته: اگر کدهای مثال بالا را متوجه نشدید، نگران نباشید. در بخش مقالات آموزش جاوااسکریپت که در آینده نه چندان دور برای شما در سایت جاب تیم قرار خواهم داد همه این ها را یاد خواهید گرفت.