ამ ვებგვერდზე ჩვენ ვიყენებთ CSS-ს,

რომ შევცვალოთ -ი და აბზაცები ისე, რომ

ყოველი  იყოს მწვანე
და ყოველი აბზაცი იისფერი.

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

ან მხოლოდ მეორე აბზაცისთვის?

ჩვენ უნდა მოვიფიქროთ თუ როგორ მივუთითოთ
ბრაუზერს ზუსტად ის ელემენტები,

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

ამის ერთ-ერთი ხერხი არის ID-ს მითითება.

ჩვენ შეგვიძლია დავთაგოთ ჩვენს გვერდზე
უნიკალური ID, შემდეგ კი მივუთითოთ CSS-ს

რომ გვინდა მხოლოდ ამ ელემენტის
შეცვლა და არა ყველა მათგანის.

ამის გასაკეთებლად პირველი ნაბიჯია
HTML-ის შეცვლა ისე, რომ

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

მოდი, დავიწყოთ მეორე აბზაცით.

ID-ს თვისების დასამატებლად, მიგვაქვს
კურსორი  თეგის დასაწყისში

p-ს გვერდზე, შემდეგ ვტოვებთ
ადგილს და ვწერთ:

id = "

ახლა ჩვენ უნდა შევავსოთ ID თვისება
მნიშნველობით.

რომელი ID უნდა მივცე?

ID უნდა იყოს აზრიანი და უნიკალური.

ამ გვერდზე არაფერს არ უნდა ჰქონდეს
იგივე ID.

რადგან ეს რეალურად სიმღერაა კურდღლების
შესახებ, დავარქვათ rabbits-song.

ჩვენ შეგვიძლია ადგილები გამოვტოვოთ
ID-ში და რამდენიმე სიტყვა ჩავწეროთ.

ასევე შეგვიძლია დეფისების ან
ქვედა ტირეს გამოყენება.

მე პირადად მომწონს დეფისები.

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

შესაბამისად შეგვიძლია CSS-ს
ზუსტად მივუთითოთ იგი.

ახლა დავუბრუნდეთ ჩვენს  თეგს
მეორე ნაბიჯისთვის.

დავამატოთ ახალი ხაზი,
ბოლო წესის შემდეგ.

დაიმახსოვრეთ, პირველი ნაწილი
CSS-ის წესის არის მიმთითებელი:

ნაწილი, რომელიც ეუბნება ბრაუზერს
თუ რას ვუთითებთ.

ჩვენს წინა წესებში, ჩვენ გამოვიყენეთ
მიმთითებლები  და ,

რომ მიგვეთითებინა ყველ  და 
გვერდზე.

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

მიმთითებელი იწყება დიეზით, ეს ეუბნება
ბრაუზერს, რომ მის შემდეგ ID დაიწერება.

ახლა დავწეროთ ჩვენი ID.
rabbits-song.

წესის დარჩენილი ნაწილი იგივეა, რასაც
ვიყენებდით.

ვხსნით და ვხურავთ ფიგურულ ფრჩხილს.

ვაბატებთ, თვისებას, მაგალითად ფონის ფერს.

და ისიც მუშაობს!

მხოლოდ სიმღერის აბზაცს აქვს ყვითელი ფონი.

პირველი აბზაცის ფონი კი იგივე დარჩა.

მოდი, ისევ გავაკეთოთ, პირველი -სთვის
მაგალითად.

გახსოვთ პირველი ნაბიჯი?

სწორია, ჯერ უნდა შევცვალოთ HTML,
რომ მივუთითოთ 'id' თვისება.

მიგვაქვს კურსორი თეგის დასაწყისში, 
ვტოვებთ ადგილს და ვწერთ

id =

შემდეგ ვწერთ უნიკალურ და აზრიან ID-ს.

მაგალითად, "rabbits-info-heading".

ახლა მეორე ნაბიჯი.
დავბრუნდეთ ჩვენს სტილის თეგში

დავამატოთ ახალი ხაზი,
დავწეროთ დიეზი, შემდეგ ჩვენი ID

rabbits-info-Heading და ჩავსვათ ჩვენი
თვისება ფიგურულ ფრჩხილებში

{background-color: purple; 
}

მაგრამ, ამჯერად არ იმუშავა.
რა შემეშალა?

იმავე ნაირად დავწერე?

rabbits-info-Heading
rabbits-info-heading

ძალიან გვანან ერთმანეთს, მაგრამ, მოდით,
ასო-ასო შევადაროთ, რომ გავიგოთ რა ხდება.

მაგრამ ახლა უბრალოდ ქვევით ჩავალ
და ID-ს მივუთითებ HTML-ში

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

ახლა კი მუშაობს!

ჩემს -ს აქვს ფონი.
მიხვდით რა შეიცვალა?

შეიძლება მიხვდით, ჩვენ გვეწერა H,
უნდა დაგვეწერა h,

ბრაუზერი მათ ერთნაირად ვერ აღიქვამს.

უნდა ყოფილიყო h, რომ დამთხვეოდა HTML-ს.

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

ყოველ ჯერზე იდენტურად უნდა გეწეროთ.

მაგალითად, მე ყოველთვის პატარა
ასოებით ვწერ ID-ს, შემდეგ

რომ არ დავიწყო ფიქრი დიდი ასო
გამოვიყენე თუ პატარა.

ახლა საბოლოო გაფრთხილებას მოგცემთ.

ID უნდა იყოს უნიკალური!

თუ გექნებათ ორი თეგი ვებგვერდზე
იდენტური ID-თი,

ბრაუზერმა შეიძლება ორივე შეცვალოს,
ან არც ერთი.

თქვენ მგონი არ გინდათ ეს რომ მოხდეს.

უნიკალური და აზრიანი ID.