კლასები და აიდები HTML, CSS-ში

დღევეანდელი ვებ პროგრამირების გაკვეთილი შეეხება HTML-სა და CSS-ში class და id ატრიბუტების გამოყენებას

რა არის კლასი HTML-ში?

პიველ რიგში ვისაუბროთ HTML-ში ყველაზე გამოყენებად ატრიბუტზე, რომელსაც ქვია კლასი

მაგალითი:

<h1 class="red">Hello World!</h1>

როგორც მაგალითში ვხედავთ <h1> სელექტორს აქვს ატრიბუტი class რომელსაც აქვს მნიშვნელობა red.

კლასების შემთხვევაში შეგვიძლია 1 class ატრიბუტში გვქონდეს რამდენიმე კლასი შენახული

მაგალითი:

<h1 class="red bold">Hello World!</h1>

ასევე 1 კლასი შეგვძლია რამდენჯერმე გამოვიყენოთ დოკუმენტში.

როგორ გავსტილოთ ელემენტი CSS-ით class ატრიბუტის მიხედვით?

იმისთვის რომ ვიმოქმედოთ კლასის მიხედვით კონკრეტულ ელემენტზე საჭიროა გამოვიყენოთ .

მაგალითი:

.red {
  color: red;
}

მოეცმულ მაგალითის გამოყენებით ელემენტებს რომლებსაც აქვთ red კლასი ტექსტის ფერი ექნებათ წითელი

მაგალითი:

<h1 class="red">Hello World!</h1>
<p class="red">
  Lorem ipsum dolor sit amet...
</p>

რა არის id ატრიბუტი HTML-ში?

id ატრიბუტი class ატრიბუტისგან განსხვავებით აუცილებლია დოკუმენტში გამოვიყენოთ უნიკლურად მხოლოდ 1 მნიშვნელობით, მაგალითად  თუ გვაქვს <h1 id="orange>Hello World!</h1> მსგავსი მნიშვნელობის id ატრიბუტი აღარ შეიძლება გამეორდეს დოკუმენტში.

როგორ გავსტილოთ ელემენტი CSS-ით id ატრიბუტის მიხედვით?

იმისთვის რომ ვიმოქმედოთ კლასის მიხედვით კონკრეტულ ელემენტზე საჭიროა გამოვიყენოთ #

#orange {
  color: orange;
}

 

მნიშვნელოვანი ინფორმაცია

კლასები და აიდები არ შეიძლება იწყებოდეს რიცხვებით ანუ class="1red" ან id="1orange"