1
00:00:00,000 --> 00:00:02,497
გახსოვთ, როგორ გავაკეთეთ რაღაც

2
00:00:02,538 --> 00:00:04,578
ყუთის მსგავსი წინა ვიდეოში?

3
00:00:04,591 --> 00:00:06,429
ამ div–ითა

4
00:00:06,429 --> 00:00:08,352
და მერე მისთვის ფონის ფერის შერჩევით?

5
00:00:08,352 --> 00:00:10,855
საქმე იმაშია, რომ ყოველი ელემენტი
თქვენს ვებ–გვერდზე

6
00:00:10,865 --> 00:00:12,728
ბრაზერისთვის არის ყუთი

7
00:00:12,728 --> 00:00:15,448
იმისდა მიუხედავათ, თქვენ ამსგავსებთ თუ არა
მას ყუთს.

8
00:00:15,448 --> 00:00:18,348
მაგალითად, ჰედერი ყუთია..

9
00:00:18,348 --> 00:00:22,128
ეს პარაგრაფიც.. ეს span–იც ყუთია.

10
00:00:22,128 --> 00:00:25,178
ზოგი ყუთი

11
00:00:25,178 --> 00:00:29,688
არის დიდი, ზოგი პატარა, ზოგი ჩამწკრივებული

12
00:00:29,688 --> 00:00:32,838
ზოგი – ბლოკია, როგორც div.


13
00:00:32,838 --> 00:00:35,708
მაგრამ ყველა ითვლება ყუთად.

14
00:00:35,708 --> 00:00:38,764
რატომ არის ეს მნიშვნელოვანი?

15
00:00:38,764 --> 00:00:41,054
იმიტომ რომ არსეობს "ყუთის მოდელი"

16
00:00:41,080 --> 00:00:44,100
რომელსაც ხედავთ ამ დიაგრამაზე.

17
00:00:44,100 --> 00:00:46,030
ყოველი ელემენტის ყუთს აქვს

18
00:00:46,033 --> 00:00:48,513
ოთხი ნაწილი: რეალური კონტენტი, განლაგება,

19
00:00:48,517 --> 00:00:51,467
ზღვარი და არშია.

20
00:00:51,467 --> 00:00:54,437
განლაგების, ზღვრის და არშიის შესაქმნელად 
ვიყენებთ CSS–ს.

21
00:00:54,437 --> 00:00:57,317
თქვენ მალე გაიგებთ, რას ნიშნავს ეს
ყველაფერი სინამდვილეში.

22
00:00:57,317 --> 00:00:59,177
დავწყოთ არშიით.

23
00:00:59,177 --> 00:01:01,657
ესაა გამჭვირვალე სივრცე ყუთის ირგვლივ,

24
00:01:01,672 --> 00:01:03,822
რომელიც გამოჰყოფს ამ ყუთს

25
00:01:03,822 --> 00:01:06,742
სხვა ელემენტებისგან. არშია განისაზღვრება
პიქსელებით.

26
00:01:06,749 --> 00:01:10,169
იმისთვის, რომ საინფორმაციო ბლოკს

27
00:01:10,169 --> 00:01:12,799
ყოველი გვერდიდან 15–პიქსელიანი არშია
დავუმატოთ,

28
00:01:12,799 --> 00:01:16,799
უბრალოდ დავწერთ: margin:15px

29
00:01:16,854 --> 00:01:22,284
ხედავთ განსხვავებას?

30
00:01:22,307 --> 00:01:25,027
დავუშვათ, 
ყოველ მხარეს განსხვავებული არშია გვინდა.

31
00:01:25,027 --> 00:01:26,987
მაგალითად, უფრო დიდი

32
00:01:26,987 --> 00:01:29,647
ზემოდან და ქვემოდან,
ვიდრე მარჯვნიდან და მარცხნიდან?

33
00:01:29,647 --> 00:01:33,037
შეგვიძლია ზომები მივუთითოთ საათის
ისრის მიმართულებით, ვიწყებთ ზემოდან:

34
00:01:33,037 --> 00:01:39,973
ზემოდან 15px, მარჯვნივ 0px, ქვემოთ10px,
მარცხნივ 6px.

35
00:01:39,973 --> 00:01:43,983
როგორც ხედავთ, შეგვიძლია

36
00:01:43,983 --> 00:01:46,363
ყოველი გვერდისთვის გვქონდეს განსაზღვრული
ზომა,

37
00:01:46,363 --> 00:01:48,813
მაგრამ დავუშვათ, მხოლოდ რამდენიმე გვერდის
განსაზღვრა გვინდა?

38
00:01:48,813 --> 00:01:51,063
მაგალითად, გვინდა რომ კატის მარჯვნივ

39
00:01:51,080 --> 00:01:56,750
იყოს რაღაც სივრცე..

40
00:01:56,762 --> 00:02:01,302
და ცოტა ქვემოდანაც..

41
00:02:01,302 --> 00:02:04,452
მაგრამ დანარჩენ გვერდებზე სტანდარტული
არშიაც გვაკმაყოფილებს.

42
00:02:04,452 --> 00:02:06,742
არსებობს არშიის სპეციალური მნიშვნელობა,

43
00:02:06,742 --> 00:02:08,642
რომელიც ჩვენს ვებ–გვერდებს

44
00:02:08,644 --> 00:02:11,004
ვიზუალურად კიდევ უფრო მაგარს გახდის.

45
00:02:11,004 --> 00:02:14,234
ჩავსვათ მთელი გვერდი div–ში

46
00:02:14,234 --> 00:02:17,464
მას "კონტეინერის" ID-ს ვანიჭებ.

47
00:02:17,464 --> 00:02:21,394
ჩავსავთ აქ ეს თეგი,

48
00:02:21,394 --> 00:02:25,954
რომელიც ყველაფერს მოიცავს. ახლა დავამატოთ
წესი,

49
00:02:25,954 --> 00:02:29,374
რომ div ანიჭებს განს 400px

50
00:02:29,374 --> 00:02:33,814
და სვამს გვერდის ცენტრში.

51
00:02:33,814 --> 00:02:37,744
მე შემეძლო დამეწერა margin-left: 100px

52
00:02:37,744 --> 00:02:40,464
იმიტომ რომ ჩემთვის ესეც 
დასვამდა სურათს ცენტრში,

53
00:02:40,464 --> 00:02:43,104
მაგრამ შენი ბრაუზერი შეიძლება იყოს
უფრო დიდი ან პატარა

54
00:02:43,104 --> 00:02:45,074
და ამიტომ შეთან ის ცენტრში არ იქნებოდა.

55
00:02:45,079 --> 00:02:46,779
რეალურად ახლა გვინდა ვუთხრათ, რომ

56
00:02:46,861 --> 00:02:49,281
"დაწესდეს ნებისმიერი არშია იმ პირობით, რომ

57
00:02:49,281 --> 00:02:52,821
ორივე მხარეს არშიები ტოლი ზომის იქნება.

58
00:02:52,821 --> 00:02:55,431
ზუსტად ამას აკეთებს margin: auto

59
00:02:55,431 --> 00:02:58,021
და ესაა div–ის ცენტრში განთავსების 
მშვენიერი მეთოდი.

60
00:02:58,021 --> 00:03:01,471
ახლა, რომ div ცენტრშია,

61
00:03:01,472 --> 00:03:04,012
შეიძლება გვინდოდეს მისი უკეთ გამოყოფა

62
00:03:04,024 --> 00:03:06,304
კიდეების გასწვრივ საზღვრის გავლებით.

63
00:03:06,333 --> 00:03:10,333
ამისთვის CSS საზღვრის თვისებას გამოვიყენებთ.

64
00:03:10,363 --> 00:03:13,483
დავუმატოთ div–ს წითელი საზღვარი.

65
00:03:13,483 --> 00:03:15,283
ჩავწეროთ border და განვსაზღვროთ მისი

66
00:03:15,283 --> 00:03:16,943
სამი მახასიათებელი:

67
00:03:16,943 --> 00:03:19,783
სისქე, სტილი და ფერი.

68
00:03:19,783 --> 00:03:23,473
ვიწრო საზღვრისთვის ჩავწერ 1px,

69
00:03:23,473 --> 00:03:25,633
უწყვეტი ხაზისთვის ჩავწეროთ solid

70
00:03:25,639 --> 00:03:28,969
და წითლის ასარჩევად..

71
00:03:28,969 --> 00:03:31,649
ავიღებ ჩემს RGB პალიტრას და

72
00:03:31,649 --> 00:03:37,769
ავირჩევ ამ ხასხასა წითელს.

73
00:03:37,769 --> 00:03:39,919
ისევე, როგორც არშიის შემთხვევაში, აქაც

74
00:03:39,919 --> 00:03:42,789
შეგვიძლია მხოლოდ ერთი ხაზის სისქე 
განვსაზღვროთ.

75
00:03:42,798 --> 00:03:46,078
მაგალითად, თუ ზემოდან ძალიან სქელი 
იისფერი ხაზი გვინდა,

76
00:03:46,078 --> 00:03:49,238
დავამატოთ კიდევ ერთი თვისება: border-top

77
00:03:49,248 --> 00:03:56,538
10px solid purple

78
00:03:56,545 --> 00:03:59,785
ახლა დავუმატოთ სურათს ჩარჩო.

79
00:03:59,785 --> 00:04:02,225
ვცადოთ სხვადასხვა სტილები.

80
00:04:02,225 --> 00:04:07,605
border:6px 
ფერი groove red

81
00:04:07,605 --> 00:04:12,985
არა, groove არ მომწონს

82
00:04:12,985 --> 00:04:16,405
ვცადოთ, double? არც ეს მომწონს,

83
00:04:16,405 --> 00:04:19,185
ვცადოთ ridge
აი! ახლა ჰგავს ჩარჩოს.

84
00:04:19,185 --> 00:04:22,665
ახლა დავუმატოთ საზღვარი ჩვენს საინფორმაციო
ბლოკს

85
00:04:22,665 --> 00:04:25,985
border:

86
00:04:25,985 --> 00:04:28,405
ძალიანაც დიდი არ გვინდა, 2px

87
00:04:28,405 --> 00:04:31,185
სტილი dotted

88
00:04:31,200 --> 00:04:35,960
ფერი.. იყოს ღია–ნაცრისფერი..

89
00:04:35,960 --> 00:04:38,230
შევცვალოთ სტილი dashed

90
00:04:38,238 --> 00:04:40,958
აი, ახლა ისე გამოიყურება, როგორც მინდა.

91
00:04:40,958 --> 00:04:42,438
მაგრამ..

92
00:04:42,438 --> 00:04:45,018
რაღაც ძალიან არ მომწონს.

93
00:04:45,018 --> 00:04:48,878
ხედავთ, როგორ გადაინაცვლა ამ ტექსტმა

94
00:04:48,878 --> 00:04:51,628
"კონტენერის" კიდისკენ?

95
00:04:51,628 --> 00:04:53,438
და არც ეს ტექსტი, საინფორმაციო ბლოკში

96
00:04:53,438 --> 00:04:56,518
არ გამოიყურება კარგად.

97
00:04:56,518 --> 00:04:59,738
მისი წაკითხვა რთულია.

98
00:04:59,738 --> 00:05:01,758
აი, ახლა მოვიდა დრო გამოვიყენოთ განლაგება

99
00:05:01,758 --> 00:05:03,988
თითქმის ყოველთვის,
როცა თქვენს ელემენტებს აქვთ

100
00:05:03,988 --> 00:05:05,662
ფონი ან საზღვარი, უნდა განსაზღვროთ

101
00:05:05,662 --> 00:05:07,632
განლაგება, რომ შექმნათ სივრცე

102
00:05:07,632 --> 00:05:10,092
ტექსტსა და კიდეებს შორის.

103
00:05:10,106 --> 00:05:13,296
განვსაზღვროთ განლაგება კონტეინერისთვის.

104
00:05:13,315 --> 00:05:17,985
დავუშვათ, იყოს 15px

105
00:05:17,991 --> 00:05:21,241
აი, გაცილებით უკეთესია.

106
00:05:21,241 --> 00:05:23,371
ახლა იგივე ჩვენს საინფორმციო ბლოკში.

107
00:05:23,372 --> 00:05:26,582
padding:6px
მშვენიერია.

108
00:05:26,582 --> 00:05:29,362
სურათისთვის განლაგების განსაზღვრა 
არ გვჭირდება

109
00:05:29,363 --> 00:05:31,003
მშვენივრად გამოიყურება ჩარჩოში.

110
00:05:31,012 --> 00:05:33,852
აი ასე:

111
00:05:33,852 --> 00:05:36,182
შევქმენით ყუთის მოდელი. არშია, საზღვარი

112
00:05:36,182 --> 00:05:38,882
და განლაგება. მე ვიყენებდი სქელ ხაზებს და
კაშკაშა ფერებს

113
00:05:38,882 --> 00:05:40,392
კარგად რომ დაგენახათ ყველაფერი;

114
00:05:40,392 --> 00:05:42,942
თუმცა ახლა ჩემი გვერდი ზედმეტად
ჭრელია,

115
00:05:42,960 --> 00:05:44,270
თუ გინდათ, შეგიძლიათ უფრო

116
00:05:44,270 --> 00:05:46,690
ნატიფი თეთრი და ნაცრისფერი ფერები
გამოიყენეთ.

117
00:05:46,690 --> 00:05:49,120
ნებისმიერ შემთხვევაში,

118
00:05:49,120 --> 00:05:50,870
აუცილებლად უნდა გამოიყენოთ ეს
თვისებები,

119
00:05:50,870 --> 00:05:52,710
იმიტომ რომ ისინი განსაზღვრავენ,

120
00:05:52,000 --> 00:05:53,720
როგორ შთაბეჭდილებას ტოვებს