ელემენტების კლასები CSS-ში

წინა გაკვეთილებში ჩვენ ვირჩევდით გვერდის ელემენტებს ტეგის სახელის მიხედვით, ვაყენებდით სტილებს, მაგალითად, ყველა აბზაცს ერთდროულად. გვერდზე, თუმცა, შეიძლება არსებობდეს სხვადასხვა ტიპის აბზაცები, რომლებზეც სხვადასხვა სტილების გამოყენებაა საჭირო. ამ პრობლემის გადასაჭრელად შესაძლებელია სხვადასხვა აბზაცების სხვადასხვა CSS კლასებში განთავსება.

იმისთვის, რომ ტეგი რომელიმე კლასს მივაკუთვნოთ, ამ ტეგს უნდა მივუწეროთ ატრიბუტი class, ხოლო მასში - თქვენ მიერ გამოგონილი კლასის სახელი, რომელიც შედგება ასოების, ციფრების, ქვედა ტირეების და დეფისების სიმბოლოებისაგან.

მოდით შევხედოთ მაგალითს. შევქმნათ აბზაცები ორი ტიპის კლასებით - eee და zzz:

<p class="eee">
	paragraph with class eee
</p>
<p class="eee">
	paragraph with class eee
</p>
<p class="zzz">
	paragraph with class zzz
</p>
<p class="zzz">
	paragraph with class zzz
</p>

ახლა კი მივმართოთ CSS-ში სხვადასხვა კლასის მქონე აბზაცებს და მივანიჭოთ მათ რაიმე სტილები. მაგალითად, zzz კლასის მქონე აბზაცები წითელ ფერში გავაფერადოთ, ხოლო eee კლასის მქონე აბზაცები - მწვანე ფერში.

ამისათვის CSS ფაილში საჭიროა მივმართოთ ჩვენს კლასებს. მიბმა აქვს შემდეგი სინტაქსი: ჯერ მოდის წერტილის სიმბოლო, შემდეგ კი ჩვენ მიერ გამოგონილი კლასის სახელი. ანუ eee კლასთან მისამართისათვის საჭიროა დავწეროთ .eee, ხოლო zzz კლასისათვის - დავწეროთ .zzz.

მოდით, გავაკეთოთ აღწერილი. ჩვენს HTML-ს დავუმატოთ აგრეთვე CSS სტილები ჩვენ მიერ შექმნილი კლასებისათვის:

.eee {
	color: green;
}
.zzz {
	color: red;
}

თუ ჩვენს კოდს გავუშვებთ, შედეგად მივიღებთ შემდეგს:

მოცემულია შემდეგი კოდი:

<ul>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
	<li class="odd">text</li>
	<li class="eve">text</li>
</ul>

გააფერადეთ წითელ ფერში ელემენტები odd კლასით და მწვანე ფერში - ელემენტები eve კლასით.

მოცემულია შემდეგი კოდი:

<h2 class="eee">Title</h2>
<p class="eee">
	paragraph
</p>
<p class="eee">
	paragraph
</p>
<p>
	paragraph without class
</p>

<ul class="eee">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

გააფერადეთ წითელ ფერში ყველა ელემენტი eee კლასით.

ახსენით, რატომ იღებენ წინა ამოცანაში li ტეგები წითელ ფერს, მიუხედავად იმისა, რომ ფერს განმსაზღვრელი კლასი მინიჭებულია ul ტეგს.