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