ویژگی class

از ویکی‌کد، دانشنامهٔ برنامه‌نویسی
(تغییرمسیر از Class در اچ‌تی‌ام‌ال)
پرش به ناوبری پرش به جستجو
Main Page Tutorial
Html-menu.png
موارد آموزشی
۱خانه
۲مقدمه
۳ویرایشگرها
۴پایه
۵عنصرها
۶ویژگی‌ها
۷عنوان‌ها
۸پاراگراف‌ها
۹استایل‌ها
۱۰قالب‌بندی
۱۱نقل‌قول‌ها
۱۲توضیحات
۱۳رنگ‌ها
۱۴CSS
۱۵لینک‌ها
۱۶تصاویر
۱۷جداول
۱۸لیست‌ها
۱۹بلوک‌ها
۲۰کلاس‌ها
۲۱شناسه
۲۲Iframeها
۲۳جاوا اسکریپت
۲۴مسیرهای فایل
۲۵سرصفحه
۲۶چیدمان‌ها
۲۷واکنش‌گرا
۲۸کد کامپیوتری
۲۹معنایی‌ها
۳۰راهنمای استایل
۳۱موجودیت‌ها
۳۲نماد‌ها
۳۳ایموجی‌ها
۳۴مجموعه کاراکترها
۳۵رمزگذاری URL
۳۶HTML و XHTML
فرم‌های HTML
گرافیک در HTML
رسانه در HTML
APIها در HTML
مثال‌ها
مرجع HTML

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

ویژگی class در HTML برای تعریف استایل‌های یکسان برای عنصرهایی با نام کلاس مشابه استفاده می‌شود.[۱]

بنابراین، همه عنصرهای HTML با ویژگی class مشابه استایل یکسان می‌گیرند.

در اینجا سه عنصر <div> داریم که به نام کلاس مشابه اشاره می‌کنند:

مثال

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 .cities {
 6   background-color: black;
 7   color: white;
 8   margin: 20px;
 9   padding: 20px;
10 }
11 </style>
12 </head>
13 <body>
14 
15 <div class="cities">
16   <h2>London</h2>
17   <p>London is the capital of England.</p>
18 </div>
19 
20 <div class="cities">
21   <h2>Paris</h2>
22   <p>Paris is the capital of France.</p>
23 </div>
24 
25 <div class="cities">
26   <h2>Tokyo</h2>
27   <p>Tokyo is the capital of Japan.</p>
28 </div>
29 
30 </body>
31 </html>


مشاهدهٔ نتیجه


Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


استفاده از ویژگی class در عنصرهای Inline

ویژگی class در HTML را می‌توان برای عنصرهای درون خطی نیز استفاده کرد:

مثال

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <style>
 5 span.note {
 6   font-size: 120%;
 7   color: red;
 8 }
 9 </style>
10 </head>
11 <body>
12 
13 <h1>My <span class="note">Important</span> Heading</h1>
14 <p>This is some <span class="note">important</span> text.</p>
15 
16 </body>
17 </html>


مشاهدهٔ نتیجه

نکته: ویژگی class را می‌توان برای هر عنصر HTML استفاده کرد.

نکته: نام کلاس case sensitive (به فارسی: حساس به بزرگی و کوچکی حروف) است!
نکته: در مورد CSS می‌توانید در آموزش CSS ما بیشتر مطالعه کنید.

انتخاب عنصرهایی با کلاس خاص

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

مثال

از CSS برای استایل دهی همه عناصر با نام کلاس “city” استفاده می‌کند:

 1 <style>
 2 .city {
 3   background-color: tomato;
 4   color: white;
 5   padding: 10px;
 6 }
 7 </style>
 8 
 9 <h2 class="city">London</h2>
10 <p>London is the capital of England.</p>
11 
12 <h2 class="city">Paris</h2>
13 <p>Paris is the capital of France.</p>
14 
15 <h2 class="city">Tokyo</h2>
16 <p>Tokyo is the capital of Japan.</p>

نتیجه:

Time2wait.svg ساخت نمونه مثال این بخش در دست اقدام است.


مشاهدهٔ نتیجه


چند کلاس

عنصرهای HTML بیش از یک نام کلاس دارند، بین نام‌های کلاس باید یک فاصله (space) وجود داشته باشد.

مثال

مثال

عنصرها را با کلاس “city” استایل دهی می‌کند، همچنین آنها را با کلاس “main” استایل دهی می‌کند:

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


مشاهدهٔ نتیجه


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

تگ های مختلف می‌توانند یک کلاس را به اشتراک بگذارند

تگ‌های مختلف، مانند <h2> و <p> می‌توانند نام کلاس یکسان داشته باشند و به این ترتیب استایل مشابه را به اشتراک بگذارند:

مثال

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


مشاهدهٔ نتیجه


استفاده از ویژگی class جاوا اسکریپت

نام کلاس می‌تواند توسط جاوا اسکریپت هم استفاده شود تا وظایف خاصی را برای عنصرهایی با نام کلاس خاص انجام دهد.

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

مثال

هنگامی که کاربر برروی کلیدی کلیک کند، همه عناصر دارای کلاس “city” پنهان می‌شوند:

1 <script>
2 function myFunction() {
3   var x = document.getElementsByClassName("city");
4   for (var i = 0; i < x.length; i++) {
5     x[i].style.display = "none";
6   }
7 }
8 </script>


مشاهدهٔ نتیجه

اگر کد مثال بالا را متوجه نمی‌شوید نگران نباشید.

در مورد جاوا اسکریپت در بخش HTML JavaScript ما بیشتر خواهید آموخت یا می‌توانید آموزش JavaScript ما را مطالعه کنید.

تمرین HTML


منابع آموزشی