ХТМЛ туториали: ЦСС размак између редова

Размак између редова ЦСС је веома неопходан за дизајн текста. Сваки стручњак их увек користи ако креира леп сајт. Захваљујући овим атрибутима, можете извршити било коју операцију са текстом.

По правилу, већина дизајнера не воли подразумевани распоред текста у хтмл-у. ЦСС размак између редова омогућава вам да прилагодите скоро све што можете замислити. А ако одеш дубоко, можеш да радиш оно на што ниси ни помислио.

Како направити проред текста у ЦСС-у

Важно је разумети да можете поставити величину линија, индентова, итд. На све елементе где постоји текст. На пример, сви ови атрибути су одлични за:

• параграф;
• листе;
• ;
• столови;
• хеадерс;
• и све остало где објављујете текст.

С обзиром на размак између редова ЦСС, прво обратите пажњу на следеће атрибуте.

У "Пхотосхопу" постоји концепт Леадинг. Не постоји такав атрибут у ЦСС-у, али захваљујући томе може се објаснити суштина. Заправо, то је растојање између линија.

У ЦСС-у, величина линије се подешава помоћу параметра лине-хеигхт и фонт-сизе. Као што видите, на слици се јасно види да је величина фонта величина фонта. Ни једно писмо не прелази та ограничења.

Висина линије је растојање од средине горњег водећег до средине доњег водећег. Све то је приказано на слици.

Имајте на уму да ако наведете висину линије мање од величине фонта, линије ће се преклапати. Будите сигурни да слиједите ово како бисте избјегли такву ситуацију.

Неки људи мисле зашто је величина фонта растегнута ниже од линије са словима. Једноставно је. На крају крајева, постоје слова која су нижа од главног нивоа линије. Доња слика је јасан пример где се симболи користе, растегнути горе и доле.

Као што видите, слова заузимају читав распон величине фонта. И висина линије је већа, и једнак простор се додаје на обе стране.

Вредност атрибута лине-хеигхт може бити било која:

• пикелс;
• инцхес;
• итемс;
• интерес;
• и друге које се користе у ЦСС-у.

Не можете одредити негативну вриједност. На пример, ако наведете фактор који је једнак једном и по, тада добијате стандардни интервал од један и по у тексту.

Ако наведете у процентима, имајте на уму да је 100% у висини линије еквивалентно вредности величине фонта.

Осим тога, можете одредити вриједност нормалног или наслиједити. Ако наведете нормално, раздаљина између линија ће аутоматски бити израчуната од стране претраживача по свом нахођењу. Вредност може бити различита, јер зависи од прегледача. Препоручује се постављање одређеног броја тако да сви корисници имају исту ствар.

Наследи значи да ће вредност бити потпуно иста као и основни елемент.

Детаљнији дизајн

Проред ЦСС линије није заправо ограничен на горе наведене атрибуте. Удаљеност се и даље прилагођава атрибутима маргине и паддинг. Ако наведете атрибут тачно као маргин = '5пк', онда ће са свих страна линије (пасуса) бити додата удаљеност од 5 пиксела.

Ако треба да наведете само изнад пасуса, онда можете да наведете маргину. Превод је веома једноставан. Тако ће бити могуће поставити увлаке са сваке стране.

Имајте на уму да постоји и атрибут паддинг. Ради потпуно исто као маргина. Можете подесити и укупни удубљење и одређени правац (лево, десно, горе, доле).

Погледајте пажљиво горњи цртеж. Маргина - увлачење изван објекта, и паддинг - унутра.

Ови атрибути су глобални. Могу се применити на све - слике, табеле, текст, везе и тако даље.

Запамтите ово једном за свагда. Ово је веома важна тачка у дизајну објеката. На пример, захваљујући маргини, можете да наведете увлаке између текста и слика у њему. Ако ове алинеје нису присутне, текст ће бити постављен близу слике.

Ако имате текст у табели, онда користите паддинг да бисте спречили да се текст задржи на ивицама табеле, јер ово изгледа ружно. Ако поставите увлачење од најмање 5 пиксела, он ће већ изгледати много боље. Поред висине, линија има ширину атрибута.

Понекад је ово веома неопходна имовина. На доњој слици приказан је пример различите ширине текста.

Пример дизајна

Стварајући дизајн веб сајта, увек треба да учините текст читљивим што је више могуће. Ако је кориснику тешко да прочита текст (премали или превелики), он ће једноставно затворити ваш сајт.

Покушајте да упоредите два пасуса приказана на слици испод. Који текст желите да прочитате?

Проред ЦСС линије је дизајниран тако да олакшава перцепцију текста. Такође не заборавите да се различити фонтови могу разликовати по почетној висини.

Ради јасноће, можете проверити у било ком едитору. Упоредите неколико фонтова.

Напомињемо да су сви фонтови написани у 24 пиксела. Као што видите, разликују се по висини и ширини слова. Ако упоредите димензије више, разлика ће бити очигледнија.

ЦСС: проред у листи

Подешавање интервала се примењује у листама. Поред тога, у стиловима листа, горе описана маргина и паддинг су карактеристични. Захваљујући овој листи постају лепше од стандарда. Користећи све ове атрибуте, можете поставити:

• Висина ставки листе.
• Увући текст за лево.
• Увуци за линије изнад и испод.
• Максимална ширина сваке ставке.

Закључак

Поседовање таквог скупа атрибута, можете играти са дизајном не само линија, већ и свега што желите. Ово су глобални параметри којима апсолутно сви елементи подлежу (изузетак је величина фонта, пошто је само за текст).