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