აქამდე ჩვენ ვნახეთ, როგორ გამოგვეყენებინა

CSS ტექსტის გასაფორმებლად,

მაგრამ ჩვენ მისი გამოყენება
ჩვენი გვერდის

მაკეტის შესაცვლელადაც შეგვიძლია.

ეს ნიშნავს რომ ჩვენ შეგვიძლია ელემენტების
გადაადგილება,

ზომის შეცვლა,

მათი ერთმანეთზე დალაგებაც კი.

მაგრამ რისი გადაადგილება გვინდა ჩვენ?

ზოგჯერ, იმ ელემენტების,

რომლებიც ჩვენ უკვე შევქმენით,

მაგალითად, კონკრეტული აბზაცი,

ან კონკრეტული სათაურის.

მაგრამ, ყველაზე ხშირად,

ეს ჩვენი შექმნილი ელემენტების ჯგუფის,

მაგალითად, ტექსტის ფრაგმენტის,

ან სათაურისა და რამდენიმე აბზაცის.

იმისთვის, რომ ისინი გადავაადგილოთ

ერთობლივად, როგორც ერთი ერთეული,

ჩვენ უნდა გავეცნოთ HTML-ის ახალ თეგს.

რომელსაც ჩვენ ელემენტების მაჯგუფებელს ვეძახით.

ჩვენ ეს CSS-ის გაცნობამდე არ აგვიხსნია,

რადგან ინის მხოლოდ CSS-სთან

ერთადაა გამოსადეგი.

მათ არ აქვთ აზრობრივი მნიშვნელობა
ბრაუზერისთვის.

პირველი თეგია-

და ჩვენ ამას ვიყენებთ ტექსტის ფრაგმენტის

დაჯგუფებისთვის.

ვთქვათ, ჩვენ გვინდა ფერი,

სიტყვა "Love"(სიყვარული) იყოს წითელი.

ჩვენ უბრალოდ სიტყვის გაფერადება გვინდა,

და არა სათაურის დარჩენილი ნაწილისიც.

ჩვენ მივიტანთ კურსორს სიტყვა "Love"-მდე,

და დავბეჭდავთ ის საწყის თეგს.

ამის შემდეგ, დამასრულებელ თეგს. კარგი.

ახლა ჩვენ გვინდა სტილი შევუცვალოთ

ამ სიმბოლოების -ს.

ჩვენ შეგვიძლია ერთი წესით ყველა -ს

მივცეთ ფერი გვერდზე,

თუმცა, შეიძლება არ გვინდოდეს ყველაფერი
გაწითლდეს.

მოდი მივცეთ

ერთ კლასს, "lovey-dovey" (ისე საყვარელია),

და დავამატოთ წესი მხოლოდ

ამ კლასში გაერთიანებული ელემენტებისთვის.

.lovey-dovey, color: red.

შეხედეთ როგორი გახდა ტექსტი ახლა!

ასე რომ, -ები კარგია ტექსტების
ფრაგმენტების დაჯგუფებისთვს,

როგორ ვაჯგუფებთ

სხვადასხვა ელემენტებს?

სწორედ აქ გვჭირდება  თეგი.

ვთქვათ, ჩვენ გვინდა დავაჯგუფოთ

ეს ქვედა ნაწილი,

ოფიციალური ინფორმაციის სათაური, და

აბზაცები და სურათი მის ქვემოთ.

ამის გასაკეთებლად,

მე მივიყვან კურსორს h3-ის წინ

და დავუწერ -ის საწყის თეგს.

შემდეგ ჩამოვალ ფინალურ აბზაცზე,

და აქ დავწერ დამამთავრებელ თეგს.

ჩვენ უკვე გვაქვს , ახლა კი გვინდა სტილი
მივცეთ მას.

-სთვის სტილის მისაცემად,

მე უნდა მივცე ID (იდენტიფიკატორი).

"official-info" (ოფიციალური ინფორმაცია).

შემდეგ აქ დავამატო წესი ამისთვის.

ჰმ, # ოფიციალური ინფორმაცია და ფონი.

მოდი გავხადოთ ის ნაცრისფერი.

მოდი შევარჩიოთ... ეს... ეს კარგია.

ახლა შეგიძლიათ ნახოთ, რომ  
გახდა

ნაცრისფერი ყუთი, რომელიც მოიცავს

ყველა ელემენტს მასში.

ეს განსხვავდება ყველა ელემენტისთვის

ცალკე ფონის მინიჭებისგან.

თუ ჩვენ ასე გავაკეთებდით, ცარიელი,

არანაცრისფერი სივრცე დაგვრჩებოდა.

ჩვენ უნდა გავაკეთოთ  მაშინ,

როცა გვინდა ფერი მივცეთ ყველაფერს.

თქვენ შეგიძლიათ იფიქროთ -ზე,

როგორც ტექსტის მაჯგუფებელზე,

ხოლო-ზე,

როგორც ელემენტების მაჯგუფებელზე,

მაგრამ, ჩვენ მათი გარჩევის სხვა გზაც გვაქვს.

თქვენ CSS-ის სამყაროში

ორი ტიპის ელემენტებს ხედავთ.

ხაზისშიდა და მასობრივი.

ხაზისშიდა ელემენტის შემდეგ ახალი ხაზი არ არის.

ანუ, თუ გსურთ მათი გამრავლება, 
ყველაფერი ერთსა და იმავე ხაზზე იქნება.

ამის მაგალითები, რომლებზეც უკვე ვისაუბრეთ,

არის სურათები,

თქვენ შეგიძლიათ ნახოთ ეს გამოსახულება,

როგორ ქრება ის ტექსტში.

აქ მის შემდეგ ახალი ხაზია.

მასობრივი ელემენტის შემდეგ ხაზია,

და ეს ის არის, რასაც HTML თეგების უმრავლესობა
ადგენს.

შეხედეთ ყველა მაგალითს ამ გვერდზე,

სათაურები,აბზაცები, ჩამონათვალი.

ბრაუზერმა ყველას შემდეგ ახალი ხაზები ჩასვა,

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

რა კავშირი აქვს ამას -თან ან

თან?

მაშ ასე,  ხაზისშიდა ელემენტს ქმნის,

კი მასობრივ ელემენტს.

ეს ნიშნავს, რომ, თუ თქვენ დაამატებთ 
-ს

და არ დაამატებთ რომელიმე სხვა სტილს,

ბრაუზერი ბლოკად განიხილავს

გვერდის იმ ნაწილს.

ახლა, მათ -ში მოქცეულებს,

ახალი ხაზები აქვთ მდე და შემდეგ.

და შეიძლება თქვენ სწორედ ეს გსურთ.

უბრალოდ, ჩაიბეჭდეთ ეს განსხვავება გონებაში.

ახლა გავაგრძელოთ, რადგან

გაცილებით მეტი რამის გაკეთება
შეგვიძლია ამ თეგების გამოყენებით.

განსაკუთრებით, -ით.