کلاس ها (Classes)
«کلاس (Class)» یک نام برچسبی برای عناصر است. با آن، گروهی از تگ ها را یک جا استایل می دهیم. همچنین، جاوااسکریپت می تواند با نام کلاس، عناصر را پیدا کند. تمرکز ما روی «کلاس در HTML» است.
ویژگی class چیست؟
ویژگی class نام کلاس را روی عنصر می گذارد. سپس CSS و JS از همان نام استفاده می کنند.
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
border: 2px solid black;
margin: 20px;
padding: 20px;
}
</style>
</head>
<body>
<div class="city">
<h2>London</h2>
<p>London is the capital of England.</p>
</div>
<div class="city">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
</div>
<div class="city">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</div>
</body>
</html>
کلاس در تگ های درون خطی (Inline)
می توانی روی <span> هم کلاس بگذاری. سپس متن را متفاوت استایل بده.
<!DOCTYPE html>
<html>
<head>
<style>
.note {
font-size: 120%;
color: red;
}
</style>
</head>
<body>
<h1>My <span class="note">Important</span> Heading</h1>
<p>This is some <span class="note">important</span> text.</p>
</body>
</html>
سینتکس ساخت کلاس (Class Syntax)
در CSS، با نقطه یک کلاس می سازیم. سپس ویژگی ها را داخل {} می نویسیم.
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
</body>
</html>
چند کلاس همزمان (Multiple Classes)
می توانی چند نام کلاس بدهی. بین شان فاصله بگذار. همه استایل ها اعمال می شوند.
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
اشتراک کلاس بین تگ های مختلف
کلاس یکسان روی تگ های متفاوت هم کار می کند. بنابراین، استایل یکپارچه می شود.
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
کلاس در جاوااسکریپت (JavaScript)
با متد getElementsByClassName() عناصر را با نام کلاس می گیریم. سپس رویشان عملیات می زنیم.
<!DOCTYPE html>
<html>
<body>
<div class="city">London</div>
<div class="city">Paris</div>
<button onclick="myFunction()">Hide cities</button>
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
<\/script>
</body>
</html>
سه گام تمرینی
- یک کلاس بساز و پس زمینه بده.
- کلاس را روی چند تگ بگذار.
- با JS همان کلاس را پنهان کن.
نکته: نام کلاس حساس به حروف است. therefore، City با city فرق دارد.
مسیر ادامه یادگیری کلاس
برای ظرف ها، صفحه المان div (Div) را ببین. سپس برای شناسه یکتا، سر بزن به شناسه ها (ID). این دو کنار «کلاس در HTML» عالی هستند.
جمع بندی سریع
- class گروهی از عناصر را هدف می گیرد.
- می توانی چند کلاس را ترکیب کنی.
- کلاس روی هر تگ قابل استفاده است.
- JS با نام کلاس عناصر را می یابد.