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

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

زمان مطالعه

5 دقیقه

تعداد بازدید

99

تعداد پرسش ها

0

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


برچسب ها :


اشتراک گذاری این مطلب
سامان محمدپور
در مورد نویسنده : موفقیت بستگی به تلاش هر شخص داره، هممون ب همون اندازه که تلاش کردیم موفق شدیم.

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

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

زمان مطالعه

5 دقیقه

تعداد بازدید

99

تعداد پرسش ها

0

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


برچسب ها :


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

ویژگی کلاس (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)

 

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

خلاصه مقاله

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

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

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

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

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

JavaScript می تواند به عناصر با نام کلاس خاص با متد getElementsByClassName() دسترسی پیدا کند.

 

خب به پایان یکی دیگر از مقالات بخش زبان نشانه گذاری HTML رسیدیم و طریقه استفاده از کلاس ها را یاد گرفتیم.

در مقاله بعدی به طور اساسی به یکی دیگر از مقالات مهم در HTML، یعنی مبحث Id ها خواهیم پرداخت.

سامان محمدپور
در مورد نویسنده : موفقیت بستگی به تلاش هر شخص داره، هممون ب همون اندازه که تلاش کردیم موفق شدیم.


پرسش و پاسخ
0
دوره پیشنهادی
دوره پیشنهادی