Atribut class

Atribut class element üçün (element dedikdə teq nəzərdə tutulur) bir və ya bir neçə sinif təyin edir.

Bu, daha sonra eyni sinfi təyin olunmuş elementlər qrupuna CSS vasitəsilə müraciət etmək və onun üçün müəyyən xassələri tətbiq etmək üçün edilir (məsələn, mətnin rəngini, şriftin ölçüsünü dəyişmək və s.).

Həmçinin atribut id də var, hansı ki, class atributu kimi HTML səhifəsində elementləri seçməyə imkan verir.

class atributu ilə atribut id arasındakı fərq ondadır ki, class elementlər qrupunu seçir (hətta o, bir elementə verildikdə belə - sonradan onu başqa bir elementə də vermək olar), id isə unikal elementi seçir (saytın səhifəsində belə id-yə malik başqa element olmamalıdır, əks halda konflikt yaranacaq).

Elementə nə verməli olduğunu - sinif və ya id-ni necə başa düşmək olar? Saytın səhifələrində təkrarlanan elementlərə sinif verilir (eyni CSS kodunu bir neçə dəfə yazmamaq üçün). Hətta hazırda bu element tək olsa belə, amma siz hiss edirsiniz ki, oxşar elementlər gələcəkdə peyda ola bilər - bu elementə sinif verin. Əgər siz əminsinizsə ki, belə element unikaldır - onda ona id verin. Baxmayaraq ki, hazırda bütün elementlərə sinif vermək, id-ni isə JavaScript üçün saxlamaq meyli var, amma bu, ümumi qəbul edilmiş deyil.

Elementə bir neçə sinif vermək olar, bu halda onlar boşluqla ayrılmalıdır.

Siniflərin adları ingilis hərfləri, rəqəmlərlə, boşluqsuz yazılmalıdır (boşluq sinifləri bir-birindən ayırır, onun yerinə altdan xətt və ya defisdən istifadə etmək olar). Siniflər rəqəmlə başlamamalıdır (HTML5-də artıq olar, amma köhnə brauzerlərdə işləməyəcək).

Siniflərə adlar ingilis dilində verilməlidir (rus dilində deyil, sadəcə ingilis hərfləri ilə!). Adlar mənalı olmalı, sinfin mahiyyətini əks etdirməlidir.

Nümunə

Gəlin test sinfi olan bütün abzaslara qırmızı mətn rəngi təyin edək:

<p class="test">test sinifli abzas.</p>
<p>Sinifsiz kontrol abzası.</p>

.test {
	color: red;
}

Nümunə . Element üçün bir neçə sinif

Burada isə gəlin birinci abzasa bir neçə sinif təyin edək - test1 və test2 (onları boşluqla yazaq). test1 sinfi qırmızı mətn rəngi təyin edir, test2 sinfi isə şriftin ölçüsünü 20px təyin edir. Ikinci abzasa sadəcə test1 sinfi verilib (bu abzas qırmızı olacaq), üçüncü abzasa isə test2 sinfi verilib (bu abzasın şrift ölçüsü 20px olacaq). Iki sinfi olan ilk abzas eyni zamanda həm qırmızı rəngə həm də 20px şrift ölçüsünə malik olacaq:

<p class="test1 test2">test1 və test2 sinifli iki sinifli abzas.</p>
<p class="test1">test1 sinifli abzas.</p>
<p class="test2">test2 sinifli abzas.</p>
<p>Sinifsiz kontrol abzası.</p>

.test1 {
	color: red;
}
.test2 {
	font-size: 20px;
}

Həmçinin bax

atribut id,
hansı ki, elementlərə unikal identifikatorlar təyin edir