آشنایی با کلاس ها در 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 class="cities">   <h2>Karaj</h2>   <p>Karaj is a city in Iran.</p> </div>  <div class="cities">   <h2>Tehran</h2>   <p>Tehran is a city in Iran.</p> </div>  <div class="cities">   <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 class="city main">Tehran</h2> <h2 class="city">Ahvaz</h2> <h2 class="city">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 class="city">Qom</h2> <p class="city">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>

نتیجه گیری

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

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

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

26
14 مهر 1398
..نظرات..
..مقالات پربازدید..
طراحی سایت

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

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

6435
24 فروردین 1398
برنامه نویسی

ویژگی های جدید لاراول 5.8

تغییرات لاراول 5.8 LARAVEL ورژن بعدی فریم ورک لاراول با نسخه ۵.۸ در ماه فوریه سال ۲۰۱۹ منتشر میشه. در حال حاظر تنها مواردی که قطعی شده پشتیبانی لاراول ۵.۸ از کتابخانه carbon نسخه ۲ می باشد. و قابلیت امکان سوییچ بین هر دو نسخه یک و دو carbon مورد دیگر استفاده laravel 5.8 از vlucas/phpdotenv ورژن 3 برای فایل .env میباشد که اجازه استف...

609
08 اسفند 1397
برنامه نویسی

آموزش کار با افزونه دکان (چند فروشندگی)

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

539
04 دی 1397