Користећи Тект-Индент Проперти и суседне селекторе
Добар веб дизајн често се односи на добру типографију. Пошто је толико садржаја веб странице приказан као текст, у стању је да стилу тај текст буде привлачан и ефикасан, важна је вјештина коју поседује као веб дизајнер. Нажалост, ми немамо исти ниво типографске контроле на мрежи који радимо у штампи. То значи да не можемо увијек поуздано обликовати текст на веб страници на исти начин као што смо то могли учинити у штампаном предмету.
Један уобичајени стил параграфа који често видите у штампи (и који можемо да се обнови на мрежи) је где је прва линија тог пасуса удаљена од једног простора таб . Ово омогућава читатељима да виде где један пасус почиње, а други се завршава.
Овај визуелни стил не видите толико на веб страницама, јер претраживачи по дефаулту приказују параграфе са простором испод њих као начин да се прикаже где се један завршава, а други почиње, али ако желите да стишете страницу да бисте имали тај печат - инспирисани стил индентације на параграфима, то можете учинити са својственим стилом.
Синтакса за ову особину је једноставна. Ево како бисте додали текстуалну индентацију свим параграфима у документу.
п {текст-индент: 2ем; }Прилагођавање индентова
Један од начина на који можете прецизно одредити параграфе у инденту, можете додати класу на параграфе које желите раздвојити, али то захтијева да уредите сваки параграф да бисте му додали класу. То је неефикасно и не следи најбоље ХТМЛ кодирање кодирања .
Уместо тога, треба узети у обзир када ставите параграфе. Ставите параграфе који директно прате други став. Да бисте то урадили, можете користити суседни селектор. Овим селекторком изаберете сваки став који одмах претходи други став.
п + п {текст-индент: 2ем; }С обзиром да се налазите у првом реду, такође треба осигурати да ваши ставови немају додатни простор између њих (што је подразумевани прегледач). Стилски гледано, требало би да имате или размак између параграфа или алинеја прве линије, али не и обоје.
п {маргин-боттом: 0; паддинг-боттом: 0; } п + п {маргин-топ: 0; паддинг-топ: 0; }Негативе Индентс
Такође можете користити својство текста и индент , заједно са негативном вредношћу, да бисте покренули линију која иде лево, а не десно као нормална индентација. То можете учинити ако линија почиње са ознаком на којој се наводи, тако да се знак цитата појављује на благу маргину лево од пасуса, а слова су и даље лепо лево поравнање.
Рецимо, рецимо, да имате параграф који је потомак блокотеке и желите да је негативно укопан. Можете написати овај ЦСС:
блоцккуоте п {текст-индент: -.5ем; }Ово би дало почетак параграфа, који претпоставља да укључује карактер почетног цитата, да се мало помери лево да би се створила висока пунктуација.
Што се тиче маргина и паддинга
Често у веб дизајну користите маргине или паддинг вредности да померате елементе и креирате бијели простор. Међутим, та својства неће радити на постизању ефекта раздвојених ставки. Ако примените било коју од ових вредности у параграфу, цео текст тог става, укључујући сваку линију, биће размакнут уместо само прве линије.