შევხედოთ ჩვენს ვებგვერდს.

მას აქვს ზედა სათაურები,

პარაგრაფი რომელიც აღწერს კურდღლებს,

რეალურად, რამდენიმე პარაგრაფი,

ჩემი საყვარელი სიმღერის
ტექსტით კურდღლებზე.

ბოლოს პირველი სიმღერის ტექსტის
პარაგრაფი id-ს გამოყენებით შევქმენით.

რადგან ახლა ტექსტების
რამდენიმე პარაგრაფი გვაქვს,

მინდა ყველა მათგანს
მივანიჭოთ ყვითელი ფონი.

როგორ მოვახერხოთ ეს
ჩვენი ახლანდელი ცოდნით?

პირველი რაც ვისწავლეთ, იყო
ყველა მსგავსი ტიპის tag-ის მონიშვნა,

როგორც 'p' მომნიშვნელით,

მაგრამ ამით ყველა პარაგრაფი შეიღება და
არა მხოლოდ ტექსტიანი პარაგრაფები.

გვჭირდება რამე უფრო კონკრეტული.

შემდეგ, ვისწავლეთ tag-ების
კონკრეტული id-ებით მონიშვნა,

მაგალითად, პარაგრაფის არჩევა, რომელშიც
"სიმღერა კურდღელზე" შედის,

მაგრამ ამან მხოლოდ
პირველი პარაგრაფი მონიშნა.

ამ id-ს დამატება არცერთ
პარაგრაფზე არ შეგვიძლია,

რადგან უფლება არ გვაქვს ერთი და
იმავე id რამდენიმე tag-ზე გამოვიყენოთ.

რომ ვდომებოდა სხვა პარაგრაფის არჩევა,

მოგვიწევდა
თითოეულისთვის ახალი ID-ს მიცემა.

(მაგალითად "სიმღერის-ტექსტი2"
და "სიმღერის-ტექსტი3"),

რადგან ყველა ID უნიკალური უნდა იყოს.

შემდეგ კი თითოეულისთვის
წესების დამატებაა საჭირო.

შეგვიძლია ეს ვქნათ.
მაგრამ ეს ბევრი სამუშაოა!

თან, ყოველ ჯერზე
სიმღერისთვის ტაეპის დამატება

ახალი ID-ს და HTML-ს დამატებას ნიშნავს,

ახალი ID-სა და CSS-ის წესების დამატებას

და ასობით ტაეპის დამატება
უკვე გადამღლელი გახდება.

გამოიცანით რას ვიზამთ.

არსებობს უკეთესი გზა,
რომელსაც "კლასები" ეწოდება.

კლასი ფაქტობრივად კონკრეტული ჯგუფისთვის
ელემენტის მინიჭებას ნიშნავს.

შეგიძლია ჯგუფს იმდენი ელემენტი
მიანიჭო, რამდენიც მოგესურვება.

კლასის დასამატებლად საჭიროა კლასის
ატრიბუტის დამატება, როგორც ID-ებისთვის.

პირველ რიგში წავშალოთ
ეს რადგან შეცვლას ვაპირებთ.

ახლა გვაქვს კურსორი საწყის '' tag-ში.

დავამატებ გამოტოვებულ
ადგილს და დავწერ: class = "

ახლა კლასის სახელი უნდა მოვიფიქრო,
რომელიც კლასს კარგად აღწერს.

მოდი დავარქვათ "სიმღერის-ტექსტი".

ესეც ასე.

რა ელემენტები უნდა
ჰქონდეს ამ კლასის სახელს?

უნდა შედიოდეს ყველა სხვა პარაგრაფი.

ამიტომ ჩავიდეთ ქვემოთ და დავამატოთ
ატრიბუტი თითოეულ პარაგრაფის კლასს.

("სიმღერის-ტექსტი")

მშვენიერია. ახლა მზად ვართ
CSS წესის დასამატებლად.

დავუბრუნდეთ '' tag-ს და წავშალოთ
id მნიშვნელი რადგან მას ვცვლით.

ახლა კი კლასის მნიშვნელი უნდა მოვიფიქროთ.

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

შემდეგ ვწერთ კლასის
სახელს: სიმღერის-ტექსტი,

და როგორც ყოველთვის: ფიგურილი ფრჩხილები,
თვისება, წერტილმძიმე, მნიშვნელობა.

ახლა ყველა ტექსტს ყვითელი ფონი აქვს.

რა მოხდება აქ თუ s-ს დიდად დავწერთ?

არ მუშაობს.

ეს იმიტომ, რომ კლასის
სახელები case-sensitive არის.

მნიშვნელობა აქვს რომელი ასო
იქნება დიდი და რომელი პატარა,

როგორც ID-ების შემთხვევაში.

რა მოხდება თუ წერტილის
მაგივრად #-ს გამოვიყენებთ?

არ იმუშავებს.

იმიტომ, რომ ბრაუზერი
"სიმღერის-ტექსტი"-ს ID-იდ აღიქვამს

და ვერაფერს იპოვის სიმღერის
ტექსტებში ამ id ატრიბუტით.

რა მოხდება თუ კლასის სახელებს შორის
გამოტოვებული ადგილები ჩავსვით?

არც ეს იმუშავებს, რადგან თავისუფალი
სივრცე არ უნდა გვქონდეს.

ამას მოგვიანებით შევხვდებით.

თავისუფალი სივრცე
CSS-ში სპეციფიურ რამეს ნიშნავს.

-- დავაბრუნოთ როგორც იყო --

კიდევ ერთხელ:

როცა გვსურს კლასის დამატება,

უნდა მოვიფიქროთ კლასის სახელი,

დავამატოთ HTML-ში კლასის ატრიბუტებში,

შემდეგ ვწერთ სტილის წესს,

ვიწყებთ წერტილით,
შემდეგ კი კლასის სახელით.

ახლა შენი CSS
გაცილებით უკეთესი სტილისაა!