Како увлачити одломке ЦСС-ом

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

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

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

instagram viewer

Синтакса овог својства је једноставна. Ево како бисте додали увлаку текста свим пасусима у документу.

п {
увлачење текста: 2ем;
}

Прилагођавање увлака

На један начин на који можете тачно одредити одломке за увлачење, можете додати класу одломцима за које желите да буду увучени, али за то је потребно да уредите сваки пасус да бисте му додали класу. То је неефикасно и не следи ХТМЛ кодирање најбоље праксе.

Уместо тога, требали бисте размотрити када увлачите одломке. Увлачите пасусе који непосредно следе други пасус. Да бисте то урадили, можете да користите суседни бирач брата или сестре. Овим селектором одабирете сваки пасус којем претходи други одломак.

п + п {
увлачење текста: 2ем;
}

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

п {
маргин-боттом: 0;
паддинг-боттом: 0;
}
п + п {
маргин-топ: 0;
паддинг-топ: 0;
}

Негативне увлаке

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

Рецимо, на пример, да имате пасус који је потомак блок цитата и желите да он буде негативно увучен. Можете написати овај ЦСС:

блоцккуоте п {
увлачење текста: -.5ем;
}

То би дало почетак одломку, који претпоставља да укључује почетни знак цитата, да се мало помери улево да би се створила висећа интерпункција.

Што се тиче маржи и облога

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