-
ამ ვებგვერდზე ჩვენ ვიყენებთ 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.