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

0:00:05.432,0:00:07.901
და კურდღლების უსაყვარლეს[br]კერძზე

0:00:07.901,0:00:10.534
იცოდით, რომ სტაფილო არ არის[br]მხოლოდ სტაფილოსფერი?

0:00:10.534,0:00:13.535
თავდაპირველად სტაფილო იასამნისფერი იყო.[br]ზოგი ახლაც არის.

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

0:00:19.541,0:00:25.267
იმისთვის, რომ ყოველი ფერის სახელი იმავე [br]ფერის იყოს, გამოვიყენეთ კლასები.

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

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

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

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

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

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

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

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

0:01:06.376,0:01:10.985
აქ კი –  თეგში

0:01:10.985,0:01:15.583
სხვაობაა მშობელ თეგებში, ანუ, იმ თეგებში,[br]რომელებშიც ესენია ჩასმული.

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

0:01:21.102,0:01:25.216
რომელიც ირჩევს ელემენტებს დოკუმენტში მათი[br]პოზიციიდან გამომდინარე.

0:01:25.216,0:01:30.624
მაგალითად, იმისთვის რომ ავირჩიოთ იისფერი[br] მხოლოდ პარაგრაფიდან

0:01:30.624,0:01:35.776
დავწეროთ p შემდეგ გამოვტოვოთ ადგილი ––[br]ეს ძალიან მნიშვნელოვანია ––

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

0:01:40.381,0:01:46.112
და დავამატოთ ის თვისებები, რაც უფრო[br]ნატიფი ფორმატირების საშუალებას მოგვცემს

0:01:46.112,0:01:50.311
პირველ რიგში გამჭვირვალე ფონი

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

0:01:58.802,0:02:02.879
ახლა ყოველთვის, როცა ამ კლასს პარაგრაფში[br]გამოვიყენებთ

0:02:02.879,0:02:05.324
ის ასეთი სტილის იქნება.

0:02:05.324,0:02:09.588
ამ ადგილის გამოყენება შეგვიძლია[br]ჩვენს დოკუმენტში უფრო ღრმად რომ ჩავიდეთ

0:02:09.588,0:02:15.728
მაგალითად, გვინდა რომ შეიცვალოს მხოლოდ[br]–ში მყოფი  თეგების ელემენტები

0:02:15.728,0:02:23.143
დავიწოთ მშებელი თეგით –  შემდეგ ჰარი[br]შემდეგ

0:02:23.143,0:02:28.066
და, მაგალითად, ხაზის სხვა სიმაღლე მივანიჭოთ[br]– ასე უკეთ გამოიკვეთებიან.

0:02:28.066,0:02:34.073
კარგია. –ს წინ შეგვიძლია დავურთოთ [br],

0:02:34.073,0:02:38.525
რომ დავრწმუნდეთ, რომ მხოლოდ  –ში [br]მყოფი  თეგები შეიცვლება.

0:02:38.525,0:02:43.807
როგორც ხედავთ, შთამომავალი სელექტორების[br]გამოსაყენებლად კარგად უნდა ვიცოდეთ დოკის სტრქუტურა

0:02:43.807,0:02:46.102
და რომელი თეგებია რომელი თეგების შიგნით

0:02:46.102,0:02:49.512
თუ სტრუქტურა კარგია, მაშინ ამის გაკეთება[br]მარტივი იქნება

0:02:49.512,0:02:52.508
იმიტომ რომ უბრალოდ თეგების იერარქიას[br]ჩაწერ.

0:02:52.508,0:02:56.955
გვაქვს  თეგი, [br]მის შიგნით კი –  თეგი

0:02:56.955,0:02:59.341
და კიდევ შიგნით –  თეგი.

0:02:59.341,0:03:02.926
თუ იერარქია კარგად არ არის დალაგებული,[br]უნდა გაასწორო

0:03:02.926,0:03:07.024
იმიტომ რომ ასე უფრო მარტივად აღიქვამ[br]გვერდის სტრუქტურას

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

0:03:10.609,0:03:13.598
ამ ადგილის გამოყენება ნებისმიერ[br]სელექტორებს შორის შეგიძლია

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

0:03:19.021,0:03:22.463
ან კონკრეტული ID [br]კონრეტული კლასის ელემენტებში

0:03:22.463,0:03:25.333
მოკლედ, ნებისმიერი კომბინაციის შექმნაა[br]შესაძლებელი

0:03:25.333,0:03:32.230
მაგრამ თუ გვერდების სტრუქტურა შეიცვლება[br]CSS წესების შეცვლაც შეიძლება დაგჭირდეს

0:03:32.230,0:03:37.185
ამიტომ ფრთხილად გამოიყენე ისინი და[br]ყოველთვის გათვალე მომავალი ცვლილებები

0:03:37.185,0:03:41.300
თუ სტრუქტურაზე ნაკლებად გინდა იყო [br]დამოკიდებული, გამოიყენე კლასები

0:03:41.300,0:03:45.612
ახლა გადავხედოთ შექმნილ წესებს[br]და გავაანალიზოთ ისინი

0:03:45.612,0:03:51.383
პირველი წესი ეხება ყველა იისფერ ელემენტს[br]პარაგრაფების შიგნით.

0:03:51.383,0:03:57.589
თუ დავამატებ ახალ პარაგრაფს იისფერის კლასის[br]ელემენტით, დაფორმატდება თუ არა ისინიც?

0:03:57.589,0:04:02.371
კი, იმიტომ რომ წესი [br]სწორედ მათ ითვალისწინებს.

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

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

0:04:11.186,0:04:14.249
იქნებოდა, მაშინ ჩავამატებდი მაგასაც [br]განსაზღვრებაში.

0:04:14.249,0:04:21.178
მეორე წესი განსაზღვრავს ყველა  [br]ელემენტის ხაზის სიმაღლეს

0:04:21.178,0:04:26.039
მინდა ,რომ ყველაფერს  თეგში[br]ეცვლებოდეს ხაზის სიმაღლე?

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

0:04:30.978,0:04:36.778
რადგანაც არ ვარ დარწმუნებული,[br]დავუმატებ ამ -ს კლასს

0:04:36.778,0:04:42.032
და შევცვლი ამას ul.spacey–ზე

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

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

0:04:49.840,0:04:53.619
მოკლედ, ეს CSS ხერხი ძალიან გამოსადეგი[br]რამეა

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