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

2
00:00:05,432 --> 00:00:07,901
და კურდღლების უსაყვარლეს
კერძზე

3
00:00:07,901 --> 00:00:10,534
იცოდით, რომ სტაფილო არ არის
მხოლოდ სტაფილოსფერი?

4
00:00:10,534 --> 00:00:13,535
თავდაპირველად სტაფილო იასამნისფერი იყო.
ზოგი ახლაც არის.

5
00:00:13,535 --> 00:00:19,541
ესაა მოკლე ვებ–გვერდი, სადაც ჩამოვთვალეთ
სტაფილოს ფერები და მოკლე ისტორია.

6
00:00:19,541 --> 00:00:25,267
იმისთვის, რომ ყოველი ფერის სახელი იმავე 
ფერის იყოს, გამოვიყენეთ კლასები.

7
00:00:25,267 --> 00:00:31,905
მომწონს, როგორ გამოიყურება სტილები სიაში,
მაგრამ ტექსტში გამოყოფილ იასამნისფერში დარწმუნებული არ ვარ

8
00:00:31,905 --> 00:00:36,215
მგონი, სჯობს ფონს შევეშვა და უფრო სადა
შეფერილობას მივმართო.

9
00:00:36,215 --> 00:00:43,778
როგორ ავუხსნა ბრაუზერს, რომ ამ ორ 
ისამნისფერზე სხვადასხვა სტილი გამოიყენოს?

10
00:00:43,778 --> 00:00:49,300
რადგანაც იგივე კლასიდან არიან, კლასს ვერ
გამოვიყენებთ, თუ ახალს არ შევქმნით.

11
00:00:49,300 --> 00:00:52,919
ასევე, თეგის იგივე სახელი აქვთ – 

12
00:00:52,919 --> 00:00:58,013
ანუ, ელემენტი+კლასის სახელის სელექტორს
ვერ გამოვიყენებთ.

13
00:00:58,013 --> 00:01:00,663
არის მათ შორის რამე განსხვავება?

14
00:01:00,663 --> 00:01:06,376
კი. აქ  არის  თეგში,

15
00:01:06,376 --> 00:01:10,985
აქ კი –  თეგში

16
00:01:10,985 --> 00:01:15,583
სხვაობაა მშობელ თეგებში, ანუ, იმ თეგებში,
რომელებშიც ესენია ჩასმული.

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

18
00:01:21,102 --> 00:01:25,216
რომელიც ირჩევს ელემენტებს დოკუმენტში მათი
პოზიციიდან გამომდინარე.

19
00:01:25,216 --> 00:01:30,624
მაგალითად, იმისთვის რომ ავირჩიოთ იისფერი
 მხოლოდ პარაგრაფიდან

20
00:01:30,624 --> 00:01:35,776
დავწეროთ p შემდეგ გამოვტოვოთ ადგილი ––
ეს ძალიან მნიშვნელოვანია ––

21
00:01:35,776 --> 00:01:40,381
შემდეგ კლასის სახელი - dot purple

22
00:01:40,381 --> 00:01:46,112
და დავამატოთ ის თვისებები, რაც უფრო
ნატიფი ფორმატირების საშუალებას მოგვცემს

23
00:01:46,112 --> 00:01:50,311
პირველ რიგში გამჭვირვალე ფონი

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

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

26
00:02:02,879 --> 00:02:05,324
ის ასეთი სტილის იქნება.

27
00:02:05,324 --> 00:02:09,588
ამ ადგილის გამოყენება შეგვიძლია
ჩვენს დოკუმენტში უფრო ღრმად რომ ჩავიდეთ

28
00:02:09,588 --> 00:02:15,728
მაგალითად, გვინდა რომ შეიცვალოს მხოლოდ
–ში მყოფი  თეგების ელემენტები

29
00:02:15,728 --> 00:02:23,143
დავიწოთ მშებელი თეგით –  შემდეგ ჰარი
შემდეგ 

30
00:02:23,143 --> 00:02:28,066
და, მაგალითად, ხაზის სხვა სიმაღლე მივანიჭოთ
– ასე უკეთ გამოიკვეთებიან.

31
00:02:28,066 --> 00:02:34,073
კარგია. –ს წინ შეგვიძლია დავურთოთ 
,

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

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

34
00:02:43,807 --> 00:02:46,102
და რომელი თეგებია რომელი თეგების შიგნით

35
00:02:46,102 --> 00:02:49,512
თუ სტრუქტურა კარგია, მაშინ ამის გაკეთება
მარტივი იქნება

36
00:02:49,512 --> 00:02:52,508
იმიტომ რომ უბრალოდ თეგების იერარქიას
ჩაწერ.

37
00:02:52,508 --> 00:02:56,955
გვაქვს  თეგი, 
მის შიგნით კი –  თეგი

38
00:02:56,955 --> 00:02:59,341
და კიდევ შიგნით –  თეგი.

39
00:02:59,341 --> 00:03:02,926
თუ იერარქია კარგად არ არის დალაგებული,
უნდა გაასწორო

40
00:03:02,926 --> 00:03:07,024
იმიტომ რომ ასე უფრო მარტივად აღიქვამ
გვერდის სტრუქტურას

41
00:03:07,024 --> 00:03:10,609
და CSS სელექტორებს მის მიხედვით შეარჩევ

42
00:03:10,609 --> 00:03:13,598
ამ ადგილის გამოყენება ნებისმიერ
სელექტორებს შორის შეგიძლია

43
00:03:13,598 --> 00:03:19,021
მაგალითად, იპოვო კონკრეტული თეგი ელემენტში
კონკრეტული ID-ით

44
00:03:19,021 --> 00:03:22,463
ან კონკრეტული ID 
კონრეტული კლასის ელემენტებში

45
00:03:22,463 --> 00:03:25,333
მოკლედ, ნებისმიერი კომბინაციის შექმნაა
შესაძლებელი

46
00:03:25,333 --> 00:03:32,230
მაგრამ თუ გვერდების სტრუქტურა შეიცვლება
CSS წესების შეცვლაც შეიძლება დაგჭირდეს

47
00:03:32,230 --> 00:03:37,185
ამიტომ ფრთხილად გამოიყენე ისინი და
ყოველთვის გათვალე მომავალი ცვლილებები

48
00:03:37,185 --> 00:03:41,300
თუ სტრუქტურაზე ნაკლებად გინდა იყო 
დამოკიდებული, გამოიყენე კლასები

49
00:03:41,300 --> 00:03:45,612
ახლა გადავხედოთ შექმნილ წესებს
და გავაანალიზოთ ისინი

50
00:03:45,612 --> 00:03:51,383
პირველი წესი ეხება ყველა იისფერ ელემენტს
პარაგრაფების შიგნით.

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

52
00:03:57,589 --> 00:04:02,371
კი, იმიტომ რომ წესი 
სწორედ მათ ითვალისწინებს.

53
00:04:02,371 --> 00:04:04,401
მჭირდება უფრო ზუსტი წესი?

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

55
00:04:11,186 --> 00:04:14,249
იქნებოდა, მაშინ ჩავამატებდი მაგასაც 
განსაზღვრებაში.

56
00:04:14,249 --> 00:04:21,178
მეორე წესი განსაზღვრავს ყველა  
ელემენტის ხაზის სიმაღლეს

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

58
00:04:26,039 --> 00:04:30,978
ალბათ, არა. ეს წესი ძალიან ზოგადია.

59
00:04:30,978 --> 00:04:36,778
რადგანაც არ ვარ დარწმუნებული,
დავუმატებ ამ -ს კლასს

60
00:04:36,778 --> 00:04:42,032
და შევცვლი ამას ul.spacey–ზე

61
00:04:42,032 --> 00:04:44,652
ასე წესი უფრო სპეციფიკური გახდა.

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

63
00:04:49,840 --> 00:04:53,619
მოკლედ, ეს CSS ხერხი ძალიან გამოსადეგი
რამეა

64
00:04:53,619 --> 00:04:57,879
ივარჯიშე მის გამოყენებაზე.