آشنایی با کلاس ها در HTML

طراحی سایت

..آشنایی با کلاس ها در HTML..
آشنایی با کلاس ها در HTML
طراحی سایت

آشنایی با کلاس ها در HTML

برای استایل دهی و سفارشی سازی تگ های HTML چه کار هایی باید انجام دهیم؟ آیا می‌توانیم تگ های HTML‌ را سفارشی سازی کنیم؟ کلاس ها یا Class ها در HTML به چه چیز هایی می‌گوییم؟

سرفصل‌های پست

کلاس ها در زبان نمادگذاری HTML

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

امکان استفاده از کلاس در تگ های برخط (inline) نیز وجود دارد.

برای نمونه در مثال زیر ۳ تگ div داریم که با یک کلاس یکسان تعریف شده‌اند.

<!DOCTYPE html> <html> <head> <style> .cities {   background-color: black;   color: white;   margin: 20px;   padding: 20px; } </style> </head> <body> <div >   <h2>Karaj</h2>   <p>Karaj is a city in Iran.</p> </div> <div >   <h2>Tehran</h2>   <p>Tehran is a city in Iran.</p> </div> <div >   <h2>Ardabil</h2>   <p>Ardabil is a city in Iran.</p> </div> </body> </html>
نمونه کلاس ها در HTML

برای معرفی کلاس‌ها در آموزش css بیشتر می‌خوانید، با اینحال بهتر است بدانید که برای معرفی کلاس‌ها در css بایستی در ابتدای نام آن‌ها یک نقطه بگذارید. مانند : cities.

انتخاب یک تگ خاص توسط نام class در CSS

<style> .city {   background-color: tomato;   color: white;   padding: 10px; } </style> <h2 class="city">Karaj</h2> <p>Karaj is a city in Iran.</p> <h2 class="city">Tehran</h2> <p>Tehran is a city in Iran.</p> <h2 class="city">Ardabil</h2> <p>Ardabil is a city in Iran.</p>
نمونه سفارشی سازی هدینگ ها با استفاده از کلاس ها
نمونه سفارشی سازی هدینگ ها با استفاده از کلاس ها

استفاده از چند کلاس به صورت همزمان

تگ های HTML می توانند همزمان چند کلاس داشته باشند. برای جداسازی نام کلاس ها باید از فاصله استفاده کنید.

<h2 >Tehran</h2> <h2 >Ahvaz</h2> <h2 >Qom</h2>

استفاده برای چندین تگ

می توان برای چند تگ متفاوت، کلاس با نام یکسان تعریف کرد و با معرفی تگ در ابتدای نام مانند h2.city برای هر کلاس یک استایل جداگانه تعریف کرد.

<style> h2.city {    background-color: tomato;   color: white;   padding: 10px; } p.city {    background-color: blue; color: white;   padding: 10px; } </style> <h2 >Qom</h2> <p >Qom is a city in Iran.</p>
یک کلاس برای تگ های متفاوت
یک کلاس برای تگ های متفاوت با خاصیت سفارشی سازی بر اساس تگ ها

استفاده از خاصیت class در جاوا اسکریپت

نام کلاس های استفاده شده در تگ ها می توانند در جاوا اسکریپت برای به انجام رساندن وظیفه ای مورد استفاده قرار گیرند.

برای دسترسی به تگ های خاص توسط نام کلاس در جاوا اسکریپت باید از تابع getElementsByClassName() استفاده کنید.

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

نتیجه گیری

در این مقاله با انواع کلاس ها آشنا شدیم :

  • استفاده از یک کلاس برای یک تگ
  • استفاده از یک کلاس برای چند تگ با امکان شخصی سازی بر اساس تگ
  • استفاده از چند کلاس هم زمان
  • استفاده از کلاس‌ در جاوا اسکریپت

در جلسه بعدی در رابطه با آی دی ها صحبت خواهیم کرد. اگر سوال یا پیشنهادی داشتین حتما با ما از هر طریقی میتونید به اشتراک بزارید :))). تا جلسه بعد …

135
14 مهر 1398
    ..نظرات..
    ..مقالات پربازدید..
    آموزش قرعه کشی در اینستاگرام
    طراحی سایت

    آموزش قرعه کشی در اینستاگرام

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

    13948
    24 فروردین 1398
    دلایل موفقیت دیجی کالا
    طراحی سایت

    دلایل موفقیت دیجی کالا

    یکی از موفق ترین استارت اپ های ایران در دهه ی اخیر سایت دیجی کالا بوده است . به طوری که به جرئت می توان گفت این سایت بزرگ‌ ترین خرده‌ فروشی اینترنتی خاورمیانه است .اقایان محمدی در سال 1384 تصمیم راه اندازی این وب سایت گرفتند و در سال 85 این برند با نام فعلی ” دیجی کالا ” پایه گذاری گردید .مدیران این پروژه با این هدف او...

    1967
    22 اردیبهشت 1398
    bit.ly چیست ؟
    طراحی سایت

    bit.ly چیست ؟

    بیتلی یا bitly یکی از شناخته‌شده‌ترین سرویس‌های کوتاه کننده لینک است. این سایت با نشانی https://bit.ly در سال ۲۰۰۸ تاسیس شد. یک کوتاه کننده‌ی لینک وظیفه دارد تا لینک‌های مورد نظر کاربران را به شکل کوتاه و قابل خواندن و نوشتن تبدیل کند. این سرویس در هر ماه حدود ۶۰۰ میلیون لینک کاربران را کوتاه می‌کند.علت استفاده از...

    1892
    27 آذر 1398