Სწავლა წამყვანი ვებ დიზაინი

ვებ დიზაინი ყოველთვის ნასესხები პრინციპები და განმარტებები მსოფლიოს გრაფიკული და ბეჭდვითი დიზაინი. ეს განსაკუთრებით მნიშვნელოვანია, როდესაც საქმე ეხება ვებ ტიპოგრაფიას და იმ გზას, რომელშიც წერილობითი ფორმებია ჩვენს ვებ-გვერდებზე. ეს პარალელები ყოველთვის არ არის 1-დან 1-მდე თარგმანით, მაგრამ, რა თქმა უნდა, შეგიძლიათ იხილოთ, სადაც ერთი დისციპლინა გავლენას ახდენს მეორეზე. ეს განსაკუთრებით ცხადია, როდესაც განიხილავს ტრადიციულ ტიპოგრაფიულ ტერმინს "წამყვანი" და CSS- ის ურთიერთობა, რომელიც ცნობილია როგორც "ხაზის სიმაღლე".

წამყვანი მიზანი

როდესაც ადამიანები იყენებდნენ ხელნაკეთი ლითონის ან ხის წერილებს, რათა ტიპოგრაფიის შექმნა ბეჭდური გვერდისთვის, თხრილის ლითონის თხრილები მოთავსებული იყო ჰორიზონტალურ ტექსტებს შორის, რათა შეიქმნას სივრცე ამ ხაზებს შორის. თუ უფრო დიდი სივრცე გინდოდა, უფრო დიდი ცალი ჩაიწერთ. ასე იყო ტერმინი "წამყვანი". თუ თქვენ ტერმინი "წამყვანი" უყურებდით წიგნში ტიპოგრაფიულ დიზაინსა და დირექტორებს, ის წაიკითხავდა რაიმე ეფექტს - "დაშორება ტიპიური ხაზების საფუძვლებს შორის".

წამყვანი ვებ დიზაინი

ციფრულ დიზაინში, ტერმინი წამყვანი კვლავ გამოიყენება ტექსტის ხაზებს შორის ინტერვალი. ბევრი პროგრამა იყენებს ამ ზუსტ ტერმინს, მიუხედავად იმისა, რომ ფაქტობრივად ტყვია არ არის გამოყენებული ამ პროგრამებში. ეს არის დიდი მაგალითი იმისა, რომ დიზაინის სესხების ახალი ფორმების ტრადიციები ტრადიციულ ხასიათს ატარებს, მიუხედავად იმისა, რომ ამ პრინციპის ზუსტი განხორციელება შეიცვალა.

როდესაც საქმე ვებ დიზაინი, არ არსებობს CSS ქონების "წამყვანი." ამის ნაცვლად, CSS- ის ქონება, რომელიც ამ ვიზუალური გამოსახულების ტექსტს შეასრულებს, ხაზს სიმაღლე ეწოდება. თუ გსურთ ტექსტს დამატებითი სივრცე ჰორიზონტალური ხაზების ტექსტში, გამოიყენოთ ეს ქონება. მაგალითად, აცხადებთ, რომ თქვენ სურდათ გაზარდოთ ხაზის სიმაღლე ყველა პუნქტში თქვენი საიტის

ელემენტის შიგნით, შეგიძლია ამის გაკეთება:

ძირითადი p {ხაზის სიმაღლე: 1.5; }

ეს ახლა იქნება 1.5-ჯერ ნორმალური ხაზის სიმაღლე, რომელიც დაფუძნებულია გვერდის ნაგულისხმები შრიფტის ზომაზე (ჩვეულებრივ 16px).

ხაზის სიმაღლის გამოყენებისას

როგორც ზემოთ აღინიშნა, ხაზის სიმაღლე შესაბამისია ტექსტის ხაზების ტექსტის პუნქტებში ან ტექსტის სხვა ბლოკებში. თუ ხაზებს შორის ძალიან მცირე სივრცეა, ტექსტს შეუძლია დაამახინჯოს და რთულია თქვენი საიტისთვის მაყურებლისთვის წაკითხული. ანალოგიურად, თუ ხაზები გაცილებით დაშორებულია გვერდზე, ნორმალური ნაკადი წაიშალოს და მკითხველს ექნება პრობლემები თქვენს ტექსტში ამის გამო. ამიტომაც გინდა რომ გამოვიყენოთ ხაზის სიმაღლის ინტერვალის შესაბამისი ოდენობა. თქვენ ასევე შეგიძლიათ შეამოწმოთ თქვენი დიზაინი რეალურ მომხმარებლებთან, რათა მიიღოთ თავიანთი კავშირი წაკითხვის გვერდზე .

ხაზის სიმაღლის გამოყენებისას

არ აღრეული ხაზი სიმაღლე ერთად padding ან მინდვრები, რომ თქვენ გამოიყენოთ რომ დაამატოთ whitespace თქვენს გვერდზე დიზაინი, მათ შორის, ქვემოთ სასაქონლო ან პუნქტები. ეს ინტერვალი არ არის წამყვანი, და ამიტომ არ არის სიფრთხილით ხაზის სიმაღლე.

თუ გსურთ დაამატოთ სივრცე გარკვეული ტექსტურ ელემენტებში, გამოიყენეთ ზღვარი ან პანდირება. წინა CSS- ის მაგალითზე ვბრუნდებით, ჩვენ შეგვიძლია დაამატოთ ეს:

ძირითადი p {ხაზის სიმაღლე: 1.5; ზღვარი-ქვედა: 24px; }

ეს ჯერ კიდევ გვჭირდება 1.5 ხაზი სიმაღლე ტექსტის ხაზებს შორის ჩვენი გვერდის პარაგრაფისთვის (მათ შორის

ელემენტის შიგნით). იმავე პარაგრაფებში ასევე იქნება 24 პიქსელი თეთრკანიანი თითოეული მათგანი, რომელიც საშუალებას აძლევს ვიზუალური შესვენების საშუალებას, რაც საშუალებას აძლევს მკითხველს ადვილად იდენტიფიცირება ერთი პუნქტიდან მეორეზე და გააკეთოს ვებ-გვერდის გაკეთება უფრო ადვილია. თქვენ ასევე შეგიძლიათ გამოიყენოთ padding ქონების ადგილზე ზღვარი აქ:

ძირითადი p {ხაზის სიმაღლე: 1.5; padding-bottom: 24px; }

თითქმის ყველა შემთხვევაში, ეს იქნებოდა იგივე, რაც წინა CSS.

ამბობთ, რომ თქვენ გსურთ დაამატოთ ინტერვალი ქვემოთ მოყვანილ სიაში, რომელიც იყო "სერვის-მენიუს" კლასის სიაში, გამოიყენეთ ზღვარი ან პანდირება, ამის გაკეთება არა ხაზის სიმაღლეზე. ასე რომ, ეს იქნება შესაბამისი.

. სერვისები-მენიუ li { აქ მხოლოდ ხაზის სიმაღლის გამოყენება გსურთ, თუ სიის ელემენტების შიგნით ტექსტის ინტერვალი დააყენეთ, ვთქვათ, რომ მათ ჰქონდათ ტექსტის ხანგრძლივი გაშვება, რომელსაც შეეძლო თითოეული ტყვიის წერტილისთვის მრავალრიცხოვანი ხაზები.