КампутарыПраграмаванне

Налады ў CSS: адлегласць паміж радкамі

У CSS адлегласць паміж радкамі задаць вельмі проста. Для гэтага ёсць адмысловае ўласцівасць. Але, зразумела, ёсць і шмат іншых параметраў, якія ўніверсальныя, і іх можна прымяніць да тэксту.

Калі ніякіх налад не рабіць, то выстаўляюцца значэнні па змаўчанні. Пры жаданні вы можаце змяніць гэта адлегласць. Значэнне можа быць як у працэнтных суадносінах, так і ў пікселях.

Вышыня радкоў

У CSS адлегласць паміж радкамі можна прадэманстраваць наступным малюнкам.

На малюнку вышэй пазначаны параметры з адпаведнымі адлегласцямі. Тэкст размяшчаецца ў прасторы font-size. Звярніце ўвагу, што лінія тэксту пачынаецца не на падставе, а крыху вышэй. Прастору ніжэй прадугледжана для літар, у якіх ёсць элементы знізу (g, у і так далей).

Звярніце ўвагу, што прастора паміж блокамі font-size называецца leading. У HTML і CSS гэта ўласцівасць ніяк не фігуруе, але яно ёсць у іншых графічных і тэкставых рэдактарах. Напрыклад, у Adobe Photoshop.

На малюнку вышэй паказана, дзе ў "Фотошопе" можна паказаць leading. А побач паказваецца параметр font-size.

Прыклады выкарыстання line-height

У CSS адлегласць паміж радкамі можна задаць адсоткамі. Наглядны прыклад прыведзены ніжэй.

У выпадку маленькага значэння карыстачу вашага сайта чытаць будзе нязручна.

Адлегласць можна змяняць і памерам шрыфта. Калі розніца паміж асноўнымі параметрамі будзе ў лічбах моцна адрознівацца, то гэтая розніца кампенсуецца павелічэннем leading.

тонкасці афармлення

У CSS адлегласць паміж радкамі можна дадаткова наладжваць рознымі водступамі. Разгледзім прыклад на малюнку.

У полі "Элемент" у нашым выпадку будзе тэкст. Padding - гэта водступ ўнутры аб'екта, а margin - водступ за аб'ектам. Border - гэта рамка. Яна можа быць 0 пікселяў, а можа быць і 100.

На наступным малюнку паказаны адразу ўсе водступы, рамка і вышыня лініі тэксту.

Калі ў вас тэкст невялікі, усяго ў адзін радок, або кожны радок у асобным абзацы, то адлегласць можна наладжваць водступамі паміж гэтымі абзацамі. Гэта значыць maring і padding паміж радкамі ў адным элеменце не аказваюць ніякага ўплыву. Яны ствараюць водступы толькі па краях аб'екта. Аб'ект - гэта ўвесь абзац, а не радкі ў ім. Тут важна не заблытацца.

У выпадках, калі шмат радкоў, і ўсё гэта размешчана ў адным аб'екце, шрыфт рэкамендуецца змяняць асноўнымі параметрамі.

Як павялічыць адлегласць паміж радкамі CSS

Адлегласць паміж радкамі HTML можна прапісваць да якога-небудзь класу ці для ўсіх абзацаў у тэксце. Калі вы пакажа вось так: p {line-height: 20px; }, - то абсалютна ўсе абзацы на старонцы будуць са радкамі памерам 20 пікселяў. Калі трэба ў розных месцах розныя памеры, то рэкамендуецца рабіць наступным чынам.

Прапісваем стылі.

.class1 {line-height: 20px; }

.class2 {line-height: 16px; }

.class3 {line-height: 12px; }

Для нагляднасці дадамо рамку, каб вы ўбачылі, што гэта працуе. У наступным яе трэба прыбраць.

Далей ўжываем гэтыя класы. Вынік будзе наступным.

Звярніце ўвагу, што ў трэцім выпадку паласа наехала на тэкст. Усё з-за таго, што памер шрыфта больш, чым вышыня лініі. Таму важна сачыць, каб такіх супярэчнасцяў не было. Калі вы робіце маленькую вышыню лініі, то адпаведна памяншайце шрыфт.

Не рэкамендуецца рабіць занадта маленькі тэкст і маленькая адлегласць паміж радкамі. Паколькі ні адзін карыстальнік не зможа спакойна ўсё гэта прачытаць. У яго хутка стомяцца вочы. Пошукавыя сістэмы гэтак жа кажуць, каб тэкст быў зручным для карыстальніка.

Больш за тое, у апошні час ідзе вялікі ўпор на зручнасць для мабільных карыстальнікаў. Там у рэкамендацыях заўсёды гаворыцца, што памер шрыфта павінен быць нармальным, а не маленькім. Асабліва моцна гэта ўплывае на спасылкі. Пры іх маленькім памеры карыстачу будзе складана выкарыстоўваць навігацыю па сайце.

У пошукавіка "Гугл" ёсць спецыяльны інструмент, які дапамагае ў гэтым аналізе. Ён вельмі зручны для вэб-майстроў.

Вось прыклад вынікаў, якія могуць быць.

Рэкамендуецца выкарыстоўваць іх падказкі, паколькі гэтыя крытэры ўплываюць на пошукавую выдачу.

Similar articles

 

 

 

 

Trending Now

 

 

 

 

Newest

Copyright © 2018 be.birmiss.com. Theme powered by WordPress.