-
CSS-ს გამოყენება ტექსტის ზომის შესაცვლელადაც
შეგვიძლია.
-
უკვე შეგიძლიათ ნახოთ და შეადაროთ
სათაურისა
-
და აბზაცების ზომა, როგორც ბრაუზერმა
უკვე გააკეთა
-
დეფოლტ სტილით, განსხვავებული ზომა გამოიყენა
განსხვავებული ელემენტებისთვის.
-
აქ არის შინაარსის შრიფტის ზომა
-
და უფრო დიდი ზომა თითოეული
დონის სათაურზე.
-
ზოგჯერ, ჩვენ ამ ზომების შეცვლაც
გვსურს.
-
და ჩვენ ამის გაკეთებაა CSS-ის `font-size`(შრიფტის ზომა)
ფუნქციითაც შეგვიძლია.
-
მაგალითად:
-
როგორ გავაკეთოთ მთელი ტექსტი ჩვენს გვერდზე
ცოტა მომცრო ზომის?
-
კარგი, ჩვენ გადავალთ `style` თეგზე,
-
და დავამატებთ CSS წესს`body`თეგზე.
-
და შემდეგ, მასში ჩავსვამთ `font-size` ფუნქციას.
-
ახლა, რა მნიშვნელობა უნდა მივანიჭოთ
`font-size`-ს?
-
რას ვიყენებთ მის გასაზომად?
-
ეს ნამდვილად კარგი შეკითხვაა.
-
რადგან აქ სულ მცირე ათი
განსხვავებული ერთეოულია,
-
CSS-ში `font-size`-სთვის.
-
მოდი დავიწყოთ იმ ერთეულით, რომელიც
ადრეც გინახავთ: პიქსელით.
-
ჩვენ პიქსელებს სურათების ზომების გადასაწყვეტად
ვიყენებდით.
-
და მათ გამოყენებას CSS-შიც განვაგრძობთ.
-
მოდი ვცადოთ 11 პიქსელი.
-
ჰაჰ, ყველაფერი დაპატარავდა.
-
სათაურებიც კი.
-
რატომ დაპატარავდნენ ისინიც?
-
ისინი ისევ იგივე პიქსელების ზომის არ უნდა
არჩენილიყვნენ,რაც ბრაუზერმა დაადგინა მათთვის?
-
არა!
-
რადგან ბრაუზერის დეფოლტ სტილი
არ არის განსაზღვრული პიქსელებში.
-
ისინი განსხვავებული ერთეულითაა განსაზღვრული,
რომლებსაც ჩვენ "em"-ს ვუწოდებთ.
-
და ეს ფარდობითი ერთეულია,
-
რომელიც სათაურის შრიფტის ზომის მასშტაბს
ტექსტის შრიფტის პროპორციულს ხდის.
-
მოდი გაჩვენებთ, რას ვგულისხმობ.
-
გადავიდეთ `h2` სტილის წესზე
-
და დავამატოთ `font-size` ფუნქცია.
-
ამ დროს, პიქსელებში ფიქრის ნაცვლად,
მე ფარდობითად ვფიქრობ.
-
ტექსტთან შედარებით
რამდენჯერ დიდი გვინდა იყოს ``?
-
იქნებ, ორჯერ დიდი?
-
ამისთვის, ჩვენ `2em` უნდა ჩავწეროთ.
-
ახლა ბრაუზერმა უბრალოდ გამოთვალა
-
შრიფტის ზომა პიქსელებში.
-
ბრაუზერმა იცის, რომ შინაარსის ზომა
არის 11 პიქსელი.
-
და თქვენ მიუთითეთ რომ `h2` უნდა იყოს
ორჯერ უფრო დიდი,
-
ასე რომ, ახლა ყველა``
22 პიქსელის სიდიდისაა,
-
თუ ჩვენ შინაარსის ტექსტს 12 პიქსელდამდ
გავზრდით,
-
მაშინ რა სიდიდის იქნება ``?
-
ეს მართალია, 24 პიქსელის.
-
რა მოხდება თუ`h2` შრიფტის ზომას
1.5em -მდე შევცვლით?
-
ახლა `h2` იქნება 12 ჯერ 1.5
-
ანუ 18 პიქსელი ზომის.
-
ჩვენ პიქსელების ზომის მითითება `h2`სთვისაც
შეგვიძლია, ისე როგორც `body`სთვის ვაკეთებდით,
-
და იგივენაირად იმუშავებს.
-
არჩევანი იმაზეა დამოკიდებული,
რომელი უფრო გეადვილებათ.
-
და როგორც უკვე ვთქვი, აქ ბევრი ერთეულის
გამოყენება შეგვიძლია
-
pixel-ებისა და em-ის გარდა.
-
ეს უბრალოდ ორი ყველაზე პოპულარული
ერთეულია.
-
მაგრამ, თუ თქვენ სხვების არჩევა გსურთ,
-
შეამოწმეთ `font-size`-ს მონაცემები
-
ან მოძებნეთ ინტერნეტში ტუტორიალები.
-
შრიფტის ზომის გამოყენების დროა!