< Return to Video

CSS grouping elements

  • 0:00 - 0:02
    აქამდე ჩვენ ვნახეთ, როგორ გამოგვეყენებინა
  • 0:02 - 0:04
    CSS ტექსტის გასაფორმებლად,
  • 0:04 - 0:06
    მაგრამ ჩვენ მისი გამოყენება
    ჩვენი გვერდის
  • 0:06 - 0:08
    მაკეტის შესაცვლელადაც შეგვიძლია.
  • 0:08 - 0:09
    ეს ნიშნავს რომ ჩვენ შეგვიძლია ელემენტების
    გადაადგილება,
  • 0:09 - 0:10
    ზომის შეცვლა,
  • 0:10 - 0:12
    მათი ერთმანეთზე დალაგებაც კი.
  • 0:12 - 0:14
    მაგრამ რისი გადაადგილება გვინდა ჩვენ?
  • 0:14 - 0:14
  • 0:14 - 0:16
    ზოგჯერ, იმ ელემენტების,
  • 0:16 - 0:17
    რომლებიც ჩვენ უკვე შევქმენით,
  • 0:17 - 0:19
    მაგალითად, კონკრეტული აბზაცი,
  • 0:19 - 0:21
    ან კონკრეტული სათაურის.
  • 0:21 - 0:22
    მაგრამ, ყველაზე ხშირად,
  • 0:22 - 0:25
    ეს ჩვენი შექმნილი ელემენტების ჯგუფის,
  • 0:25 - 0:27
    მაგალითად, ტექსტის ფრაგმენტის,
  • 0:27 - 0:30
    ან სათაურისა და რამდენიმე აბზაცის.
  • 0:32 - 0:33
    იმისთვის, რომ ისინი გადავაადგილოთ
  • 0:33 - 0:34
    ერთობლივად, როგორც ერთი ერთეული,
  • 0:34 - 0:37
    ჩვენ უნდა გავეცნოთ HTML-ის ახალ თეგს.
  • 0:37 - 0:39
    რომელსაც ჩვენ ელემენტების მაჯგუფებელს ვეძახით.
  • 0:39 - 0:41
    ჩვენ ეს CSS-ის გაცნობამდე არ აგვიხსნია,
  • 0:41 - 0:43
    რადგან ინის მხოლოდ CSS-სთან
  • 0:43 - 0:44
    ერთადაა გამოსადეგი.
  • 0:44 - 0:47
    მათ არ აქვთ აზრობრივი მნიშვნელობა
    ბრაუზერისთვის.
  • 0:47 - 0:49
    პირველი თეგია-
  • 0:50 - 0:52
    და ჩვენ ამას ვიყენებთ ტექსტის ფრაგმენტის
  • 0:52 - 0:53
    დაჯგუფებისთვის.
  • 0:53 - 0:54
    ვთქვათ, ჩვენ გვინდა ფერი,
  • 0:54 - 0:57
    სიტყვა "Love"(სიყვარული) იყოს წითელი.
  • 0:57 - 0:59
    ჩვენ უბრალოდ სიტყვის გაფერადება გვინდა,
  • 0:59 - 1:00
    და არა სათაურის დარჩენილი ნაწილისიც.
  • 1:00 - 1:02
    ჩვენ მივიტანთ კურსორს სიტყვა "Love"-მდე,
  • 1:02 - 1:06
    და დავბეჭდავთ ის საწყის თეგს.
  • 1:06 - 1:11
    ამის შემდეგ, დამასრულებელ თეგს. კარგი.
  • 1:11 - 1:12
    ახლა ჩვენ გვინდა სტილი შევუცვალოთ
  • 1:12 - 1:13
    ამ სიმბოლოების -ს.
  • 1:13 - 1:15
    ჩვენ შეგვიძლია ერთი წესით ყველა -ს
  • 1:15 - 1:16
    მივცეთ ფერი გვერდზე,
  • 1:16 - 1:19
    თუმცა, შეიძლება არ გვინდოდეს ყველაფერი
    გაწითლდეს.
  • 1:19 - 1:20
    მოდი მივცეთ
  • 1:20 - 1:22
    ერთ კლასს, "lovey-dovey" (ისე საყვარელია),
  • 1:25 - 1:29
    და დავამატოთ წესი მხოლოდ
  • 1:29 - 1:30
    ამ კლასში გაერთიანებული ელემენტებისთვის.
  • 1:30 - 1:34
    .lovey-dovey, color: red.
  • 1:35 - 1:37
    შეხედეთ როგორი გახდა ტექსტი ახლა!
  • 1:38 - 1:40
    ასე რომ, -ები კარგია ტექსტების
    ფრაგმენტების დაჯგუფებისთვს,
  • 1:40 - 1:42
    როგორ ვაჯგუფებთ
  • 1:42 - 1:43
    სხვადასხვა ელემენტებს?
  • 1:44 - 1:45
    სწორედ აქ გვჭირდება თეგი.
  • 1:46 - 1:47
    ვთქვათ, ჩვენ გვინდა დავაჯგუფოთ
  • 1:47 - 1:48
    ეს ქვედა ნაწილი,
  • 1:48 - 1:49
    ოფიციალური ინფორმაციის სათაური, და
  • 1:49 - 1:51
    აბზაცები და სურათი მის ქვემოთ.
  • 1:52 - 1:53
    ამის გასაკეთებლად,
  • 1:53 - 1:58
    მე მივიყვან კურსორს h3-ის წინ
  • 1:58 - 1:59
    და დავუწერ -ის საწყის თეგს.
  • 2:00 - 2:02
    შემდეგ ჩამოვალ ფინალურ აბზაცზე,
  • 2:03 - 2:05
    და აქ დავწერ დამამთავრებელ თეგს.
  • 2:05 - 2:08
    ჩვენ უკვე გვაქვს , ახლა კი გვინდა სტილი
    მივცეთ მას.
  • 2:09 - 2:10
    -სთვის სტილის მისაცემად,
  • 2:10 - 2:11
    მე უნდა მივცე ID (იდენტიფიკატორი).
  • 2:11 - 2:14
    "official-info" (ოფიციალური ინფორმაცია).
  • 2:15 - 2:16
    შემდეგ აქ დავამატო წესი ამისთვის.
  • 2:16 - 2:21
    ჰმ, # ოფიციალური ინფორმაცია და ფონი.
  • 2:22 - 2:24
    მოდი გავხადოთ ის ნაცრისფერი.
  • 2:24 - 2:27
    მოდი შევარჩიოთ... ეს... ეს კარგია.
  • 2:27 - 2:29
    ახლა შეგიძლიათ ნახოთ, რომ
    გახდა
  • 2:29 - 2:31
    ნაცრისფერი ყუთი, რომელიც მოიცავს
  • 2:31 - 2:32
    ყველა ელემენტს მასში.
  • 2:32 - 2:34
    ეს განსხვავდება ყველა ელემენტისთვის
  • 2:34 - 2:36
    ცალკე ფონის მინიჭებისგან.
  • 2:36 - 2:38
    თუ ჩვენ ასე გავაკეთებდით, ცარიელი,
  • 2:38 - 2:39
    არანაცრისფერი სივრცე დაგვრჩებოდა.
  • 2:40 - 2:41
    ჩვენ უნდა გავაკეთოთ მაშინ,
  • 2:41 - 2:43
    როცა გვინდა ფერი მივცეთ ყველაფერს.
  • 2:45 - 2:46
    თქვენ შეგიძლიათ იფიქროთ -ზე,
  • 2:46 - 2:48
    როგორც ტექსტის მაჯგუფებელზე,
  • 2:48 - 2:51
    ხოლო-ზე,
  • 2:51 - 2:52
    როგორც ელემენტების მაჯგუფებელზე,
  • 2:52 - 2:55
    მაგრამ, ჩვენ მათი გარჩევის სხვა გზაც გვაქვს.
  • 2:55 - 2:57
    თქვენ CSS-ის სამყაროში
  • 2:57 - 2:58
    ორი ტიპის ელემენტებს ხედავთ.
  • 2:58 - 3:00
    ხაზისშიდა და მასობრივი.
  • 3:00 - 3:03
    ხაზისშიდა ელემენტის შემდეგ ახალი ხაზი არ არის.
  • 3:04 - 3:07
    ანუ, თუ გსურთ მათი გამრავლება,
    ყველაფერი ერთსა და იმავე ხაზზე იქნება.
  • 3:07 - 3:09
    ამის მაგალითები, რომლებზეც უკვე ვისაუბრეთ,
  • 3:09 - 3:12
    არის სურათები,
  • 3:12 - 3:13
    თქვენ შეგიძლიათ ნახოთ ეს გამოსახულება,
  • 3:13 - 3:16
    როგორ ქრება ის ტექსტში.
  • 3:17 - 3:18
    აქ მის შემდეგ ახალი ხაზია.
  • 3:19 - 3:22
    მასობრივი ელემენტის შემდეგ ხაზია,
  • 3:22 - 3:25
    და ეს ის არის, რასაც HTML თეგების უმრავლესობა
    ადგენს.
  • 3:25 - 3:27
    შეხედეთ ყველა მაგალითს ამ გვერდზე,
  • 3:27 - 3:30
    სათაურები,აბზაცები, ჩამონათვალი.
  • 3:31 - 3:34
    ბრაუზერმა ყველას შემდეგ ახალი ხაზები ჩასვა,
  • 3:34 - 3:36

    თეგის ჩაწერის გარეშე.
  • 3:37 - 3:39
    რა კავშირი აქვს ამას -თან ან
  • 3:39 - 3:40
    თან?
  • 3:40 - 3:43
    მაშ ასე, ხაზისშიდა ელემენტს ქმნის,
  • 3:43 - 3:47
    კი მასობრივ ელემენტს.
  • 3:47 - 3:49
    ეს ნიშნავს, რომ, თუ თქვენ დაამატებთ
    -ს
  • 3:49 - 3:53
    და არ დაამატებთ რომელიმე სხვა სტილს,
  • 3:54 - 3:56
    ბრაუზერი ბლოკად განიხილავს
  • 3:56 - 3:58
    გვერდის იმ ნაწილს.
  • 3:58 - 4:01
    ახლა, მათ -ში მოქცეულებს,
  • 4:01 - 4:03
    ახალი ხაზები აქვთ მდე და შემდეგ.
  • 4:03 - 4:05
    და შეიძლება თქვენ სწორედ ეს გსურთ.
  • 4:05 - 4:08
    უბრალოდ, ჩაიბეჭდეთ ეს განსხვავება გონებაში.
  • 4:08 - 4:09
    ახლა გავაგრძელოთ, რადგან
  • 4:09 - 4:11
    გაცილებით მეტი რამის გაკეთება
    შეგვიძლია ამ თეგების გამოყენებით.
  • 4:11 - 4:13
    განსაკუთრებით, -ით.
Title:
CSS grouping elements
Description:
more » « less
Video Language:
English
Duration:
04:14

Georgian subtitles

Incomplete

Revisions

Our website uses cookies for analysis purposes.