WEBVTT

00:00:00.360 --> 00:00:02.029
აქამდე ჩვენ ვნახეთ, როგორ გამოგვეყენებინა

00:00:02.029 --> 00:00:03.588
CSS ტექსტის გასაფორმებლად,

00:00:04.088 --> 00:00:05.904
მაგრამ ჩვენ მისი გამოყენება
ჩვენი გვერდის

00:00:05.904 --> 00:00:07.500
მაკეტის შესაცვლელადაც შეგვიძლია.

00:00:07.620 --> 00:00:09.148
ეს ნიშნავს რომ ჩვენ შეგვიძლია ელემენტების
გადაადგილება,

00:00:09.157 --> 00:00:10.187
ზომის შეცვლა,

00:00:10.187 --> 00:00:11.777
მათი ერთმანეთზე დალაგებაც კი.

00:00:12.010 --> 00:00:13.551
მაგრამ რისი გადაადგილება გვინდა ჩვენ?

00:00:13.551 --> 00:00:14.401


00:00:14.498 --> 00:00:16.118
ზოგჯერ, იმ ელემენტების,

00:00:16.118 --> 00:00:17.339
რომლებიც ჩვენ უკვე შევქმენით,

00:00:17.339 --> 00:00:18.812
მაგალითად, კონკრეტული აბზაცი,

00:00:18.812 --> 00:00:20.672
ან კონკრეტული სათაურის.

00:00:21.231 --> 00:00:22.365
მაგრამ, ყველაზე ხშირად,

00:00:22.445 --> 00:00:24.679
ეს ჩვენი შექმნილი ელემენტების ჯგუფის,

00:00:24.679 --> 00:00:26.889
მაგალითად, ტექსტის ფრაგმენტის,

00:00:27.055 --> 00:00:30.065
ან სათაურისა და რამდენიმე აბზაცის.

00:00:31.693 --> 00:00:32.946
იმისთვის, რომ ისინი გადავაადგილოთ

00:00:32.946 --> 00:00:34.365
ერთობლივად, როგორც ერთი ერთეული,

00:00:34.365 --> 00:00:36.785
ჩვენ უნდა გავეცნოთ HTML-ის ახალ თეგს.

00:00:36.805 --> 00:00:39.225
რომელსაც ჩვენ ელემენტების მაჯგუფებელს ვეძახით.

00:00:39.246 --> 00:00:41.460
ჩვენ ეს CSS-ის გაცნობამდე არ აგვიხსნია,

00:00:41.460 --> 00:00:42.662
რადგან ინის მხოლოდ CSS-სთან

00:00:42.662 --> 00:00:44.210
ერთადაა გამოსადეგი.

00:00:44.210 --> 00:00:46.555
მათ არ აქვთ აზრობრივი მნიშვნელობა
ბრაუზერისთვის.

00:00:47.275 --> 00:00:49.176
პირველი თეგია- 

00:00:49.596 --> 00:00:51.516
და ჩვენ ამას ვიყენებთ ტექსტის ფრაგმენტის

00:00:51.516 --> 00:00:52.756
დაჯგუფებისთვის.

00:00:53.244 --> 00:00:54.193
ვთქვათ, ჩვენ გვინდა ფერი,

00:00:54.193 --> 00:00:56.503
სიტყვა "Love"(სიყვარული) იყოს წითელი.

00:00:57.055 --> 00:00:58.692
ჩვენ უბრალოდ სიტყვის გაფერადება გვინდა,

00:00:58.692 --> 00:00:59.952
და არა სათაურის დარჩენილი ნაწილისიც.

00:01:00.327 --> 00:01:02.458
ჩვენ მივიტანთ კურსორს სიტყვა "Love"-მდე,

00:01:02.458 --> 00:01:06.138
და დავბეჭდავთ ის საწყის თეგს.

00:01:06.499 --> 00:01:10.519
ამის შემდეგ, დამასრულებელ თეგს. კარგი.

00:01:10.678 --> 00:01:11.644
ახლა ჩვენ გვინდა სტილი შევუცვალოთ

00:01:11.644 --> 00:01:12.809
ამ სიმბოლოების -ს.

00:01:13.008 --> 00:01:14.643
ჩვენ შეგვიძლია ერთი წესით ყველა -ს

00:01:14.723 --> 00:01:15.680
მივცეთ ფერი გვერდზე,

00:01:15.780 --> 00:01:18.558
თუმცა, შეიძლება არ გვინდოდეს ყველაფერი
გაწითლდეს.

00:01:18.558 --> 00:01:19.980
მოდი მივცეთ 

00:01:20.107 --> 00:01:21.980
ერთ კლასს, "lovey-dovey" (ისე საყვარელია),

00:01:25.086 --> 00:01:29.053
და დავამატოთ წესი მხოლოდ

00:01:29.053 --> 00:01:30.370
ამ კლასში გაერთიანებული ელემენტებისთვის.

00:01:30.388 --> 00:01:33.755
.lovey-dovey, color: red.

00:01:34.613 --> 00:01:36.703
შეხედეთ როგორი გახდა ტექსტი ახლა!

00:01:38.093 --> 00:01:39.667
ასე რომ, -ები კარგია ტექსტების
ფრაგმენტების დაჯგუფებისთვს,

00:01:39.667 --> 00:01:41.717
როგორ ვაჯგუფებთ

00:01:41.727 --> 00:01:43.187
სხვადასხვა ელემენტებს?

00:01:43.507 --> 00:01:45.247
სწორედ აქ გვჭირდება  თეგი.

00:01:45.680 --> 00:01:46.747
ვთქვათ, ჩვენ გვინდა დავაჯგუფოთ

00:01:46.747 --> 00:01:47.717
ეს ქვედა ნაწილი,

00:01:48.195 --> 00:01:49.464
ოფიციალური ინფორმაციის სათაური, და

00:01:49.464 --> 00:01:51.174
აბზაცები და სურათი მის ქვემოთ.

00:01:51.743 --> 00:01:52.714
ამის გასაკეთებლად,

00:01:52.714 --> 00:01:58.129
მე მივიყვან კურსორს h3-ის წინ

00:01:58.129 --> 00:01:59.389
და დავუწერ -ის საწყის თეგს.

00:01:59.859 --> 00:02:02.259
შემდეგ ჩამოვალ ფინალურ აბზაცზე,

00:02:02.690 --> 00:02:04.620
და აქ დავწერ დამამთავრებელ თეგს.

00:02:05.467 --> 00:02:07.847
ჩვენ უკვე გვაქვს , ახლა კი გვინდა სტილი
მივცეთ მას.

00:02:08.510 --> 00:02:09.568
-სთვის სტილის მისაცემად,

00:02:09.568 --> 00:02:11.426
მე უნდა მივცე ID (იდენტიფიკატორი).

00:02:11.426 --> 00:02:13.516
"official-info" (ოფიციალური ინფორმაცია).

00:02:15.117 --> 00:02:16.417
შემდეგ აქ დავამატო წესი ამისთვის.

00:02:16.422 --> 00:02:21.102
ჰმ, # ოფიციალური ინფორმაცია და ფონი.

00:02:22.275 --> 00:02:23.715
მოდი გავხადოთ ის ნაცრისფერი.

00:02:23.884 --> 00:02:26.934
მოდი შევარჩიოთ... ეს... ეს კარგია.

00:02:27.133 --> 00:02:28.646
ახლა შეგიძლიათ ნახოთ, რომ  
გახდა

00:02:28.646 --> 00:02:30.841
ნაცრისფერი ყუთი, რომელიც მოიცავს

00:02:30.841 --> 00:02:31.681
ყველა ელემენტს მასში.

00:02:31.772 --> 00:02:34.267
ეს განსხვავდება ყველა ელემენტისთვის

00:02:34.267 --> 00:02:35.947
ცალკე ფონის მინიჭებისგან.

00:02:35.998 --> 00:02:38.228
თუ ჩვენ ასე გავაკეთებდით, ცარიელი,

00:02:38.228 --> 00:02:39.308
არანაცრისფერი სივრცე დაგვრჩებოდა.

00:02:39.520 --> 00:02:41.120
ჩვენ უნდა გავაკეთოთ  მაშინ,

00:02:41.129 --> 00:02:42.909
როცა გვინდა ფერი მივცეთ ყველაფერს.

00:02:44.708 --> 00:02:46.185
თქვენ შეგიძლიათ იფიქროთ -ზე,

00:02:46.185 --> 00:02:47.735
როგორც ტექსტის მაჯგუფებელზე,

00:02:48.303 --> 00:02:50.759
ხოლო-ზე,

00:02:50.759 --> 00:02:52.269
როგორც ელემენტების მაჯგუფებელზე,

00:02:52.478 --> 00:02:54.718
მაგრამ, ჩვენ მათი გარჩევის სხვა გზაც გვაქვს.

00:02:55.451 --> 00:02:56.854
თქვენ CSS-ის სამყაროში

00:02:56.854 --> 00:02:58.104
ორი ტიპის ელემენტებს ხედავთ.

00:02:58.412 --> 00:03:00.232
ხაზისშიდა და მასობრივი.

00:03:00.499 --> 00:03:03.409
ხაზისშიდა ელემენტის შემდეგ ახალი ხაზი არ არის.

00:03:03.570 --> 00:03:06.726
ანუ, თუ გსურთ მათი გამრავლება, 
ყველაფერი ერთსა და იმავე ხაზზე იქნება.

00:03:06.726 --> 00:03:08.751
ამის მაგალითები, რომლებზეც უკვე ვისაუბრეთ,

00:03:08.751 --> 00:03:11.651
არის სურათები,

00:03:11.832 --> 00:03:13.432
თქვენ შეგიძლიათ ნახოთ ეს გამოსახულება,

00:03:13.451 --> 00:03:16.431
როგორ ქრება ის ტექსტში.

00:03:16.616 --> 00:03:18.326
აქ მის შემდეგ ახალი ხაზია.

00:03:18.657 --> 00:03:21.887
მასობრივი ელემენტის შემდეგ ხაზია,

00:03:21.912 --> 00:03:24.602
და ეს ის არის, რასაც HTML თეგების უმრავლესობა
ადგენს.

00:03:24.818 --> 00:03:26.978
შეხედეთ ყველა მაგალითს ამ გვერდზე,

00:03:27.041 --> 00:03:30.281
სათაურები,აბზაცები, ჩამონათვალი.

00:03:30.799 --> 00:03:33.699
ბრაუზერმა ყველას შემდეგ ახალი ხაზები ჩასვა,

00:03:33.732 --> 00:03:36.152

 თეგის ჩაწერის გარეშე.

00:03:37.027 --> 00:03:39.039
რა კავშირი აქვს ამას -თან ან

00:03:39.039 --> 00:03:39.727
თან?

00:03:39.835 --> 00:03:43.203
მაშ ასე,  ხაზისშიდა ელემენტს ქმნის,

00:03:43.203 --> 00:03:47.123
 კი მასობრივ ელემენტს.

00:03:47.252 --> 00:03:49.492
ეს ნიშნავს, რომ, თუ თქვენ დაამატებთ 
-ს


00:03:49.492 --> 00:03:53.432
და არ დაამატებთ რომელიმე სხვა სტილს,

00:03:53.940 --> 00:03:56.270
ბრაუზერი ბლოკად განიხილავს

00:03:56.270 --> 00:03:58.145
გვერდის იმ ნაწილს.

00:03:58.145 --> 00:04:00.534
ახლა, მათ -ში მოქცეულებს,

00:04:00.534 --> 00:04:02.984
ახალი ხაზები აქვთ მდე და შემდეგ.

00:04:02.998 --> 00:04:05.495
და შეიძლება თქვენ სწორედ ეს გსურთ.

00:04:05.495 --> 00:04:07.525
უბრალოდ, ჩაიბეჭდეთ ეს განსხვავება გონებაში.

00:04:07.553 --> 00:04:09.383
ახლა გავაგრძელოთ, რადგან

00:04:09.395 --> 00:04:10.885
გაცილებით მეტი რამის გაკეთება
შეგვიძლია ამ თეგების გამოყენებით.

00:04:10.885 --> 00:04:12.631
განსაკუთრებით, -ით.