< Return to Video

CSS სირძე-სიგანის გადაჭარბება

  • 0:00 - 0:04
    div-ებს ხშირად იმიტომ ვიყენებთ, რომ
    გვერდის ყუთებად დაშლა გვინდა,
  • 0:04 - 0:08
    ან ამ ყუთების ზომების შეცვლა,
    ან მათი გადაადგილება.
  • 0:08 - 0:12
    კარგი თვალია საჭირო იმისთვის,
    რომ გადაწყვიტო სად რა განათავსო გვერდზე,
  • 0:12 - 0:13
    ისე რომ კარგად გამოიყურებოდეს.
  • 0:13 - 0:16
    ახლა, ჩვენ არ ვიზრუნებთ გვერდის
    სილამაზეზე.
  • 0:16 - 0:19
    უბრალოდ, გაჩვენებთ თუ როგორ უნდა
    შეცვალოთ რაღაცები.
  • 0:19 - 0:22
    მოდი, ზომა შევუცვალოთ
    "official-info" div-ს.
  • 0:22 - 0:26
    ჩვეულებრივ, div-ი იღებს შესაძლებელი
    სიგანის 100 პროცენტს.
  • 0:26 - 0:29
    ესაა მიზეზი თუ რატომ არის
    ნაცრისფერი ყუთი მთელ სიგანეზე გაშლილი.
  • 0:29 - 0:33
    შეიძლება მინდოდეს, რომ
    მან დაიკავოს 300 პიქსელი.
  • 0:33 - 0:40
    დავამატებ ახალ თვისებას CSS-ში
    width: 300px; (სიგანე 300 პიქსელი)
  • 0:40 - 0:43
    სიგანე შეიცვალა, მაგრამ ახლა
    სხვა რამ გავაკეთოთ.
  • 0:43 - 0:45
    მოდი, გამოვიყენოთ პროცენტობრივი სიგანე.
  • 0:45 - 0:51
    და ვთქვათ, რომ div-მა ყოველთვის უნდა
    დაიკავოს შესაძლებელი სიგანის 70 %.
  • 0:51 - 0:53
    ახლა ტექსტი მოთავსებულია ამ
    მცირე ყუთში.
  • 0:53 - 0:56
    და div-ი სიმაღლეში გაიზარდა.
  • 0:56 - 0:59
    თუ გვუსრს, ასევე შეგვიძლია
    სიმაღლის კონტროლიც.
  • 0:59 - 1:01
    სიმაღლის თვისებით.
  • 1:01 - 1:04
    height: 180px;
    (სიმაღლე 180 პიქსელი)
  • 1:04 - 1:07
    რაღაც სახალისო მოხდა.
  • 1:07 - 1:10
    ნაცრისფერი ყუთი შემცირდა 180 პიქსელამდე,
  • 1:10 - 1:14
    მაგრამ ტექსტი ყუთის გარეთ გადის.
  • 1:14 - 1:16
    რა მოხდა?
  • 1:16 - 1:21
    ეს იმ თვისების ბრალია, რომელსაც
    'overflow'-ს (გადაღვრას) ვეძახით.
  • 1:21 - 1:24
    'overflow'-ს ჩვეულებრივი მნიშნველობა,
    არის 'visible' (ხილვადი),
  • 1:24 - 1:28
    რაც ნიშნავს, რომ ელემენტის ზომა იცვლება
    მაგრამ შიგთავსი გარეთ გამოდის,
  • 1:28 - 1:31
    რაც სულელურად გამოიყურება.
  • 1:31 - 1:34
    სხვა რა თვისებები გვაქვს გადაღვრისთვის?
  • 1:34 - 1:37
    შეგვიძლია ვცადოთ 'hidden' (დამალვა).
  • 1:37 - 1:40
    იგი, ჭრის შიგთავსის იმ ნაწილს,
    რომელიც ფარგლებს სცდება.
  • 1:40 - 1:42
    მაგრამ, ჩვენ ეს არ გვჭირდება,
  • 1:42 - 1:46
    რადგანაც მაშინ მომხმარებელს არ ექნება
    მთლიანი ინფორმაციის წაკითხვის საშუალება.
  • 1:46 - 1:49
    ჩვენ ასევე შეგვიძლია ვცადოთ 'auto',
  • 1:49 - 1:53
    რომელიც ეუბნება ბრაუზერს, რომ დაამატოს
    ჩამოსაცურებელი თუ შიგთავსი იღვრება.
  • 1:53 - 1:57
    ახლა, შეგვიძლია ჩამოვაცუროთ ყუთის
    შიგთავსი და ვნახოთ ტექსტი.
  • 1:57 - 1:59
    თუ გვინდა, შეგვიძლია უფრო
    სპეციფიკური რამ ვქნათ:
  • 1:59 - 2:03
    შეგვიძლია, მივუთითოთ განსხვავებული
    თვისება სხვადასხვა მიმართულებებისთვის.
  • 2:03 - 2:04
    მაგალითად, თუ მინდა, რომ
  • 2:04 - 2:08
    გამოვიყენო ჩამოსაცურებელი y მიმართულებით
    ანუ ზევით და ქვევით.
  • 2:08 - 2:11
    უნდა დავწეროთ: overflow-y: auto;
  • 2:11 - 2:14
    მაგრამ თუ გვინდა დალაგება
    x მიმართულებით, შეგვიძლია
  • 2:14 - 2:19
    დავწეროთ: overflow-x: hidden;
  • 2:19 - 2:21
    ფრთხილად იყავით, როდესაც იყენებთ
    გადაღვრას, რადგანაც
  • 2:21 - 2:25
    ჩამოსაცურებელმა, შეიძლება გააღიზიანოს
    მომხმარებელი.
  • 2:25 - 2:27
    განსაკუთრებით, ჩამოსაცურებელი
    ჩამოსაცურებელში.
  • 2:27 - 2:29
    ასეთ შემთხვევებს მოერიდეთ.
  • 2:29 - 2:34
    დავუბრუნდეს სიგრძე-სიგანეს,
    ჩვენ შეგვიძლია გამოვიყენოთ
  • 2:34 - 2:38
    სიგრძე და სიგანე მრავალი სახის
    ელემენტისთვის, მაგალითად სურათებისთვის.
  • 2:38 - 2:42
    ახლა, როდესაც ვიცნობთ CSS-ს შეგვიძლია
    გამოვიყენოთ სიგრძე-სიგანის CSS თვისებები
  • 2:42 - 2:45
    სიგრძე-სიგანის ატრიბუტების მაგივრად.
  • 2:45 - 2:53
    მოდი, გავზარდოთ კატის სურათი
    და დავარქვათ მას "cute-cat",
  • 2:53 - 2:55
    წავშალოთ ატრიბუტი,
  • 2:55 - 3:00
    და დავუბრუნდეთ ჩვენს სტილის წესს,
    მივუთითოთ
  • 3:00 - 3:04
    #cute-cat {width: 120px;
    }
  • 3:04 - 3:06
    ატრიბუტების მსგავსად
  • 3:06 - 3:09
    ჯობია მივუთითოთ მხოლოდ სიგრძე
    ან მხოლოდ სიგანე,
  • 3:09 - 3:13
    მიეცით ბრაუზერს საშუალება, რომ
    თვითონ განსაზღვროს მეორე განზომილება.
  • 3:13 - 3:15
    სხვა შემთხვევაში გაჭყლეტილ კატას მივიღებთ!
  • 3:15 - 3:19
    საინტერესოდ ჟღერს, მაგრამ მოდი ვცადოთ
  • 3:19 - 3:20
    height: 40px;
    (სიმაღლე - 40 პიქსელი)
  • 3:20 - 3:22
    ჰაჰა, გაჭყლეტილი კატა - ვაშა!
  • 3:22 - 3:29
    მოდი, პასუხისმგებლობის მქონე
    ვებ დეველოპერი ვიქნები და ამას წავშლი.
  • 3:29 - 3:33
    რაც უფრო მეტი ცოდნა გაქვს,
    მით უფრო მეტი პასუხისმგებლობა გაკისრია.
  • 3:33 - 3:38
    რადგან შეგიძლია ჩამოსაცურებლების დამატება
    და კატების გაჭყლეტვა, არ ნიშნავს რომ
  • 3:38 - 3:40
    ასე უნდა მოიქცე.
  • 3:40 - 3:43
    იმიტომ, რომ ძირითადად ვაკეთებთ
    ვებ გვერდებს სხვა ადამიანებისთვის.
  • 3:43 - 3:48
    რაც შენთვის სახალისოა, შეიძლება
    სხვისთვის რთულად გამოსაყენებელი იყოს.
  • 3:48 - 3:54
    მაგრამ თუ გაერთობით Khan Academy-ზე
    წინააღმდეგი არ ვარ.
Title:
CSS სირძე-სიგანის გადაჭარბება
Description:
more » « less
Video Language:
English
Duration:
03:55
ბესარიონ სათნო edited Georgian subtitles for CSS width height overflow

Georgian subtitles

Revisions

  • Revision 1 Edited
    ბესარიონ სათნო
Our website uses cookies for analysis purposes.