Return to Video

CSS ყუთის მოდელი

  • 0:00 - 0:02
    გახსოვთ, როგორ გავაკეთეთ რაღაც
  • 0:03 - 0:05
    ყუთის მსგავსი წინა ვიდეოში?
  • 0:05 - 0:06
    ამ div–ითა
  • 0:06 - 0:08
    და მერე მისთვის ფონის ფერის შერჩევით?
  • 0:08 - 0:11
    საქმე იმაშია, რომ ყოველი ელემენტი
    თქვენს ვებ–გვერდზე
  • 0:11 - 0:13
    ბრაზერისთვის არის ყუთი
  • 0:13 - 0:15
    იმისდა მიუხედავათ, თქვენ ამსგავსებთ თუ არა
    მას ყუთს.
  • 0:15 - 0:18
    მაგალითად, ჰედერი ყუთია..
  • 0:18 - 0:22
    ეს პარაგრაფიც.. ეს span–იც ყუთია.
  • 0:22 - 0:25
    ზოგი ყუთი
  • 0:25 - 0:30
    არის დიდი, ზოგი პატარა, ზოგი ჩამწკრივებული
  • 0:30 - 0:33
    ზოგი – ბლოკია, როგორც div.
  • 0:33 - 0:36
    მაგრამ ყველა ითვლება ყუთად.
  • 0:36 - 0:39
    რატომ არის ეს მნიშვნელოვანი?
  • 0:39 - 0:41
    იმიტომ რომ არსეობს "ყუთის მოდელი"
  • 0:41 - 0:44
    რომელსაც ხედავთ ამ დიაგრამაზე.
  • 0:44 - 0:46
    ყოველი ელემენტის ყუთს აქვს
  • 0:46 - 0:49
    ოთხი ნაწილი: რეალური კონტენტი, განლაგება,
  • 0:49 - 0:51
    ზღვარი და არშია.
  • 0:51 - 0:54
    განლაგების, ზღვრის და არშიის შესაქმნელად
    ვიყენებთ CSS–ს.
  • 0:54 - 0:57
    თქვენ მალე გაიგებთ, რას ნიშნავს ეს
    ყველაფერი სინამდვილეში.
  • 0:57 - 0:59
    დავწყოთ არშიით.
  • 0:59 - 1:02
    ესაა გამჭვირვალე სივრცე ყუთის ირგვლივ,
  • 1:02 - 1:04
    რომელიც გამოჰყოფს ამ ყუთს
  • 1:04 - 1:07
    სხვა ელემენტებისგან. არშია განისაზღვრება
    პიქსელებით.
  • 1:07 - 1:10
    იმისთვის, რომ საინფორმაციო ბლოკს
  • 1:10 - 1:13
    ყოველი გვერდიდან 15–პიქსელიანი არშია
    დავუმატოთ,
  • 1:13 - 1:17
    უბრალოდ დავწერთ: margin:15px
  • 1:17 - 1:22
    ხედავთ განსხვავებას?
  • 1:22 - 1:25
    დავუშვათ,
    ყოველ მხარეს განსხვავებული არშია გვინდა.
  • 1:25 - 1:27
    მაგალითად, უფრო დიდი
  • 1:27 - 1:30
    ზემოდან და ქვემოდან,
    ვიდრე მარჯვნიდან და მარცხნიდან?
  • 1:30 - 1:33
    შეგვიძლია ზომები მივუთითოთ საათის
    ისრის მიმართულებით, ვიწყებთ ზემოდან:
  • 1:33 - 1:40
    ზემოდან 15px, მარჯვნივ 0px, ქვემოთ10px,
    მარცხნივ 6px.
  • 1:40 - 1:44
    როგორც ხედავთ, შეგვიძლია
  • 1:44 - 1:46
    ყოველი გვერდისთვის გვქონდეს განსაზღვრული
    ზომა,
  • 1:46 - 1:49
    მაგრამ დავუშვათ, მხოლოდ რამდენიმე გვერდის
    განსაზღვრა გვინდა?
  • 1:49 - 1:51
    მაგალითად, გვინდა რომ კატის მარჯვნივ
  • 1:51 - 1:57
    იყოს რაღაც სივრცე..
  • 1:57 - 2:01
    და ცოტა ქვემოდანაც..
  • 2:01 - 2:04
    მაგრამ დანარჩენ გვერდებზე სტანდარტული
    არშიაც გვაკმაყოფილებს.
  • 2:04 - 2:07
    არსებობს არშიის სპეციალური მნიშვნელობა,
  • 2:07 - 2:09
    რომელიც ჩვენს ვებ–გვერდებს
  • 2:09 - 2:11
    ვიზუალურად კიდევ უფრო მაგარს გახდის.
  • 2:11 - 2:14
    ჩავსვათ მთელი გვერდი div–ში
  • 2:14 - 2:17
    მას "კონტეინერის" ID-ს ვანიჭებ.
  • 2:17 - 2:21
    ჩავსავთ აქ ეს თეგი,
  • 2:21 - 2:26
    რომელიც ყველაფერს მოიცავს. ახლა დავამატოთ
    წესი,
  • 2:26 - 2:29
    რომ div ანიჭებს განს 400px
  • 2:29 - 2:34
    და სვამს გვერდის ცენტრში.
  • 2:34 - 2:38
    მე შემეძლო დამეწერა margin-left: 100px
  • 2:38 - 2:40
    იმიტომ რომ ჩემთვის ესეც
    დასვამდა სურათს ცენტრში,
  • 2:40 - 2:43
    მაგრამ შენი ბრაუზერი შეიძლება იყოს
    უფრო დიდი ან პატარა
  • 2:43 - 2:45
    და ამიტომ შეთან ის ცენტრში არ იქნებოდა.
  • 2:45 - 2:47
    რეალურად ახლა გვინდა ვუთხრათ, რომ
  • 2:47 - 2:49
    "დაწესდეს ნებისმიერი არშია იმ პირობით, რომ
  • 2:49 - 2:53
    ორივე მხარეს არშიები ტოლი ზომის იქნება.
  • 2:53 - 2:55
    ზუსტად ამას აკეთებს margin: auto
  • 2:55 - 2:58
    და ესაა div–ის ცენტრში განთავსების
    მშვენიერი მეთოდი.
  • 2:58 - 3:01
    ახლა, რომ div ცენტრშია,
  • 3:01 - 3:04
    შეიძლება გვინდოდეს მისი უკეთ გამოყოფა
  • 3:04 - 3:06
    კიდეების გასწვრივ საზღვრის გავლებით.
  • 3:06 - 3:10
    ამისთვის CSS საზღვრის თვისებას გამოვიყენებთ.
  • 3:10 - 3:13
    დავუმატოთ div–ს წითელი საზღვარი.
  • 3:13 - 3:15
    ჩავწეროთ border და განვსაზღვროთ მისი
  • 3:15 - 3:17
    სამი მახასიათებელი:
  • 3:17 - 3:20
    სისქე, სტილი და ფერი.
  • 3:20 - 3:23
    ვიწრო საზღვრისთვის ჩავწერ 1px,
  • 3:23 - 3:26
    უწყვეტი ხაზისთვის ჩავწეროთ solid
  • 3:26 - 3:29
    და წითლის ასარჩევად..
  • 3:29 - 3:32
    ავიღებ ჩემს RGB პალიტრას და
  • 3:32 - 3:38
    ავირჩევ ამ ხასხასა წითელს.
  • 3:38 - 3:40
    ისევე, როგორც არშიის შემთხვევაში, აქაც
  • 3:40 - 3:43
    შეგვიძლია მხოლოდ ერთი ხაზის სისქე
    განვსაზღვროთ.
  • 3:43 - 3:46
    მაგალითად, თუ ზემოდან ძალიან სქელი
    იისფერი ხაზი გვინდა,
  • 3:46 - 3:49
    დავამატოთ კიდევ ერთი თვისება: border-top
  • 3:49 - 3:57
    10px solid purple
  • 3:57 - 4:00
    ახლა დავუმატოთ სურათს ჩარჩო.
  • 4:00 - 4:02
    ვცადოთ სხვადასხვა სტილები.
  • 4:02 - 4:08
    border:6px
    ფერი groove red
  • 4:08 - 4:13
    არა, groove არ მომწონს
  • 4:13 - 4:16
    ვცადოთ, double? არც ეს მომწონს,
  • 4:16 - 4:19
    ვცადოთ ridge
    აი! ახლა ჰგავს ჩარჩოს.
  • 4:19 - 4:23
    ახლა დავუმატოთ საზღვარი ჩვენს საინფორმაციო
    ბლოკს
  • 4:23 - 4:26
    border:
  • 4:26 - 4:28
    ძალიანაც დიდი არ გვინდა, 2px
  • 4:28 - 4:31
    სტილი dotted
  • 4:31 - 4:36
    ფერი.. იყოს ღია–ნაცრისფერი..
  • 4:36 - 4:38
    შევცვალოთ სტილი dashed
  • 4:38 - 4:41
    აი, ახლა ისე გამოიყურება, როგორც მინდა.
  • 4:41 - 4:42
    მაგრამ..
  • 4:42 - 4:45
    რაღაც ძალიან არ მომწონს.
  • 4:45 - 4:49
    ხედავთ, როგორ გადაინაცვლა ამ ტექსტმა
  • 4:49 - 4:52
    "კონტენერის" კიდისკენ?
  • 4:52 - 4:53
    და არც ეს ტექსტი, საინფორმაციო ბლოკში
  • 4:53 - 4:57
    არ გამოიყურება კარგად.
  • 4:57 - 5:00
    მისი წაკითხვა რთულია.
  • 5:00 - 5:02
    აი, ახლა მოვიდა დრო გამოვიყენოთ განლაგება
  • 5:02 - 5:04
    თითქმის ყოველთვის,
    როცა თქვენს ელემენტებს აქვთ
  • 5:04 - 5:06
    ფონი ან საზღვარი, უნდა განსაზღვროთ
  • 5:06 - 5:08
    განლაგება, რომ შექმნათ სივრცე
  • 5:08 - 5:10
    ტექსტსა და კიდეებს შორის.
  • 5:10 - 5:13
    განვსაზღვროთ განლაგება კონტეინერისთვის.
  • 5:13 - 5:18
    დავუშვათ, იყოს 15px
  • 5:18 - 5:21
    აი, გაცილებით უკეთესია.
  • 5:21 - 5:23
    ახლა იგივე ჩვენს საინფორმციო ბლოკში.
  • 5:23 - 5:27
    padding:6px
    მშვენიერია.
  • 5:27 - 5:29
    სურათისთვის განლაგების განსაზღვრა
    არ გვჭირდება
  • 5:29 - 5:31
    მშვენივრად გამოიყურება ჩარჩოში.
  • 5:31 - 5:34
    აი ასე:
  • 5:34 - 5:36
    შევქმენით ყუთის მოდელი. არშია, საზღვარი
  • 5:36 - 5:39
    და განლაგება. მე ვიყენებდი სქელ ხაზებს და
    კაშკაშა ფერებს
  • 5:39 - 5:40
    კარგად რომ დაგენახათ ყველაფერი;
  • 5:40 - 5:43
    თუმცა ახლა ჩემი გვერდი ზედმეტად
    ჭრელია,
  • 5:43 - 5:44
    თუ გინდათ, შეგიძლიათ უფრო
  • 5:44 - 5:47
    ნატიფი თეთრი და ნაცრისფერი ფერები
    გამოიყენეთ.
  • 5:47 - 5:49
    ნებისმიერ შემთხვევაში,
  • 5:49 - 5:51
    აუცილებლად უნდა გამოიყენოთ ეს
    თვისებები,
  • 5:51 - 5:53
    იმიტომ რომ ისინი განსაზღვრავენ,
  • 5:52 - 5:54
    როგორ შთაბეჭდილებას ტოვებს
Title:
CSS ყუთის მოდელი
Description:
more » « less
Video Language:
English
Duration:
05:56
Nina Nutsubidze edited Georgian subtitles for CSS box model
Nina Nutsubidze edited Georgian subtitles for CSS box model
Nina Nutsubidze edited Georgian subtitles for CSS box model
Nina Nutsubidze edited Georgian subtitles for CSS box model
Mari Telia edited Georgian subtitles for CSS box model

Georgian subtitles

Revisions

Our website uses cookies for analysis purposes.