آموزش Html؛ آموزش کار با عنصر Class در HTML

آموزش Html؛ آموزش کار با عنصر Class در HTML

در جلسه سیزدهم مقالات آموزش اچ تی ام ال در خدمت شماییم با آموزش Html؛ آموزش کار با عنصر Class در HTML از وب سایت آموزش برنامه نویسی سورس باران. با ما همراه باشید…

آموزش کار با عنصر Class در HTML

خصوصیت class در HTML یک یا چند نام کلاس را برای یک عنصر HTML مشخص می‌کند. می‌توان برای اجرای وظایف مشخص که دارای نام کلاس مشخص هستند، نام کلاس یا class name را با CSS یا جاوا اسکریپت به کار برد. در مثال زیر از CSS برای استایل دادن به تمام عناصری که داری نام کلاس “city” هستند، استفاده شده است:

<style>
.city {
    background-color: tomato;
    color: white;
    padding: 10px;
} 
</style>

<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>

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

آموزش Multiple Classes در Html

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

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

آموزش خصوصیت class در جاوا اسکریپت

جاوا اسکریپت می‌تواند با استفاده از روش getElementsByClassName() به عناصری که دارای نام کلاس مشخصی هستند دسترسی داشته باشد. در مثال زیر نشان می‌دهد که وقتی کاربر روی یک دکمه کلیک می‌کند، تمام عناصری که دارای نام کلاس “city” هستند مخفی می‌شود:

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

منبع : W3schools

لیست جلسات قبل آموزش Html

1. آموزش اصول اولیه و عناصر HTML
2. آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html
3. آموزش کار با پاراگراف و استایل در Html
4. آموزش کار با قالب بندی متن در Html
5. آموزش کار با کامنت در HTML
6. آموزش کار با کامنت در HTML
7. آموزش کار با رنگ ها در HTML
8. آموزش کار با تصاویر در HTML
9. آموزش کار با لینک در HTML
10. آموزش کار با جدول در HTML
11. آموزش کار با لیست ها در HTML
12. آموزش کار با عناصر Block و Inline در HTML
13. آموزش کار با عنصر Class در HTML
14. آموزش Html؛ آموزش iframe در HTML
15. آموزش Html؛ آموزش جاوا اسکریپت در HTML
16. آموزش کار با عنصر Head در HTML
17. آموزش Layout در HTML
18. آموزش طراحی سایت ریسپانسیو در HTML
19. آموزش عناصر کد کامپیوتر در HTML
20. آموزش موجودیت (Entities) در HTML
21. آموزش نمادها (Symbols) در HTML
22. آموزش کار با Character (کاراکترهای رزرو شده) در HTML
23. آموزش رمزگذاری URL در HTML
24. آموزش کامل کار با فرم ها در HTML
25. آموزش انواع ورودی (Input) در HTML
26. آموزش خصوصیات ورودی در HTML

حتما بخوانید 1 : فیلم آموزش رایگان Html مهندس رحمانی

حتما بخوانید 1 : فیلم آموزش رایگان CSS مهندس رحمانی

راستی! برای دریافت مطالب جدید در کانال تلگرام یا پیج اینستاگرام سورس باران عضو شوید.