آموزش HTML صفحه اصلی اینستاگرام ما
صفت class در HTML

صفت class در HTML


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

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


استفاده از صفت class

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

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

مثال

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

<div class="city">
  <h2>لندن</h2>
  <p>لندن پایتخت انگلستان است.</p>
</div>

<div class="city">
  <h2>پاریس</h2>
  <p>پاریس پایتخت فرانسه است.</p>
</div>

<div class="city">
  <h2>توکیو</h2>
  <p>توکیو پایتخت ژاپن است.</p>
</div>

</body>
</html>
امتحان کن »

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

مثال

<!DOCTYPE html>
<html>
<head>
<style>
.note {
  font-size: 120%;
  color: red;
}
</style>
</head>
<body>

<h1>عنوان <span class="note">مهم</span> من</h1>
<p>این متن <span class="note">مهمی</span> است.</p>

</body>
</html>
امتحان کن »

نکته: صفت class میتواند در هر عنصر HTML استفاده شود .

نکته: نام class حساس به بزرگی و کوچکی حروف (case sensitive) است !


نحو برای Class

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

مثال

ساخت یک class با نام "city" :

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

<h2 class="city">لندن</h2>
<p>لندن پایتخت انگلستان است.</p>

<h2 class="city">پاریس</h2>
<p>پاریس پایتخت فرانسه است.</p>

<h2 class="city">توکیو</h2>
<p>توکیو پایتخت ژاپن است.</p>

</body>
</html>
امتحان کن »

کلاس های متعدد

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

برای مشخص کردن چند class ، نام های class را با یک فاصله جدا کنید ، برای مثال <div class="city main"> .عنصر مطابق با همه class های مشخص شده سبک دهی خواهد شد .

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

مثال

<h2 class="city main">لندن</h2>
<h2 class="city">پاریس</h2>
<h2 class="city">توکیو</h2>
امتحان کن »

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

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

در مثال زیر ، هر دو <h2> و <p> به کلاس "city" اشاره میکنند و سبک یکسانی را به اشتراک خواهند گذاشت :

مثال

<h2 class="city">پاریس</h2>
<p class="city">پاریس پایتخت فرانسه است.</p>
امتحان کن »



پسین پیشین