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

0 دیدگاه

در جلسه سیزدهم مقالات آموزش اچ تی ام ال در خدمت شماییم با آموزش 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>

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

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

function myFunction() {

var x = document.getElementsByClassName("city");

for (var i = 0; i < x.length; i++) {

x[i].style.display = "none";

}

</script>

پیشنمایش

منبع : W3schools

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

آموزش اصول اولیه و عناصر HTML

آموزش کار با خصوصیات(Attribute) و عناوین(Heading) در Html

آموزش کار با پاراگراف و استایل در Html

آموزش کار با قالب بندی متن در Html

آموزش کار با کامنت در HTML

آموزش کار با کامنت در HTML

آموزش کار با رنگ ها در HTML

آموزش کار با تصاویر در HTML

آموزش کار با لینک در HTML

آموزش کار با جدول در HTML

آموزش کار با لیست ها در HTML

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

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

آموزش Html؛ آموزش iframe در HTML

آموزش Html؛ آموزش جاوا اسکریپت در HTML

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

آموزش Layout در HTML

آموزش طراحی سایت ریسپانسیو در HTML

آموزش عناصر کد کامپیوتر در HTML

آموزش موجودیت (Entities) در HTML

آموزش نمادها (Symbols) در HTML

آموزش کار با Character (کاراکترهای رزرو شده) در HTML

آموزش رمزگذاری URL در HTML

آموزش کامل کار با فرم ها در HTML

آموزش انواع ورودی (Input) در HTML

آموزش خصوصیات ورودی در HTML

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

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

5/5 - (1 امتیاز)

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

نظرات

برچسب ها: آموزش اچ تی ام ال

صابر بوستانی

داستان من با دنیای برنامه‌ نویسی آغاز شد، و در ادامه به عنوان یک توسعه‌ دهنده نرم‌ افزار، طراح وب سایت و متخصص سئو، مهارت ‌های تکنیکی و تحلیلی خودم رو پرورش دادم. علاقه م به دنیای مالی منو به سمت یادگیری ترید و معامله‌گری سوق داد. و در حال حاضر در برنامه نویسی و معامله گری ارز دیجیتال انجام میدم. از سال 96 سعی کردم معامله گری در کریپتو رو یاد بگیرم. ترید و معامله گری برام پر از چالش و شکست‌ های متعدد بود. اما هر شکست، درسی ارزشمند برام داشت و من رو به یک تریدر و معامله گر قوی‌ تر و هوشمندتر تبدیل کرد. با پشتکار و یادگیری مداوم، تونستم به موفقیت‌های قابل توجهی دست یابم و به معامله گری موفق تبدیل بشم. در اینجا بزرگترین تجربیات و مهمترین دانش خودم رو در اختیار شما قرار میدم تا در مدت زمان کوتاه تر و شکست های کمتر در این مسیر به موفقیت برسید.

دوره آموزش برنامه نویسی پایتون در 24 ساعت + ساخت ربات تلگرامی

انتشار: ۱۵ تیر ۱۳۹۸

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

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

آموزش Multiple Classes در Html

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

صابر بوستانی

دسته بندی موضوعات

آخرین محصولات فروشگاه

نظرات

بازخوردهای خود را برای ما ارسال کنید

لغو پاسخ

مطالب مرتبط