ویژگی class
استفاده از ویژگی 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>
40px ساخت نمونه مثال این بخش در دست اقدام است.
استفاده از ویژگی 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 استفاده کرد.
انتخاب عنصرهایی با کلاس خاص
در 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>
نتیجه:
40px ساخت نمونه مثال این بخش در دست اقدام است.
چند کلاس
عنصرهای 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
منابع آموزشی