Klasslar
HTMLning class atributi HTML elementlarini sinflarga ajratish uchun ishlatiladi. Bir nechta elementlar bir xil class nomga ega bo'lishi mumkin.
Class ni sinf deb atash o'zbek dasturchilar o'rtasida tarqalmagani va o'zbek auditoriyasida ham class deb tanilgani sababli mavzularni tarjima qilishda sinf so'zi ishlatimaydi.
class
attributidan foydalanish
class
attributidan foydalanishClass atributi ko'pincha CSS-da class nomini ko'rsatish uchun ishlatiladi. Bundan tashqari, u class-ga ega elementlarga JavaScript orqali tasir qilish va ularni boshqarish uchun ishlatilishi mumkin.
Quyida "city
" nomli class atributlari mavjud bo'lgan 3ta <div>
elementini misol qilib keltirdik. Barcha 3-ta <div>
elementlarining stillari <head>
qismdagi city
ga berilgan stillarga teng bo'ladi.
<!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>
Quyida "note" nomli class atributlari mavjud bo'lgan 2ta <span>
elementini misol qilib keltirdik. Barcha 2-ta <span>
elementlarining stillari <head> qismdagi .note
ga berilgan stillarga teng bo'ladi.
<!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>
Maslahat: class
atributidan har qanday HTML elementida foydalanish mumkin.
Eslatma: Class nomi katta kichik harfga qarab farq qiladi
Maslahat: Bizning CSS o'quv qo'llanmamiz orqali CSS hqida ko'proq narsa o'rganishingiz mumkin
Class uchun sintaksis
CSS orqali class
ga murojaat qilish uchun (.) nuqtadan keyin class nomini yozing keyin jingalak {} qavslar ichida CSS xususiyatlarini berishingiz mumkin.
<!DOCTYPE html>
<html>
<head>
<style>
.city {
background-color: tomato;
color: white;
padding: 10px;
}
</style>
</head>
<body>
<h2 class="city">London</h2>
<p>London is the capital of England.</p>
<h2 class="city">Paris</h2>
<p>Paris is the capital of France.</p>
<h2 class="city">Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
</body>
</html>
Bir nechta classlar
HTML elementlari bir nechta classlarga ega bo'lishi mumkin.
Bir nechta class berish uchun class nomlarini bo'sh joy bilan ajratib yozing, misol uchun <div class="city main">
. Element o'ziga berilgan barcha classlarga tegishli stillarni oladi.
Ushbu misoldagi bitinchi <h2>
elementi city
hamda main
classlariga ega va u ikkala classga berilgan stillarni ham oladi:
<h2 class="city main">London</h2>
<h2 class="city">Paris</h2>
<h2 class="city">Tokyo</h2>
Turli elementlar bir xil classga ega bo'la oladi
Ushbu misoldagi <h2>
va <p>
elementlari "city" nomli bir xil class-ga va bir xil stillga ega bo'lishadi:
<h2 class="city">Paris</h2>
<p class="city">Paris is the capital of France</p>
Javascriptda class atributidan foydalanish
Class nomlari JavaScript orqali ma'lum bir elementlar ustida turli vazifalarni amalga oshirish uchun ham ishlatilishi mumkin.
JavaScriptning getElementsByClassName()
metodi orqali ma'lum bir classga ega elementlarga tasir o'tkazishi mumkin:
<script>
function myFunction() {
var x = document.getElementsByClassName("city");
for (var i = 0; i < x.length; i++) {
x[i].style.display = "none";
}
}
</script>
Xulosa
HTMLning
class
atributi element uchun bir yoki bir nechta class nomini belgilaydiClasslar CSS va Javascript orqali elementlarni tanlash va ularni boshqarish uchun ishlatiladi
Istalgan HTML elementda
class
atributidan foydalanish mumkinClass nomi, harfning katta kichikligiga qarab farq qiladi
Turli HTML elementlari bir xil class nomiga ega bo'lishi mumkin
JavaScriptning
getElementsByClassName()
metodi orqali ma'lum bir classga ega elementlarga murojaat qilish mumkin
Last updated