WEBVTT

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

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

00:00:04.591 --> 00:00:06.429
ამ div–ითა

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

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

00:00:10.865 --> 00:00:12.728
ბრაზერისთვის არის ყუთი

00:00:12.728 --> 00:00:15.448
იმისდა მიუხედავათ, თქვენ ამსგავსებთ თუ არა
მას ყუთს.

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

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

00:00:22.128 --> 00:00:25.178
ზოგი ყუთი

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

00:00:29.688 --> 00:00:32.838
ზოგი – ბლოკია, როგორც div.


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

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

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

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

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

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

00:00:48.517 --> 00:00:51.467
ზღვარი და არშია.

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

00:00:54.437 --> 00:00:57.317
თქვენ მალე გაიგებთ, რას ნიშნავს ეს
ყველაფერი სინამდვილეში.

00:00:57.317 --> 00:00:59.177
დავწყოთ არშიით.

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

00:01:01.672 --> 00:01:03.822
რომელიც გამოჰყოფს ამ ყუთს

00:01:03.822 --> 00:01:06.742
სხვა ელემენტებისგან. არშია განისაზღვრება
პიქსელებით.

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

00:01:10.169 --> 00:01:12.799
ყოველი გვერდიდან 15–პიქსელიანი არშია
დავუმატოთ,

00:01:12.799 --> 00:01:16.799
უბრალოდ დავწერთ: margin:15px

00:01:16.854 --> 00:01:22.284
ხედავთ განსხვავებას?

00:01:22.307 --> 00:01:25.027
დავუშვათ, 
ყოველ მხარეს განსხვავებული არშია გვინდა.

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

00:01:26.987 --> 00:01:29.647
ზემოდან და ქვემოდან,
ვიდრე მარჯვნიდან და მარცხნიდან?

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

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

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

00:01:43.983 --> 00:01:46.363
ყოველი გვერდისთვის გვქონდეს განსაზღვრული
ზომა,

00:01:46.363 --> 00:01:48.813
მაგრამ დავუშვათ, მხოლოდ რამდენიმე გვერდის
განსაზღვრა გვინდა?

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

00:01:51.080 --> 00:01:56.750
იყოს რაღაც სივრცე..

00:01:56.762 --> 00:02:01.302
და ცოტა ქვემოდანაც..

00:02:01.302 --> 00:02:04.452
მაგრამ დანარჩენ გვერდებზე სტანდარტული
არშიაც გვაკმაყოფილებს.

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

00:02:06.742 --> 00:02:08.642
რომელიც ჩვენს ვებ–გვერდებს

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

00:02:11.004 --> 00:02:14.234
ჩავსვათ მთელი გვერდი div–ში

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

00:02:17.464 --> 00:02:21.394
ჩავსავთ აქ ეს თეგი,

00:02:21.394 --> 00:02:25.954
რომელიც ყველაფერს მოიცავს. ახლა დავამატოთ
წესი,

00:02:25.954 --> 00:02:29.374
რომ div ანიჭებს განს 400px

00:02:29.374 --> 00:02:33.814
და სვამს გვერდის ცენტრში.

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

00:02:37.744 --> 00:02:40.464
იმიტომ რომ ჩემთვის ესეც 
დასვამდა სურათს ცენტრში,

00:02:40.464 --> 00:02:43.104
მაგრამ შენი ბრაუზერი შეიძლება იყოს
უფრო დიდი ან პატარა

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

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

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

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

00:02:52.821 --> 00:02:55.431
ზუსტად ამას აკეთებს margin: auto

00:02:55.431 --> 00:02:58.021
და ესაა div–ის ცენტრში განთავსების 
მშვენიერი მეთოდი.

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

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

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

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

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

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

00:03:15.283 --> 00:03:16.943
სამი მახასიათებელი:

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

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

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

00:03:25.639 --> 00:03:28.969
და წითლის ასარჩევად..

00:03:28.969 --> 00:03:31.649
ავიღებ ჩემს RGB პალიტრას და

00:03:31.649 --> 00:03:37.769
ავირჩევ ამ ხასხასა წითელს.

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

00:03:39.919 --> 00:03:42.789
შეგვიძლია მხოლოდ ერთი ხაზის სისქე 
განვსაზღვროთ.

00:03:42.798 --> 00:03:46.078
მაგალითად, თუ ზემოდან ძალიან სქელი 
იისფერი ხაზი გვინდა,

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

00:03:49.248 --> 00:03:56.538
10px solid purple

00:03:56.545 --> 00:03:59.785
ახლა დავუმატოთ სურათს ჩარჩო.

00:03:59.785 --> 00:04:02.225
ვცადოთ სხვადასხვა სტილები.

00:04:02.225 --> 00:04:07.605
border:6px 
ფერი groove red

00:04:07.605 --> 00:04:12.985
არა, groove არ მომწონს

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

00:04:16.405 --> 00:04:19.185
ვცადოთ ridge
აი! ახლა ჰგავს ჩარჩოს.

00:04:19.185 --> 00:04:22.665
ახლა დავუმატოთ საზღვარი ჩვენს საინფორმაციო
ბლოკს

00:04:22.665 --> 00:04:25.985
border:

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

00:04:28.405 --> 00:04:31.185
სტილი dotted

00:04:31.200 --> 00:04:35.960
ფერი.. იყოს ღია–ნაცრისფერი..

00:04:35.960 --> 00:04:38.230
შევცვალოთ სტილი dashed

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

00:04:40.958 --> 00:04:42.438
მაგრამ..

00:04:42.438 --> 00:04:45.018
რაღაც ძალიან არ მომწონს.

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

00:04:48.878 --> 00:04:51.628
"კონტენერის" კიდისკენ?

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

00:04:53.438 --> 00:04:56.518
არ გამოიყურება კარგად.

00:04:56.518 --> 00:04:59.738
მისი წაკითხვა რთულია.

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

00:05:01.758 --> 00:05:03.988
თითქმის ყოველთვის,
როცა თქვენს ელემენტებს აქვთ

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

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

00:05:07.632 --> 00:05:10.092
ტექსტსა და კიდეებს შორის.

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

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

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

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

00:05:23.372 --> 00:05:26.582
padding:6px
მშვენიერია.

00:05:26.582 --> 00:05:29.362
სურათისთვის განლაგების განსაზღვრა 
არ გვჭირდება

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

00:05:31.012 --> 00:05:33.852
აი ასე:

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

00:05:36.182 --> 00:05:38.882
და განლაგება. მე ვიყენებდი სქელ ხაზებს და
კაშკაშა ფერებს

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

00:05:40.392 --> 00:05:42.942
თუმცა ახლა ჩემი გვერდი ზედმეტად
ჭრელია,

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

00:05:44.270 --> 00:05:46.690
ნატიფი თეთრი და ნაცრისფერი ფერები
გამოიყენეთ.

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

00:05:49.120 --> 00:05:50.870
აუცილებლად უნდა გამოიყენოთ ეს
თვისებები,

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

00:05:52.000 --> 00:05:53.720
როგორ შთაბეჭდილებას ტოვებს