1
00:00:00,531 --> 00:00:04,192
CSS სელექტორებით
უკვე ბევრი რამის გაკეთბა მოვასწარით:

2
00:00:04,192 --> 00:00:08,006
ვარჩევდით ელემენტებს თეგით, ID–ით,
კლასის მიხედვით.

3
00:00:08,290 --> 00:00:11,028
მოკლედ გავიხსენოთ ყველა
ამ ვებ–გვერდის მაგალითზე.

4
00:00:11,257 --> 00:00:13,655
ეს გვერდი არის დონატებზე.

5
00:00:13,789 --> 00:00:15,963
მას აქვს.. სათაური, პარაგრაფები

6
00:00:15,963 --> 00:00:18,944
ზოგი პარაგრაფი არის მოკლე, 
ერთხაზიანი ფაქტი.

7
00:00:19,242 --> 00:00:23,142
CSS იწყება წესით, რომელიც ირჩევს გვერდზე
ყველა  თეგს

8
00:00:23,142 --> 00:00:25,611
და ცვლის მათ ფონტს sans-serif–ზე

9
00:00:26,074 --> 00:00:30,063
უცებ შევცვლი მნიშვნელობას monospace-ით –
შერჩევა რომ დაინახოთ.

10
00:00:30,785 --> 00:00:31,808
ხედავთ?

11
00:00:34,102 --> 00:00:37,836
შემდეგი წესი ირჩევს ყველა ელემენტს, თუ
მისი ID არის donut-header

12
00:00:38,034 --> 00:00:41,913
ვიცით, რომ შერჩევა არის ID–ით, იმიტომ
რომ წინ ეს # სიმბოლო აქვს.

13
00:00:42,029 --> 00:00:43,759
ID–ს სახელიდან გამომდინარე 
ვხვდებით,

14
00:00:43,759 --> 00:00:46,688
რომ ეს წესი ირჩევს ამ სათაურს

15
00:00:46,688 --> 00:00:47,747
და ცვლის მის ფონტს.

16
00:00:47,974 --> 00:00:51,417
მაგრამ მაინც, ჩამოვსქროლოთ და დავრწმუნდეთ,
რომ -ს მართლაც აქვს ეს ID

17
00:00:51,453 --> 00:00:53,184
კი, ასეა

18
00:00:53,387 --> 00:00:56,790
ბოლო წესი ირჩევს ყველა ელემენტს, რომელთა
კლასის სახელიც არის fact

19
00:00:56,896 --> 00:01:00,384
ვიცით, რომ კლასის სახელით ეძებს, იმიტომ 
რომ იწყება წერტილით.

20
00:01:00,488 --> 00:01:02,956
თუ მინდა გავიგო, რომელ ელემენტებს
აერთიანებს ეს კლასი

21
00:01:02,956 --> 00:01:05,230
შემიძლია ან ვნახო, რას აკეთებს წესი ––

22
00:01:05,230 --> 00:01:07,833
მაგალითად, დავუმატო საზღვრები და
განლაგება––

23
00:01:07,833 --> 00:01:10,462
ან მოვძებნო ეს კლასი HTML–ში,

24
00:01:10,619 --> 00:01:13,148
როგორც ვხედავ, ამ კლასში შედის 
ეს პარაგრაფი

25
00:01:13,148 --> 00:01:14,300
და აი, ეს პარაგრაფიც.

26
00:01:14,300 --> 00:01:16,461
ეს ორი ერთხაზიანი პარაგრაფი.

27
00:01:16,461 --> 00:01:18,315
ამიტომ გაუჩნდათ მათ საზვარი.

28
00:01:18,448 --> 00:01:20,218
ელემენტების კლასებად გაერთიანება

29
00:01:20,218 --> 00:01:22,883
ძალიან მოსახერხებელია ელემენტების
სტილის შესაცვლელად.

30
00:01:22,883 --> 00:01:26,026
მაგრამ კლასების გამოყენებით
სხვა რაღაცების გაკეთებაც შეიძლება.

31
00:01:26,026 --> 00:01:27,368
ახლავე გაჩვენებთ.

32
00:01:27,368 --> 00:01:29,136
გვაქვს გვერდი დონატების შესახებ.

33
00:01:29,136 --> 00:01:31,361
ისე, დონატები სულაც არაა სასარგებლო.

34
00:01:31,436 --> 00:01:34,007
მავნებელიც კი არის.

35
00:01:34,030 --> 00:01:36,963
და შაქრის გამო მიჩვევასაც იწვევენ.

36
00:01:37,009 --> 00:01:39,644
ამიტომ, თუ მაინც და მაინც მათ შესახებ
ვაკეთებთ გვერდს

37
00:01:39,644 --> 00:01:42,421
ალბათ, უნდა გავაფრთხილოთ ხალხი,
რომ ეს არაჯანსაღი საკვებია.

38
00:01:42,539 --> 00:01:47,257
მაგალითად, ზემოთა ფაქტი წითლად რომ 
გამოვყოთ? მართლა გაფრთხილებას რომ ჰგავდეს?

39
00:01:47,626 --> 00:01:49,015
როგორ ვქნათ ეს?

40
00:01:49,200 --> 00:01:53,401
შეგვიძლია CSS წესს fact–ს დავუმატოთ
ფერის თვისება

41
00:01:53,401 --> 00:01:55,099
მაგრამ ასე

42
00:01:55,650 --> 00:02:00,326
ორივე ფაქტი გახდება წითელი;
მეორე კი სულაც არ არის გაფრთხილება.

43
00:02:00,326 --> 00:02:01,847
სულ სხვა რამეზეა სინამდვილეში.

44
00:02:02,051 --> 00:02:03,845
და არ მინდა, რომ წითელი იყოს.

45
00:02:04,169 --> 00:02:05,578
შეგვიძლია დავამატოთ ID

46
00:02:05,578 --> 00:02:09,573
მაგრამ მერე თუ 
სხვა გაფრთხილებების დამატება მოგვინდა

47
00:02:09,573 --> 00:02:10,958
და მათი ასევე წითლად გამოყოფა

48
00:02:10,958 --> 00:02:14,185
სულ მოგვიწევს დავამატოთ ID
და ამ ID–ს წესები

49
00:02:14,391 --> 00:02:19,806
ასეთ შემთხვევებში ყველაზე კარგია, რომ
 თეგს კიდევ ერთი კლასი დავუმატოთ

50
00:02:20,104 --> 00:02:24,151
ერთ თეგზე შეუზღუდავად შეგვიძლია კლასების
დამატება

51
00:02:24,541 --> 00:02:28,532
უბრალოდ ვსვამთ კურსორს კლასის სახელის მერე

52
00:02:28,532 --> 00:02:33,196
ვსვამთ ჰარის და ვწერთ ახალი კლასის სახლეს
მაგ. warning

53
00:02:33,984 --> 00:02:36,329
ახლა შევქმნათ წესი warning–ისთვის

54
00:02:37,119 --> 00:02:40,243
და გადავიტანოთ ფერის თვისება მასზე

55
00:02:40,835 --> 00:02:44,001
ახლა ზემოთა ფაქტი წითელია, 
ქვემოთა კი არა

56
00:02:44,218 --> 00:02:45,411
მშვენიერია.

57
00:02:45,852 --> 00:02:49,285
კლასის სახელი, ისევე, როგორც ადრე
ბევრ ელემენტს შეგვიძლია, დავურთოთ

58
00:02:49,643 --> 00:02:54,121
შეიძლება, გვინდა გავაფერადოთ გამოყოფილი
ტექსტი "deep fried"

59
00:02:54,121 --> 00:02:56,986
გვინდა გამოვყოთ ის წითლად

60
00:02:56,986 --> 00:02:59,872
იმიტომ რომ ძლიერად შემწვარი ხშირად 
ასოცირდება არაჯანსაღ საჭმელთან

61
00:03:00,025 --> 00:03:03,692
ამიტომ, დავურთოთ class = "warning"

62
00:03:03,692 --> 00:03:04,626
ესეც გაწითლდა

63
00:03:05,035 --> 00:03:10,820
დააკვირდით, რომ ამ გაფრთხილებას აქვს 
წითელი ფერი

64
00:03:10,820 --> 00:03:14,653
და ასევე border: top`
და `border: bottom

65
00:03:14,795 --> 00:03:17,545
ასე ხდება ბევრი კლასის გამოყენებისას

66
00:03:17,545 --> 00:03:20,578
ბრაუზერი მათ ყველას აკვირდება

67
00:03:20,578 --> 00:03:22,340
და ყველას წესს იყენებს.

68
00:03:22,733 --> 00:03:26,810
ზოგი ადამიანი ვერ არჩევს ფერებს

69
00:03:26,810 --> 00:03:28,563
ამიტომ მხოლოდ ფერი არ უნდა გამოვიყენოთ
მნიშვნელობის ხაზგასასმელად

70
00:03:28,636 --> 00:03:31,298
ზოგი ადამიანი ვერ ასხვავებს წითელსა და 
შავს –

71
00:03:31,298 --> 00:03:33,815
შეიძლება, ვერც შენ ასხვავებ მათ

72
00:03:33,899 --> 00:03:37,463
ამიტომ, შევცვალოთ ჩვენი კლასი ისე,
რომ ყველამ შეამჩნიოს

73
00:03:38,070 --> 00:03:40,711
ეს ფერი ისევ ფონის ფერზე შეცვალოთ

74
00:03:40,711 --> 00:03:44,740
იმიტომ რომ სხვაობას ყველა შეამჩნევს

75
00:03:45,104 --> 00:03:47,564
სხვაობა და კონტრასტი კი

76
00:03:47,564 --> 00:03:51,304
კარგად გამოყოფს აბზაცს ყველასთვის.

77
00:03:51,400 --> 00:03:54,080
ტექსტის ფერი კი შეცვალოთ თეთრით

78
00:03:54,785 --> 00:03:56,811
ახლა ყველაფერი კონტრასტულია

79
00:03:56,811 --> 00:03:59,611
და ასევე გვაქვს წითელი ფონი იმათთვის,
ვინც ასხვავებს წითელს

80
00:03:59,994 --> 00:04:04,497
და რაგანაც კლასს ვიყენებდით,
ორივე გამაფრთხილებელ თეგს იგივე სტილი აქვს

81
00:04:04,774 --> 00:04:07,787
ახლა, მადლობა CSS კლასებს,

82
00:04:07,787 --> 00:04:10,735
სამყარო შეიტყობს დონატების საშიშროების
შესახებ.