برای استایل دهی و سفارشی سازی تگ های 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>
برای معرفی کلاس‌ها در آموزش 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>نتیجه گیری
در این مقاله با انواع کلاس ها آشنا شدیم :
- استفاده از یک کلاس برای یک تگ
- استفاده از یک کلاس برای چند تگ با امکان شخصی سازی بر اساس تگ
- استفاده از چند کلاس هم زمان
- استفاده از کلاس در جاوا اسکریپت
خب این مقاله هم از سری مقاله های آموزش HTML به پایان رسید. در جلسه بعدی در رابطه با آی دی ها صحبت خواهیم کرد. اگر سوال یا پیشنهادی داشتین حتما با ما از هر طریقی میتونید به اشتراک بزارید :))). تا جلسه بعد …
padding معنای مساحت رو در اینجا میده؟
سلام حمید رضا ، معنی مساحت رو که نه نمیده ، فضای درونی برای هر تگ ایجاد میکنه.
پیشنهاد من اینه مقاله آشنایی با Padding در CSS یک نگاه بندازی ، البته که فقط یک نگاه کوچیک تا متوجه منظور بشی.
ممنون از مطالب خوبتون عالی بود
سلام مرسی از آموزش خوبی که گذاشتین
یه سوالی داشتم ، چرا وقتی از کد ها که نوشتم ، ران میگیرم صفحه وب من اصلا رنگی نداره و فونت نوشته هام مشکیه در حالی که تو قسمت استایل هم برای بک گراند و هم برای فونت رنگ انتخاب میکنم ولی هیچ اتفاقی نمیوفته. حتی کد های این قسمت از آموزش هم کپی پیس کردم باز اتفاقی نمیوفته . ممنون میشم راهنمایی کنید
سلام نرجس.
از
!importantاستفاده کن و ببین درست میشه یا نه.