آشنایی با کلاس ها در 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>

پایانترم

[box type=”info” class=”question-from-users” width=””]

سوال:

چگونه از یک کلاس در چند تگ استفاده کنیم؟

به ایمیل کسانی که پاسخ درست و کامل رو در نظرات بگن ۱۰ هزارتومان در پنل کاربری آکادمی میزفا حسابشون شارژ میشه. (البته باید در آکادمی میزفا ثبت‌نام کنید تا بتونید از این امتیاز استفاده کنید.)

[/box]

نتیجه گیری

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

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

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

فیلم آموزشی asp.net core 2

علی اسماعیلی
درباره خودم گفتن یا نوشتن کار آسونی نیست. باید تو کم‌ترین حجم مهم‌ترین اطلاعات رو بنویسی. وقتی که اولین بار دستم به کیبورد خورد، ۶ سالم بود. حس جالبی بود؛ زندگیم شده بود ۴ تا کلید WASD روی کیبورد کامپیوتر برای کنترل ماشین. از ۱۰ سالگی که مادرم با فوتوشاپ کار می‌کرد کنارش نشستم و یاد گرفتم. ۱۳ سالم بود که اولین وب‌سایتم رو با پی اچ پی نیوک ایجاد کردم. تا الان وب سایت‌های زیادی رو شروع کردم و شاید به خاطر اینکه هدف تجربه کردن رو داشتم شکست خوردند. موفق‌ترین پروژه شکست خوردم رو می‌تونم اوکسو معرفی کنم که شاید اسمش رو شنیده باشید. الانم دارم کار‌هایی رو شروع می‌کنم چون با خودم عهد کرده بودم که تا بیست سالگی جاهای مختلفی کار کنم و تجربه کنم و بعد از تجربیاتم استفاده کنم. بعد از رسیدن به بیست سالگی خوشحالم که یکی از تجربیات خوبم همکاری با میزفاست و دارم ادامش میدم…
سرفصل های آموزش HTML
پایین سرفصل های HTML هست، روی منم کلیک کنی میتونی ببینی.
فصل ۸ – کار با جدول در HTML

روی فصل بالا کلیک کنید.

ازمون HTML شرکت کن

روی لینک بالا کلیک کن

فیلم آموزشی asp.net core 2

19 نظر

19 پاسخ

  1. سلام, من به یه عکس خاصیت onclick دادم و تو جاوا اسکریپت اومدم با استفاده از document.getElementById همون عکس رو انتخاب کردم که وقتی کلیک شد سایزش تغییر پیدا کنه, و کار هم کرد اما وقتی به جای ایدی از کلاس استفاده کردم کار نکرد همین کد document.getElementByClassName بنظرتون مشکل چی میتونه باشه؟

    1. سلام علیرضا، به جای از Queryselector استفاده کن :

      document.querySelector(“.class”)

      احتمالا مشکلت حل میشه.

  2. سلام برای ایجاد سرصفحه عکس طراحی شده جایگزین کرد در html باید از چه کدی استفاده شود؟ راهنمایی کنید

  3. کافیه فقط صفت عمومی کلاس رو برای هر چند تا تگی که میخوایم کلاساشون یکی باشه به کار ببریم و مقدارشون رو یکسان قرار بدیم برای مثال :

    ببخشید دیگه یکم سخت میشه تگ هارو تو نظرا بست این جواب سواله پایان ترم هستش ممنون بابت این درس!

    1. سلام فرهان، چیزی برامون نیومده متاسفانه.

      اگر میشه از پاسخت عکس بگیر و بفرست.

  4. با معرفی تگ در ابتدای نام مانندcity.h1 برای هر کلاس یک استایل جداگانه تعریف کرد

    1. سلام علی اکبر، درست گفتی جایزه‌ات را به زودی برات شارژ می‌کنیم.

    1. سلام محمد عزیز، درست نوشتی، هدیه‌ات را در میزفا آکادمی دریافت می‌کنی.

  5. پاسخ سوال :
    در ابتدای تگ ها عنوان یا متن از “”=class استفاده میکنیم.

    1. سلام محمد، بله برای استفاده از کلاس ها از این خاصیت استفاده میکنیم ولی برای اینکه یک کلاس رو برای چند تا تگ مختلف یا چند تا جای مختلف استفاده کنیم، فقط کافیه چیکار کنیم؟ خیلی راحته، یه بار دیگه مقاله رو نگاه بنداز.

  6. سلام. من جزوه ناقصی داشتم و واقعا توی درک و فهم معنای class مشکل داشتم و سایت های زیادی رو چک کردم اما جوابم رو نگرفتم و سوالات ذهنم باقی مونده بودن و الان با خوندن این مطلب برای اولین بار بود که به خوبی معنی class رو درک کردم. از آموزش بی نظیرتون سپاسگزارم.

    1. سلام. خوشحالیم از بازخوردت. میتونی اموزش های html و css در میزفا به صورت رایگان ادامه بدی.
      موفق باشی.

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

  7. سلام مرسی از آموزش خوبی که گذاشتین
    یه سوالی داشتم ، چرا وقتی از کد ها که نوشتم ، ران میگیرم صفحه وب من اصلا رنگی نداره و فونت نوشته هام مشکیه در حالی که تو قسمت استایل هم برای بک گراند و هم برای فونت رنگ انتخاب میکنم ولی هیچ اتفاقی نمیوفته. حتی کد های این قسمت از آموزش هم کپی پیس کردم باز اتفاقی نمیوفته . ممنون میشم راهنمایی کنید

    1. سلام نرجس.
      از !important استفاده کن و ببین درست میشه یا نه.

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید. Drop file here

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر