0:00:00.000,0:00:02.497
გახსოვთ, როგორ გავაკეთეთ რაღაც

0:00:02.538,0:00:04.578
ყუთის მსგავსი წინა ვიდეოში?

0:00:04.591,0:00:06.429
ამ div–ითა

0:00:06.429,0:00:08.352
და მერე მისთვის ფონის ფერის შერჩევით?

0:00:08.352,0:00:10.855
საქმე იმაშია, რომ ყოველი ელემენტი[br]თქვენს ვებ–გვერდზე

0:00:10.865,0:00:12.728
ბრაზერისთვის არის ყუთი

0:00:12.728,0:00:15.448
იმისდა მიუხედავათ, თქვენ ამსგავსებთ თუ არა[br]მას ყუთს.

0:00:15.448,0:00:18.348
მაგალითად, ჰედერი ყუთია..

0:00:18.348,0:00:22.128
ეს პარაგრაფიც.. ეს span–იც ყუთია.

0:00:22.128,0:00:25.178
ზოგი ყუთი

0:00:25.178,0:00:29.688
არის დიდი, ზოგი პატარა, ზოგი ჩამწკრივებული

0:00:29.688,0:00:32.838
ზოგი – ბლოკია, როგორც div.[br]

0:00:32.838,0:00:35.708
მაგრამ ყველა ითვლება ყუთად.

0:00:35.708,0:00:38.764
რატომ არის ეს მნიშვნელოვანი?

0:00:38.764,0:00:41.054
იმიტომ რომ არსეობს "ყუთის მოდელი"

0:00:41.080,0:00:44.100
რომელსაც ხედავთ ამ დიაგრამაზე.

0:00:44.100,0:00:46.030
ყოველი ელემენტის ყუთს აქვს

0:00:46.033,0:00:48.513
ოთხი ნაწილი: რეალური კონტენტი, განლაგება,

0:00:48.517,0:00:51.467
ზღვარი და არშია.

0:00:51.467,0:00:54.437
განლაგების, ზღვრის და არშიის შესაქმნელად [br]ვიყენებთ CSS–ს.

0:00:54.437,0:00:57.317
თქვენ მალე გაიგებთ, რას ნიშნავს ეს[br]ყველაფერი სინამდვილეში.

0:00:57.317,0:00:59.177
დავწყოთ არშიით.

0:00:59.177,0:01:01.657
ესაა გამჭვირვალე სივრცე ყუთის ირგვლივ,

0:01:01.672,0:01:03.822
რომელიც გამოჰყოფს ამ ყუთს

0:01:03.822,0:01:06.742
სხვა ელემენტებისგან. არშია განისაზღვრება[br]პიქსელებით.

0:01:06.749,0:01:10.169
იმისთვის, რომ საინფორმაციო ბლოკს

0:01:10.169,0:01:12.799
ყოველი გვერდიდან 15–პიქსელიანი არშია[br]დავუმატოთ,

0:01:12.799,0:01:16.799
უბრალოდ დავწერთ: margin:15px

0:01:16.854,0:01:22.284
ხედავთ განსხვავებას?

0:01:22.307,0:01:25.027
დავუშვათ, [br]ყოველ მხარეს განსხვავებული არშია გვინდა.

0:01:25.027,0:01:26.987
მაგალითად, უფრო დიდი

0:01:26.987,0:01:29.647
ზემოდან და ქვემოდან,[br]ვიდრე მარჯვნიდან და მარცხნიდან?

0:01:29.647,0:01:33.037
შეგვიძლია ზომები მივუთითოთ საათის[br]ისრის მიმართულებით, ვიწყებთ ზემოდან:

0:01:33.037,0:01:39.973
ზემოდან 15px, მარჯვნივ 0px, ქვემოთ10px,[br]მარცხნივ 6px.

0:01:39.973,0:01:43.983
როგორც ხედავთ, შეგვიძლია

0:01:43.983,0:01:46.363
ყოველი გვერდისთვის გვქონდეს განსაზღვრული[br]ზომა,

0:01:46.363,0:01:48.813
მაგრამ დავუშვათ, მხოლოდ რამდენიმე გვერდის[br]განსაზღვრა გვინდა?

0:01:48.813,0:01:51.063
მაგალითად, გვინდა რომ კატის მარჯვნივ

0:01:51.080,0:01:56.750
იყოს რაღაც სივრცე..

0:01:56.762,0:02:01.302
და ცოტა ქვემოდანაც..

0:02:01.302,0:02:04.452
მაგრამ დანარჩენ გვერდებზე სტანდარტული[br]არშიაც გვაკმაყოფილებს.

0:02:04.452,0:02:06.742
არსებობს არშიის სპეციალური მნიშვნელობა,

0:02:06.742,0:02:08.642
რომელიც ჩვენს ვებ–გვერდებს

0:02:08.644,0:02:11.004
ვიზუალურად კიდევ უფრო მაგარს გახდის.

0:02:11.004,0:02:14.234
ჩავსვათ მთელი გვერდი div–ში

0:02:14.234,0:02:17.464
მას "კონტეინერის" ID-ს ვანიჭებ.

0:02:17.464,0:02:21.394
ჩავსავთ აქ ეს თეგი,

0:02:21.394,0:02:25.954
რომელიც ყველაფერს მოიცავს. ახლა დავამატოთ[br]წესი,

0:02:25.954,0:02:29.374
რომ div ანიჭებს განს 400px

0:02:29.374,0:02:33.814
და სვამს გვერდის ცენტრში.

0:02:33.814,0:02:37.744
მე შემეძლო დამეწერა margin-left: 100px

0:02:37.744,0:02:40.464
იმიტომ რომ ჩემთვის ესეც [br]დასვამდა სურათს ცენტრში,

0:02:40.464,0:02:43.104
მაგრამ შენი ბრაუზერი შეიძლება იყოს[br]უფრო დიდი ან პატარა

0:02:43.104,0:02:45.074
და ამიტომ შეთან ის ცენტრში არ იქნებოდა.

0:02:45.079,0:02:46.779
რეალურად ახლა გვინდა ვუთხრათ, რომ

0:02:46.861,0:02:49.281
"დაწესდეს ნებისმიერი არშია იმ პირობით, რომ

0:02:49.281,0:02:52.821
ორივე მხარეს არშიები ტოლი ზომის იქნება.

0:02:52.821,0:02:55.431
ზუსტად ამას აკეთებს margin: auto

0:02:55.431,0:02:58.021
და ესაა div–ის ცენტრში განთავსების [br]მშვენიერი მეთოდი.

0:02:58.021,0:03:01.471
ახლა, რომ div ცენტრშია,

0:03:01.472,0:03:04.012
შეიძლება გვინდოდეს მისი უკეთ გამოყოფა

0:03:04.024,0:03:06.304
კიდეების გასწვრივ საზღვრის გავლებით.

0:03:06.333,0:03:10.333
ამისთვის CSS საზღვრის თვისებას გამოვიყენებთ.

0:03:10.363,0:03:13.483
დავუმატოთ div–ს წითელი საზღვარი.

0:03:13.483,0:03:15.283
ჩავწეროთ border და განვსაზღვროთ მისი

0:03:15.283,0:03:16.943
სამი მახასიათებელი:

0:03:16.943,0:03:19.783
სისქე, სტილი და ფერი.

0:03:19.783,0:03:23.473
ვიწრო საზღვრისთვის ჩავწერ 1px,

0:03:23.473,0:03:25.633
უწყვეტი ხაზისთვის ჩავწეროთ solid

0:03:25.639,0:03:28.969
და წითლის ასარჩევად..

0:03:28.969,0:03:31.649
ავიღებ ჩემს RGB პალიტრას და

0:03:31.649,0:03:37.769
ავირჩევ ამ ხასხასა წითელს.

0:03:37.769,0:03:39.919
ისევე, როგორც არშიის შემთხვევაში, აქაც

0:03:39.919,0:03:42.789
შეგვიძლია მხოლოდ ერთი ხაზის სისქე [br]განვსაზღვროთ.

0:03:42.798,0:03:46.078
მაგალითად, თუ ზემოდან ძალიან სქელი [br]იისფერი ხაზი გვინდა,

0:03:46.078,0:03:49.238
დავამატოთ კიდევ ერთი თვისება: border-top

0:03:49.248,0:03:56.538
10px solid purple

0:03:56.545,0:03:59.785
ახლა დავუმატოთ სურათს ჩარჩო.

0:03:59.785,0:04:02.225
ვცადოთ სხვადასხვა სტილები.

0:04:02.225,0:04:07.605
border:6px [br]ფერი groove red

0:04:07.605,0:04:12.985
არა, groove არ მომწონს

0:04:12.985,0:04:16.405
ვცადოთ, double? არც ეს მომწონს,

0:04:16.405,0:04:19.185
ვცადოთ ridge[br]აი! ახლა ჰგავს ჩარჩოს.

0:04:19.185,0:04:22.665
ახლა დავუმატოთ საზღვარი ჩვენს საინფორმაციო[br]ბლოკს

0:04:22.665,0:04:25.985
border:

0:04:25.985,0:04:28.405
ძალიანაც დიდი არ გვინდა, 2px

0:04:28.405,0:04:31.185
სტილი dotted

0:04:31.200,0:04:35.960
ფერი.. იყოს ღია–ნაცრისფერი..

0:04:35.960,0:04:38.230
შევცვალოთ სტილი dashed

0:04:38.238,0:04:40.958
აი, ახლა ისე გამოიყურება, როგორც მინდა.

0:04:40.958,0:04:42.438
მაგრამ..

0:04:42.438,0:04:45.018
რაღაც ძალიან არ მომწონს.

0:04:45.018,0:04:48.878
ხედავთ, როგორ გადაინაცვლა ამ ტექსტმა

0:04:48.878,0:04:51.628
"კონტენერის" კიდისკენ?

0:04:51.628,0:04:53.438
და არც ეს ტექსტი, საინფორმაციო ბლოკში

0:04:53.438,0:04:56.518
არ გამოიყურება კარგად.

0:04:56.518,0:04:59.738
მისი წაკითხვა რთულია.

0:04:59.738,0:05:01.758
აი, ახლა მოვიდა დრო გამოვიყენოთ განლაგება

0:05:01.758,0:05:03.988
თითქმის ყოველთვის,[br]როცა თქვენს ელემენტებს აქვთ

0:05:03.988,0:05:05.662
ფონი ან საზღვარი, უნდა განსაზღვროთ

0:05:05.662,0:05:07.632
განლაგება, რომ შექმნათ სივრცე

0:05:07.632,0:05:10.092
ტექსტსა და კიდეებს შორის.

0:05:10.106,0:05:13.296
განვსაზღვროთ განლაგება კონტეინერისთვის.

0:05:13.315,0:05:17.985
დავუშვათ, იყოს 15px

0:05:17.991,0:05:21.241
აი, გაცილებით უკეთესია.

0:05:21.241,0:05:23.371
ახლა იგივე ჩვენს საინფორმციო ბლოკში.

0:05:23.372,0:05:26.582
padding:6px[br]მშვენიერია.

0:05:26.582,0:05:29.362
სურათისთვის განლაგების განსაზღვრა [br]არ გვჭირდება

0:05:29.363,0:05:31.003
მშვენივრად გამოიყურება ჩარჩოში.

0:05:31.012,0:05:33.852
აი ასე:

0:05:33.852,0:05:36.182
შევქმენით ყუთის მოდელი. არშია, საზღვარი

0:05:36.182,0:05:38.882
და განლაგება. მე ვიყენებდი სქელ ხაზებს და[br]კაშკაშა ფერებს

0:05:38.882,0:05:40.392
კარგად რომ დაგენახათ ყველაფერი;

0:05:40.392,0:05:42.942
თუმცა ახლა ჩემი გვერდი ზედმეტად[br]ჭრელია,

0:05:42.960,0:05:44.270
თუ გინდათ, შეგიძლიათ უფრო

0:05:44.270,0:05:46.690
ნატიფი თეთრი და ნაცრისფერი ფერები[br]გამოიყენეთ.

0:05:46.690,0:05:49.120
ნებისმიერ შემთხვევაში,

0:05:49.120,0:05:50.870
აუცილებლად უნდა გამოიყენოთ ეს[br]თვისებები,

0:05:50.870,0:05:52.710
იმიტომ რომ ისინი განსაზღვრავენ,

0:05:52.000,0:05:53.720
როგორ შთაბეჭდილებას ტოვებს