WEBVTT

00:00:00.809 --> 00:00:05.432
შევეშვათ დონატებს და გადავიდეთ სტაფილოზე,
მსოფლიოში ყველაზე ჯანსაღ საკვებზე

00:00:05.432 --> 00:00:07.901
და კურდღლების უსაყვარლეს
კერძზე

00:00:07.901 --> 00:00:10.534
იცოდით, რომ სტაფილო არ არის
მხოლოდ სტაფილოსფერი?

00:00:10.534 --> 00:00:13.535
თავდაპირველად სტაფილო იასამნისფერი იყო.
ზოგი ახლაც არის.

00:00:13.535 --> 00:00:19.541
ესაა მოკლე ვებ–გვერდი, სადაც ჩამოვთვალეთ
სტაფილოს ფერები და მოკლე ისტორია.

00:00:19.541 --> 00:00:25.267
იმისთვის, რომ ყოველი ფერის სახელი იმავე 
ფერის იყოს, გამოვიყენეთ კლასები.

00:00:25.267 --> 00:00:31.905
მომწონს, როგორ გამოიყურება სტილები სიაში,
მაგრამ ტექსტში გამოყოფილ იასამნისფერში დარწმუნებული არ ვარ

00:00:31.905 --> 00:00:36.215
მგონი, სჯობს ფონს შევეშვა და უფრო სადა
შეფერილობას მივმართო.

00:00:36.215 --> 00:00:43.778
როგორ ავუხსნა ბრაუზერს, რომ ამ ორ 
ისამნისფერზე სხვადასხვა სტილი გამოიყენოს?

00:00:43.778 --> 00:00:49.300
რადგანაც იგივე კლასიდან არიან, კლასს ვერ
გამოვიყენებთ, თუ ახალს არ შევქმნით.

00:00:49.300 --> 00:00:52.919
ასევე, თეგის იგივე სახელი აქვთ – 

00:00:52.919 --> 00:00:58.013
ანუ, ელემენტი+კლასის სახელის სელექტორს
ვერ გამოვიყენებთ.

00:00:58.013 --> 00:01:00.663
არის მათ შორის რამე განსხვავება?

00:01:00.663 --> 00:01:06.376
კი. აქ  არის  თეგში,

00:01:06.376 --> 00:01:10.985
აქ კი –  თეგში

00:01:10.985 --> 00:01:15.583
სხვაობაა მშობელ თეგებში, ანუ, იმ თეგებში,
რომელებშიც ესენია ჩასმული.

00:01:15.583 --> 00:01:21.102
ამ ინფორმაციის გამოყენებით შეგვიძლია შექმნათ
ახალი CSS წესი, "შთამომავალი სელექტორი"

00:01:21.102 --> 00:01:25.216
რომელიც ირჩევს ელემენტებს დოკუმენტში მათი
პოზიციიდან გამომდინარე.

00:01:25.216 --> 00:01:30.624
მაგალითად, იმისთვის რომ ავირჩიოთ იისფერი
 მხოლოდ პარაგრაფიდან

00:01:30.624 --> 00:01:35.776
დავწეროთ p შემდეგ გამოვტოვოთ ადგილი ––
ეს ძალიან მნიშვნელოვანია ––

00:01:35.776 --> 00:01:40.381
შემდეგ კლასის სახელი - dot purple

00:01:40.381 --> 00:01:46.112
და დავამატოთ ის თვისებები, რაც უფრო
ნატიფი ფორმატირების საშუალებას მოგვცემს

00:01:46.112 --> 00:01:50.311
პირველ რიგში გამჭვირვალე ფონი

00:01:50.311 --> 00:01:58.802
კარგია. ასე ჩვენ შევცვალეთ ეს ტექსტი, 
მაგრამ ხელუხლებელი დავტოვეთ მეორე.

00:01:58.802 --> 00:02:02.879
ახლა ყოველთვის, როცა ამ კლასს პარაგრაფში
გამოვიყენებთ

00:02:02.879 --> 00:02:05.324
ის ასეთი სტილის იქნება.

00:02:05.324 --> 00:02:09.588
ამ ადგილის გამოყენება შეგვიძლია
ჩვენს დოკუმენტში უფრო ღრმად რომ ჩავიდეთ

00:02:09.588 --> 00:02:15.728
მაგალითად, გვინდა რომ შეიცვალოს მხოლოდ
–ში მყოფი  თეგების ელემენტები

00:02:15.728 --> 00:02:23.143
დავიწოთ მშებელი თეგით –  შემდეგ ჰარი
შემდეგ 

00:02:23.143 --> 00:02:28.066
და, მაგალითად, ხაზის სხვა სიმაღლე მივანიჭოთ
– ასე უკეთ გამოიკვეთებიან.

00:02:28.066 --> 00:02:34.073
კარგია. –ს წინ შეგვიძლია დავურთოთ 
,

00:02:34.073 --> 00:02:38.525
რომ დავრწმუნდეთ, რომ მხოლოდ  –ში 
მყოფი  თეგები შეიცვლება.

00:02:38.525 --> 00:02:43.807
როგორც ხედავთ, შთამომავალი სელექტორების
გამოსაყენებლად კარგად უნდა ვიცოდეთ დოკის სტრქუტურა

00:02:43.807 --> 00:02:46.102
და რომელი თეგებია რომელი თეგების შიგნით

00:02:46.102 --> 00:02:49.512
თუ სტრუქტურა კარგია, მაშინ ამის გაკეთება
მარტივი იქნება

00:02:49.512 --> 00:02:52.508
იმიტომ რომ უბრალოდ თეგების იერარქიას
ჩაწერ.

00:02:52.508 --> 00:02:56.955
გვაქვს  თეგი, 
მის შიგნით კი –  თეგი

00:02:56.955 --> 00:02:59.341
და კიდევ შიგნით –  თეგი.

00:02:59.341 --> 00:03:02.926
თუ იერარქია კარგად არ არის დალაგებული,
უნდა გაასწორო

00:03:02.926 --> 00:03:07.024
იმიტომ რომ ასე უფრო მარტივად აღიქვამ
გვერდის სტრუქტურას

00:03:07.024 --> 00:03:10.609
და CSS სელექტორებს მის მიხედვით შეარჩევ

00:03:10.609 --> 00:03:13.598
ამ ადგილის გამოყენება ნებისმიერ
სელექტორებს შორის შეგიძლია

00:03:13.598 --> 00:03:19.021
მაგალითად, იპოვო კონკრეტული თეგი ელემენტში
კონკრეტული ID-ით

00:03:19.021 --> 00:03:22.463
ან კონკრეტული ID 
კონრეტული კლასის ელემენტებში

00:03:22.463 --> 00:03:25.333
მოკლედ, ნებისმიერი კომბინაციის შექმნაა
შესაძლებელი

00:03:25.333 --> 00:03:32.230
მაგრამ თუ გვერდების სტრუქტურა შეიცვლება
CSS წესების შეცვლაც შეიძლება დაგჭირდეს

00:03:32.230 --> 00:03:37.185
ამიტომ ფრთხილად გამოიყენე ისინი და
ყოველთვის გათვალე მომავალი ცვლილებები

00:03:37.185 --> 00:03:41.300
თუ სტრუქტურაზე ნაკლებად გინდა იყო 
დამოკიდებული, გამოიყენე კლასები

00:03:41.300 --> 00:03:45.612
ახლა გადავხედოთ შექმნილ წესებს
და გავაანალიზოთ ისინი

00:03:45.612 --> 00:03:51.383
პირველი წესი ეხება ყველა იისფერ ელემენტს
პარაგრაფების შიგნით.

00:03:51.383 --> 00:03:57.589
თუ დავამატებ ახალ პარაგრაფს იისფერის კლასის
ელემენტით, დაფორმატდება თუ არა ისინიც?

00:03:57.589 --> 00:04:02.371
კი, იმიტომ რომ წესი 
სწორედ მათ ითვალისწინებს.

00:04:02.371 --> 00:04:04.401
მჭირდება უფრო ზუსტი წესი?

00:04:04.401 --> 00:04:11.186
ჯერ–ჯერობით, არა. თუ ეს პარაგრაფები სულ, 
მაგალითად, "სტატიის" კლასის ელემენტში

00:04:11.186 --> 00:04:14.249
იქნებოდა, მაშინ ჩავამატებდი მაგასაც 
განსაზღვრებაში.

00:04:14.249 --> 00:04:21.178
მეორე წესი განსაზღვრავს ყველა  
ელემენტის ხაზის სიმაღლეს

00:04:21.178 --> 00:04:26.039
მინდა ,რომ ყველაფერს  თეგში
ეცვლებოდეს ხაზის სიმაღლე?

00:04:26.039 --> 00:04:30.978
ალბათ, არა. ეს წესი ძალიან ზოგადია.

00:04:30.978 --> 00:04:36.778
რადგანაც არ ვარ დარწმუნებული,
დავუმატებ ამ -ს კლასს

00:04:36.778 --> 00:04:42.032
და შევცვლი ამას ul.spacey–ზე

00:04:42.032 --> 00:04:44.652
ასე წესი უფრო სპეციფიკური გახდა.

00:04:44.652 --> 00:04:49.840
დროთა განმავლობაში, წესები შეიძლება მეტად
ან ნაკლებად სპეციფიკური გავხადო

00:04:49.840 --> 00:04:53.619
მოკლედ, ეს CSS ხერხი ძალიან გამოსადეგი
რამეა

00:04:53.619 --> 00:04:57.879
ივარჯიშე მის გამოყენებაზე.