WEBVTT

00:00:00.326 --> 00:00:02.079
შევხედოთ ჩვენს ვებგვერდს.

00:00:02.284 --> 00:00:04.540
მას აქვს ზედა სათაურები,

00:00:04.540 --> 00:00:07.581
პარაგრაფი რომელიც აღწერს კურდღლებს,

00:00:07.581 --> 00:00:10.588
რეალურად, რამდენიმე პარაგრაფი,

00:00:10.588 --> 00:00:13.416
ჩემი საყვარელი სიმღერის
ტექსტით კურდღლებზე.

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

00:00:17.857 --> 00:00:21.016
რადგან ახლა ტექსტების
რამდენიმე პარაგრაფი გვაქვს,

00:00:21.016 --> 00:00:24.613
მინდა ყველა მათგანს
მივანიჭოთ ყვითელი ფონი.

00:00:24.613 --> 00:00:28.221
როგორ მოვახერხოთ ეს
ჩვენი ახლანდელი ცოდნით?

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

00:00:33.002 --> 00:00:34.659
როგორც 'p' მომნიშვნელით,

00:00:34.886 --> 00:00:39.120
მაგრამ ამით ყველა პარაგრაფი შეიღება და
არა მხოლოდ ტექსტიანი პარაგრაფები.

00:00:39.226 --> 00:00:41.290
გვჭირდება რამე უფრო კონკრეტული.

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

00:00:44.898 --> 00:00:48.140
მაგალითად, პარაგრაფის არჩევა, რომელშიც
"სიმღერა კურდღელზე" შედის,

00:00:48.368 --> 00:00:50.920
მაგრამ ამან მხოლოდ
პირველი პარაგრაფი მონიშნა.

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

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

00:00:57.867 --> 00:01:00.202
რომ ვდომებოდა სხვა პარაგრაფის არჩევა,

00:01:00.202 --> 00:01:02.881
მოგვიწევდა
თითოეულისთვის ახალი ID-ს მიცემა.

00:01:02.881 --> 00:01:05.717
(მაგალითად "სიმღერის-ტექსტი2"
და "სიმღერის-ტექსტი3"),

00:01:05.717 --> 00:01:07.458
რადგან ყველა ID უნიკალური უნდა იყოს.

00:01:07.458 --> 00:01:09.808
შემდეგ კი თითოეულისთვის
წესების დამატებაა საჭირო.

00:01:09.808 --> 00:01:12.398
შეგვიძლია ეს ვქნათ.
მაგრამ ეს ბევრი სამუშაოა!

00:01:12.398 --> 00:01:14.691
თან, ყოველ ჯერზე
სიმღერისთვის ტაეპის დამატება

00:01:14.691 --> 00:01:17.279
ახალი ID-ს და HTML-ს დამატებას ნიშნავს,

00:01:17.279 --> 00:01:19.168
ახალი ID-სა და CSS-ის წესების დამატებას

00:01:19.168 --> 00:01:22.830
და ასობით ტაეპის დამატება
უკვე გადამღლელი გახდება.

00:01:22.980 --> 00:01:24.315
გამოიცანით რას ვიზამთ.

00:01:24.492 --> 00:01:27.383
არსებობს უკეთესი გზა,
რომელსაც "კლასები" ეწოდება.

00:01:27.599 --> 00:01:32.162
კლასი ფაქტობრივად კონკრეტული ჯგუფისთვის
ელემენტის მინიჭებას ნიშნავს.

00:01:32.162 --> 00:01:35.150
შეგიძლია ჯგუფს იმდენი ელემენტი
მიანიჭო, რამდენიც მოგესურვება.

00:01:35.352 --> 00:01:39.928
კლასის დასამატებლად საჭიროა კლასის
ატრიბუტის დამატება, როგორც ID-ებისთვის.

00:01:40.362 --> 00:01:44.705
პირველ რიგში წავშალოთ
ეს რადგან შეცვლას ვაპირებთ.

00:01:44.705 --> 00:01:47.915
ახლა გვაქვს კურსორი საწყის '' tag-ში.

00:01:47.915 --> 00:01:53.183
დავამატებ გამოტოვებულ
ადგილს და დავწერ: class = "

00:01:53.183 --> 00:01:56.927
ახლა კლასის სახელი უნდა მოვიფიქრო,
რომელიც კლასს კარგად აღწერს.

00:01:56.927 --> 00:01:59.294
მოდი დავარქვათ "სიმღერის-ტექსტი".

00:01:59.658 --> 00:02:01.449
ესეც ასე.

00:02:01.665 --> 00:02:04.335
რა ელემენტები უნდა
ჰქონდეს ამ კლასის სახელს?

00:02:04.416 --> 00:02:06.420
უნდა შედიოდეს ყველა სხვა პარაგრაფი.

00:02:06.510 --> 00:02:13.061
ამიტომ ჩავიდეთ ქვემოთ და დავამატოთ
ატრიბუტი თითოეულ პარაგრაფის კლასს.

00:02:13.061 --> 00:02:14.540
("სიმღერის-ტექსტი")

00:02:14.836 --> 00:02:18.003
მშვენიერია. ახლა მზად ვართ
CSS წესის დასამატებლად.

00:02:18.217 --> 00:02:26.157
დავუბრუნდეთ '' tag-ს და წავშალოთ
id მნიშვნელი რადგან მას ვცვლით.

00:02:26.157 --> 00:02:28.594
ახლა კი კლასის მნიშვნელი უნდა მოვიფიქროთ.

00:02:28.931 --> 00:02:34.039
კლასის მნიშვნელის
დასაწყებად ვიყენებთ წერტილს.

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

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

00:02:47.821 --> 00:02:51.007
ახლა ყველა ტექსტს ყვითელი ფონი აქვს.

00:02:51.343 --> 00:02:55.143
რა მოხდება აქ თუ s-ს დიდად დავწერთ?

00:02:55.240 --> 00:02:56.398
არ მუშაობს.

00:02:56.491 --> 00:02:58.950
ეს იმიტომ, რომ კლასის
სახელები case-sensitive არის.

00:02:58.966 --> 00:03:01.771
მნიშვნელობა აქვს რომელი ასო
იქნება დიდი და რომელი პატარა,

00:03:01.771 --> 00:03:03.558
როგორც ID-ების შემთხვევაში.

00:03:04.323 --> 00:03:08.295
რა მოხდება თუ წერტილის
მაგივრად #-ს გამოვიყენებთ?

00:03:08.542 --> 00:03:09.666
არ იმუშავებს.

00:03:09.774 --> 00:03:13.085
იმიტომ, რომ ბრაუზერი
"სიმღერის-ტექსტი"-ს ID-იდ აღიქვამს

00:03:13.085 --> 00:03:18.471
და ვერაფერს იპოვის სიმღერის
ტექსტებში ამ id ატრიბუტით.

00:03:18.471 --> 00:03:24.512
რა მოხდება თუ კლასის სახელებს შორის
გამოტოვებული ადგილები ჩავსვით?

00:03:25.248 --> 00:03:30.192
არც ეს იმუშავებს, რადგან თავისუფალი
სივრცე არ უნდა გვქონდეს.

00:03:30.192 --> 00:03:31.649
ამას მოგვიანებით შევხვდებით.

00:03:31.649 --> 00:03:34.972
თავისუფალი სივრცე
CSS-ში სპეციფიურ რამეს ნიშნავს.

00:03:35.868 --> 00:03:38.776
-- დავაბრუნოთ როგორც იყო --

00:03:39.523 --> 00:03:41.110
კიდევ ერთხელ:

00:03:41.110 --> 00:03:43.387
როცა გვსურს კლასის დამატება,

00:03:43.387 --> 00:03:45.589
უნდა მოვიფიქროთ კლასის სახელი,

00:03:45.589 --> 00:03:49.000
დავამატოთ HTML-ში კლასის ატრიბუტებში,

00:03:49.248 --> 00:03:51.317
შემდეგ ვწერთ სტილის წესს,

00:03:51.317 --> 00:03:54.691
ვიწყებთ წერტილით,
შემდეგ კი კლასის სახელით.

00:03:55.216 --> 00:03:58.428
ახლა შენი CSS
გაცილებით უკეთესი სტილისაა!