ატრიბუტი class

ატრიბუტი class აზუსტებს ერთ ან რამდენიმე კლასს ელემენტისთვის (ელემენტში უგულებელყოფილია თეგი).

ეს კეთდება იმისთვის, რომ შემდგომში მივმართოთ CSS-ის მეშვეობით ელემენტების ჯგუფს, რომლებსაც აქვთ მინიჭებული ერთი და იგივე კლასი და გამოვიყენოთ მისთვის განსაზღვრული თვისებები (მაგალითად, შევცვალოთ ტექსტის ფერი, შრიფტის ზომა და ა.შ.).

ასევე არსებობს ატრიბუტი id, რომელიც ატრიბუტ class-ის მსგავსად საშუალებას აძლევს აირჩიოს ელემენტები HTML გვერდზე.

სხვაობა ატრიბუტ class-სა და ატრიბუტ id-ს შორის ისაა, რომ class ირჩევს ელემენტების ჯგუფს (მაშინაც კი, თუ ის მიცემულია ერთ ელემენტს - მას შემდგომში შეიძლება მივცეთ მეორესაც), ხოლო id ირჩევს უნიკალურ ელემენტს (საიტის გვერდზე მეტი ელემენტი ამ იდენტიფიკატორით არ უნდა იყოს, წინააღმდეგ შემთხვევაში იქნება კონფლიქტი).

როგორ გავიგოთ, რა მივცეთ ელემენტს - კლასი თუ id? კლასი ენიჭება იმ ელემენტებს, რომლებიც მეორდება საიტის გვერდებზე (რათა არ დავწეროთ ერთი და იგივე CSS კოდი რამდენჯერმე). მაშინაც კი, თუ თქვენს ამჟამინდელ გვერდზე ეს ელემენტი მხოლოდ ერთია, მაგრამ თქვენ გრძნობთ, რომ მსგავსი ელემენტები შეიძლება გამოჩნდეს შემდგომში - მიეცით ამ ელემენტს კლასი. თუ კი დარწმუნებული ხართ, რომ ასეთი ელემენტი უნიკალურია - მაშინ მიეცით მას id. თუმცა, დღესდღეობით არსებობს ტენდენცია, რომ ყველა ელემენტს მიენიჭოს კლასი, ხოლო id დარჩეს JavaScript-ისთვის, მაგრამ ის უნივერსალურად მიღებული არ არის.

ელემენტს შეიძლება მივანიჭოთ რამდენიმე კლასი, ამ შემთხვევაში ისინი უნდა განვცალკევოთ სფეისით (შუა ადგილი).

კლასების სახელები უნდა იყოს აკრეფილი ინგლისური ასოებით, ციფრებით, სფეისების გარეშე (სფეისი ყოფს კლასებს ერთმანეთისგან, მის ნაცვლად შეიძლება გამოვიყენოთ ქვედა ტირე ან დეფისი). კლასები არ უნდა იწყებოდეს ციფრით (HTML5-ში უკვე შეიძლება, მაგრამ ძველ ბრაუზერებში არ იმუშავებს).

კლასების სახელები უნდა იყოს ინგლისურ ენაზე (და არა რუსულად, უბრალოდ ინგლისური ასოებით!). სახელები უნდა იყოს მნიშვნელოვანი, რომელიც ასახავს კლასის არსს.

მაგალითი

მივცეთ ყველა აბზაცს კლასით test ტექსტის წითელი ფერი:

<p class="test">აბზაცი კლასით test.</p>
<p>საკონტროლო აბზაცი კლასის გარეშე.</p>

.test {
	color: red;
}

მაგალითი . რამდენიმე კლასი ელემენტისთვის

აქ კი მივცეთ პირველ აბზაცს რამდენიმე კლასი - test1 და test2 (დავწეროთ ისინი სფეისით გამოყოფილი). კლასი test1 აზუსტებს ტექსტის წითელ ფერს, ხოლო კლასი test2 აზუსტებს შრიფტის ზომას 20px-ზე. მეორე აბზაცს მიცემულია მხოლოდ კლასი test1 (ეს აბზაცი გახდება წითელი), ხოლო მესამე აბზაცს - კლასი test2 (ამ აბზაცს ექნება შრიფტის ზომა 20px-ზე). პირველი აბზაცი, რომელსაც ორი კლასი აქვს, ექნება ერთდროულად და წითელი ფერი და შრიფტის ზომა 20px-ზე:

<p class="test1 test2">აბზაცი ორი კლასით test1 და test2.</p>
<p class="test1">აბზაცი კლასით test1.</p>
<p class="test2">აბზაცი კლასით test2.</p>
<p>საკონტროლო აბზაცი კლასების გარეშე.</p>

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

იხილეთ აგრეთვე

ატრიბუტი id,
რომელიც აზუსტებს ელემენტების უნიკალურ იდენტიფიკატორებს