Постављање предмета на веб страници је од суштинског значаја за његов укупан дизајн. Иако постоје други начини да утичете на изглед, као што је коришћење таблица ( што не препоручујемо ), најбоље је користити ЦСС .
У наставку ћемо погледати како користити једноставни стил ЦСС-а у облику линије за поравнавање слика, табела, параграфа и још много тога.
Напомена: Ови исти методи се могу користити и на спољним листовима стилова , али пошто се оне односе на појединачне ставке и вјероватно треба да остану на тај начин, најбоље је користити стилинг у линији као што је наведено у наставку.
Поравнајте ставке текста
Ознака параграфа је прво место за постављање ваше веб странице. Отвори и затварање ознака изгледају овако:
<п>Подразумевано поравнање текста у пасусу је на левој страни странице, али такође можете поравнати своје ставке на десно и на средини.
<п стиле = "флоат: ригхт;">Употреба функције флоат вам омогућава да поравнате ставке десно или лево од родитељског елемента. Сви други елементи унутар тог родитељског елемента ће тећи око пливајућег елемента.
Да бисте добили најбољи ефекат са параграфом, најбоље је поставити ширину на параграфу који је мањи од елемента контејнера (родитеља).
<п стиле = "флоат: лефт; видтх: 150пк;">Поравнајте текст унутар ставова
Вероватно најинтересантније поравнање за текст пасуса је "оправдати", што говори претраживачу да прикаже поравнати текст, у суштини, и на десној и левој страни прозора.
Да бисте оправдали текст у параграфу, користили бисте текстуално подешавање својства.
<п стиле = "тект-алигн: јустифи;">Такође можете да поравнате цео текст унутар параграфа са десне стране или са леве стране (подразумевано), користећи својство за поравнавање текста.
<п стиле = "тект-алигн: ригхт;">Текстуално прилагођавање својства ће поравнати текст унутар елемента. Технички гледано, не треба ускладити слике које су садржане у параграфу или другом елементу, али већина претраживача третира слике као инлине за ову особину.
Поравнавање слика
Коришћењем функције флоат на ознаци слике можете одредити постављање слика на страници и начин на који ће се текст окренути око њих.
Као и горе наведени параграф, својство плавог стила у ознаци слике ће позиционирати вашу слику на страници и објаснити прегледачу како да протиче текст и друге елементе око те слике.
<имг срц = "имаге.гиф" алт = "имаге" стиле = "флоат: лефт; видтх: 10пк; хеигхт: 50пк; бордер: 0; />Текст који следи горња ознака слике ће се кретати око слике на десно док се слика приказује лево од екрана.
Ако желим да текст прекине обраду слике, користим јасно својство:
<бр стиле="цлеар: лефт" />Поравнање више од ставова
Међутим, шта ако желите ускладити више од параграфа или слике? Можете једноставно ставити својство стила у сваки пасус, али постоји ознака коју можете користити, што је ефикасније:
<див>Једноставно окружите текст и слике (укључујући ХТМЛ ознаке ) са ознаком и својством стила (флоат или поравнавање текста), а све у тој подели ће бити усклађено како бисте то волели.
Имајте на уму да ће поравнања додате параграфима или сликама у оквиру одељења бити почашћена, превладавајући ознаку.