< Return to Video

CSS პოზიციები

  • 0:00 - 0:02
    ახლა ჩვენ ვისწავლით,
    როგორ გამოვიყენოთ CSS
  • 0:02 - 0:04
    ელემენტების გადაადგილებისთვის.
  • 0:04 - 0:06
    არა უბრალოდ ერთმანეთის გვერდით
    დასალაგებლად,
  • 0:06 - 0:08
    არამედ ერთმანეთის მიყოლებით
  • 0:08 - 0:09
    ერთი მეორეს შემდეგ დასაწყობად.
  • 0:09 - 0:12
    აქ გვაქვს ვებ-გვერდი
  • 0:12 - 0:16
    რამდენიმე სათაურითა და სურათებით და
  • 0:16 - 0:18
    კიდევ გვაქვს რამდენიმე აბზაცი
  • 0:18 - 0:20
    ეს ყველაფერი ახლა განლაგებულია
  • 0:20 - 0:22
    სტანდარტული წყობის მიხედვით.
  • 0:22 - 0:24
    რასაც ძირითადად იყენებს ბრაუზერი.
  • 0:24 - 0:27
    ჩვენ მას სტატიკურ ან ჩვეულებრივ
    განლაგებას ვუწოდებთ,
  • 0:27 - 0:29
    რაც ნიშნავს, რომ ერთ ხაზის ელეენტები,
  • 0:29 - 0:31
    მაგალითად, სურათები,
  • 0:31 - 0:32
    განლაგებულია მარცხნიდან მარჯვნივ
  • 0:32 - 0:34
    ბლოკები კი, ისეთები, როგორც
  • 0:34 - 0:35
    სათაურები(ჰედერები) და აბზაცები
  • 0:35 - 0:38
    განლაგებულია ზემოდან ქვემოთ.
  • 0:38 - 0:40
    შეგვიძლია, შევცვალოთ განლაგების სტრატეგია
  • 0:40 - 0:43
    CSS-ის პოზიციონირების თვისების გამოყენებით
  • 0:43 - 0:46
    მოდი ვცადოთ ეს ამ სურათის მაგალითზე.
  • 0:46 - 0:49
    დავწეროთ: position:
  • 0:49 - 0:51
    და შემდეგ მნიშვნელობად მივუთითოთ
    relative
  • 0:51 - 0:53
    relative განლაგების სტრატეგია
  • 0:53 - 0:55
    ნიშნავს, რომ ელემენტს ჩვეულებრივად ვსვამთ
  • 0:55 - 0:58
    შემდეგ კი რაღაც მანძილით დავაშოროთ
  • 0:58 - 1:00
    ახლა მივუთითოთ ბრაუზერს,
  • 1:00 - 1:02
    რა მანძილით გვინდა დაშორება
  • 1:02 - 1:03
    ამისთვის უნდა გამოვიყენოთ
  • 1:03 - 1:05
    CSS-ის ოთხი ახალი
    თვისების კომბინაცია
  • 1:05 - 1:07
    ზედა, ქვედა, მარცხენა და მარჯვენა.
  • 1:07 - 1:09
    მაგალითად, გვინდა დავაშოროთ
  • 1:09 - 1:14
    ოცი პიქსელით ქვემოდან
  • 1:14 - 1:15
    და კიდევ ათით...
  • 1:15 - 1:17
    დავუშვათ, ათით მარცხნიდან.
  • 1:17 - 1:19
    კარგია, არა?
  • 1:19 - 1:21
    მაგრამ კიდევ უფრო მაგარი რამე
  • 1:21 - 1:23
    შემიძლია გაჩენოთ.
  • 1:23 - 1:25
    კერძოდ, აბსოლუტური განლაგება.
  • 1:25 - 1:26
    ეს შეგვიძლია გამოვიყენოთ
  • 1:26 - 1:29
    თუ გვინდა ამოვიღოთ ელემენტი
    სტანდარტული წყობიდან
  • 1:29 - 1:31
    და ეკრანზე რომელიმე სხვა
    ადგილას დავსვათ.
  • 1:31 - 1:32
    ამისთვის
  • 1:32 - 1:33
    შევცვალოთ relative მნიშვნელობა
  • 1:33 - 1:34
    ჩავწეროთ absolute
  • 1:34 - 1:35
    მაგრამ დავტოვოთ
  • 1:35 - 1:37
    ზემოთა და მარცხენა თვისებები
  • 1:37 - 1:38
    როგორც ხედავთ
  • 1:38 - 1:39
    ახლა ჩვენი სურათი
  • 1:39 - 1:41
    ფარავს როგორც სხვა სურათებს,
    ასევე ჰედერს.
  • 1:41 - 1:43
    ეს არ გვაწყობს, გამოვასწოროთ.
  • 1:43 - 1:45
    დავიწყოთ უინსტონით.
  • 1:45 - 1:48
    დავამატოთ მისთვის წესი
  • 1:48 - 1:52
    position: absolute
  • 1:52 - 1:54
    და, დავუშვათ,
  • 1:54 - 1:56
    ზემოდან 40 პიქსელი
  • 1:56 - 1:58
    არა, 50 იყოს
  • 1:58 - 2:00
    და 50 მარცხნივ
  • 2:00 - 2:02
    აი, ახლა კარგია.
  • 2:02 - 2:04
    ჰუპერსაც უნდა ზემოთ
  • 2:04 - 2:06
    ამიტომ
  • 2:06 - 2:07
    მასაც მივანიჭოთ
  • 2:07 - 2:12
    position: absolute
  • 2:12 - 2:15
    თვისებები: top: 30
  • 2:15 - 2:18
    left:70
  • 2:18 - 2:20
    ჩემი მიზანია
  • 2:20 - 2:21
    ჩანდეს ისე, თითქოს ჰუპერი
  • 2:21 - 2:24
    უინსტონის ირგვლივ ცეკვავს.
  • 2:24 - 2:26
    მაგრამ ჯერ–ჯერობით კომპოზიცია
    ასე არ გამოიიყურება
  • 2:26 - 2:28
    იმიტომ რომ უინსტონი
  • 2:28 - 2:30
    ჰოპერის ზემოდან ხატია.
  • 2:30 - 2:32
    ამის გამოსასწორებლად
  • 2:32 - 2:34
    შემიძლია ან შევცვალო
  • 2:34 - 2:35
    სურათების თეგების თანმიმდევრობა
  • 2:35 - 2:37
    HTML-ში
  • 2:37 - 2:39
    მაგრამ აჯობებს გამოვიყენოთ CSS თვისებები
  • 2:39 - 2:42
    CSS–ის z ინდექსის გამოყენებით
  • 2:42 - 2:44
    შეგვიძლია ვუთხრათ ბრაუზერს
  • 2:44 - 2:45
    რა თანმიმდევრობით
  • 2:45 - 2:46
    უნდა ჩახატოს ელემენტები
  • 2:46 - 2:47
    ამისთვის მათ სხვაობის
  • 2:47 - 2:48
    ინდექსები უნდა მიანიჭოს.
  • 2:48 - 2:51
    დავიწყოთ ლანდშაფტით.
  • 2:51 - 2:53
    მისი z ინდექსი იქნება 1
  • 2:53 - 2:56
    უინსტონის - 2
  • 2:56 - 2:59
    ჰოპერის – 3
  • 2:59 - 3:00
    კარგია!
  • 3:00 - 3:03
    ახლა ჰოპერი უინსტონის წინ ცეკვავს
  • 3:03 - 3:04
    მოსწონს ეს თუ არა
  • 3:04 - 3:05
    უწევს;
  • 3:05 - 3:08
    ახლა ვნახოთ, რა შეიძლება ვუყოთ დამალულ
  • 3:08 - 3:10
    ჰედერებსა და სვეტებს
  • 3:10 - 3:12
    აბა..
  • 3:12 - 3:14
    მინდა, რომ ეს ცეკვა
  • 3:14 - 3:17
    ყველაფერზე მაღლა იყოს განლაგებული
  • 3:17 - 3:19
    ამიტომ მივანიჭებ
  • 3:19 - 3:21
    აბსოლურ პოზიციას
  • 3:21 - 3:22
    და z ინდექს 4–ს
  • 3:22 - 3:23
    კარგია.
  • 3:23 - 3:25
    ასე ათი პიქსელით მარცხნივ რომ გადავიტანოთ
  • 3:25 - 3:27
    ან კიდევ ოდნავ მეტით
  • 3:27 - 3:29
    აჰა, ასე კარგია.
  • 3:29 - 3:30
    ახლა სიმღერის ტექსტს მივადგეთ.
  • 3:30 - 3:31
    მინდა, რომ ის ყველაფრის
  • 3:31 - 3:33
    ქვემოთ ჩანდეს უბრალოდ.
  • 3:33 - 3:36
    ამიტომ, მივანიჭოთ
  • 3:36 - 3:38
    შედარებითი პოზიცია
  • 3:38 - 3:39
    და დავაყენოთ ზედა ზღვარი
  • 3:39 - 3:41
    რომელიც სურათის სიმაღლეს
  • 3:41 - 3:43
    უნდა უდრიდეს;
  • 3:43 - 3:45
    რაც 220 პიქსელია
  • 3:45 - 3:48
    მშვენიერია, მომწონს, როგორც გამოვიდა
  • 3:48 - 3:50
    მშვენიერი წვეულება
  • 3:50 - 3:52
    მოგვიწყვია.
  • 3:52 - 3:54
    ახლა თუ დააპაუზებთ ვიდეოს
  • 3:54 - 3:56
    და ჩამოწევთ გვერდს
  • 3:56 - 3:58
    დაინახავთ, რომ ყველაფერი
  • 3:58 - 3:59
    ერთად მოძრაობს
  • 3:59 - 4:01
    მნიშვნელოვანი კი ის არის,
  • 4:01 - 4:03
    რომ აბსოლუტური პოზიცია დამოკიდებულია
  • 4:03 - 4:04
    გვერის ზემოთა ზღვარზე
  • 4:04 - 4:06
    ამიტომ, როცა გვერდს სქროლავთ
  • 4:06 - 4:08
    ყველაფერი, რაც ზემოთ იყო
  • 4:08 - 4:11
    ნელ–ნელა ქრება,
  • 4:11 - 4:12
    იმიტომ რომ თქვენ შორდებით
  • 4:12 - 4:15
    გვერდის ზემოთა ნაწილს
  • 4:15 - 4:16
    მეორე ვარიანტია
  • 4:16 - 4:17
    ფიქსირებული პოზიცია,
  • 4:17 - 4:19
    ამ შემთხვევაში გამოჩნდება თითქოს
  • 4:19 - 4:20
    არაფერი არ მოძრაობს საერთოდ
  • 4:20 - 4:22
    თუ გინდათ სცადოთ,
  • 4:22 - 4:23
    უბრალოდ შეცვალეთ
  • 4:23 - 4:26
    h1 აბსოლუტურიდან ფიქსირებულზე
  • 4:26 - 4:29
    მერე კი დააპაუზეთ და ჩამოსქროლეთ
  • 4:29 - 4:31
    დაინახავთ, რომ
  • 4:31 - 4:34
    ჩვენი წვეულება იმავე ადგილას რჩება
  • 4:34 - 4:36
    იმიტომ რომ ახლა ის დამოკიდებულია
  • 4:36 - 4:39
    ეკრანის ზედა ზღვარზე,
  • 4:39 - 4:41
    ბრაუზერის ფანჯარაზე.
  • 4:41 - 4:44
    აი, ასევ ისწავლეთ
  • 4:44 - 4:46
    სამი სხვადასხვა პოზიციის გამოყენება.
  • 4:46 - 4:48
    და შეგვიძლია ბევრი მაგარი რამის გაკეთება
  • 4:48 - 4:49
    შეიძლება გაინტერესებთ,
  • 4:49 - 4:51
    როდის ვიყენებთ აბსოლუტურ
    და ფიქსირებულ პოზიციებს?
  • 4:51 - 4:53
    ჰმ.. მაგალითად,
  • 4:53 - 4:54
    თამაშის შექმნისას
  • 4:54 - 4:56
    როგორც აქ გავაკეთე ეს
  • 4:56 - 4:57
    როცა სცენის ყველა ნაწილის
  • 4:57 - 4:59
    გამოჩენა გინდათ ბრაუზერში
  • 4:59 - 5:00
    მაგრამ ასევე გამოიყენეთ
  • 5:00 - 5:02
    ჩვეულებრივი ვებ–გვერდებისთვის
  • 5:02 - 5:03
    მაგალითად, ხანის აკადემიაზე
  • 5:03 - 5:05
    იმ მოდულებისთვის, გვერდის შუაში
    რომ ხტება
  • 5:05 - 5:06
    აბსოლუტურ პოზიციას ვიყენებთ.
  • 5:06 - 5:07
    ფიქსირებულს კი ვიყენებთ
  • 5:07 - 5:09
    ძებნის ველისთვის ზოგ გვერდზე
  • 5:09 - 5:12
    რომ ყოველთვის ჩანდეს და ყოველთვის შეძლო
    მისი გამოყენება
  • 5:12 - 5:14
    პოზიციები შეიძლება არ გამოიყენო
  • 5:14 - 5:15
    ყოველ გვერდზე
  • 5:15 - 5:17
    მაგრამ როცა გამოიყენებ,
  • 5:17 - 5:19
    ძალიან გაგიხარდება მათი არსებობა.
Title:
CSS პოზიციები
Description:
more » « less
Video Language:
English
Duration:
05:20
Nina Nutsubidze edited Georgian subtitles for CSS positioning
Nina Nutsubidze edited Georgian subtitles for CSS positioning
Mari Telia edited Georgian subtitles for CSS positioning
Mari Telia edited Georgian subtitles for CSS positioning
Mari Telia edited Georgian subtitles for CSS positioning

Georgian subtitles

Revisions

Our website uses cookies for analysis purposes.