Paggamit ng CSS upang ihanay ang isang imahe sa kaliwang bahagi ng isang Layout ng webpage
Tumingin sa halos anumang web page ngayon at makikita mo ang isang kumbinasyon ng teksto at mga imahe na binubuo ng karamihan ng mga pahinang iyon. Napakadaling magdagdag ng teksto at mga imahe sa isang pahina . Ang teksto ay naka-code gamit ang karaniwang mga tag ng HTML tulad ng mga talata, listahan, at mga pamagat, habang ang mga imahe ay kasama gamit ang elemento .
Ang kakayahang gumawa ng tekstong iyon at ang mga imaheng iyon ay mahusay na gumagana nang sama-sama ay kung ano ang nagtatakda ng mahusay na mga taga-disenyo ng web! Hindi mo lamang gusto ang iyong teksto at mga imahe na lumitaw nang isa-isa, kung saan ang layout ng elemento ng block-level na ito ay default. Hindi, gusto mo ng ilang kontrol sa kung paano ang teksto at mga imahe daloy magkasama sa kung ano ang sa wakas ay visual na disenyo ng iyong website.
Ang pagkakaroon ng isang imahe na nakahanay sa kaliwang bahagi ng isang pahina habang ang teksto ng pahinang iyon ay dumadaloy sa paligid nito ay isang karaniwang paggamot sa disenyo para sa naka-print na disenyo at din para sa mga web page. Sa mga term sa web, ang epekto na ito ay kilala bilang lumulutang sa imahe . Ang estilo na ito ay nakakamit gamit ang property ng CSS para sa "float". Pinapayagan ng property na ito ang teksto na dumaloy sa kaliwa-nakahanay na imahe sa kanang bahagi nito. (O sa paligid ng isang imahe na nakahanay sa kanan sa kaliwang bahagi nito.) Tingnan natin kung paano makamit ang visual effect na ito.
Magsimula Sa HTML
Ang unang bagay na kailangan mong gawin ay magkaroon ng ilang HTML upang gumana. Para sa aming halimbawa, magsusulat kami ng isang talata ng teksto at magdagdag ng isang imahe sa simula ng talata (bago ang teksto, ngunit pagkatapos ng pagbubukas
tag). Narito kung ano ang hitsura ng HTML markup na tulad nito:
Bilang default, ipapakita sa aming webpage ang larawan sa itaas ng teksto. Ito ay dahil ang mga imahe ay mga elemento ng block-level sa HTML. Nangangahulugan ito na ang browser ay nagpapakita ng mga break ng linya bago at pagkatapos ng elemento ng imahe sa pamamagitan ng default. Babaguhin namin ang default na hitsura sa pamamagitan ng pag-on sa CSS. Una, gayunpaman, magdaragdag kami ng isang halaga ng klase sa aming elemento ng imahe . Ang uri na iyon ay kumikilos bilang isang "hook" na gagamitin namin sa aming CSS mamaya.
Tandaan na ang klase ng "kaliwa" ay walang anuman sa sarili nito! Para sa amin upang makamit ang aming nais na estilo, kailangan naming gamitin ang susunod na CSS .
Mga Estilo ng CSS
Sa pamamagitan ng aming HTML sa lugar, kabilang ang aming katangian ng klase ng "kaliwa", maaari na kami ngayong lumipat sa CSS. Magdaragdag kami ng panuntunan sa aming stylesheet na lumulutang sa larawang iyon at magdagdag din ng isang maliit na padding sa tabi nito upang ang teksto na sa huli ay makakabaligtad sa larawan ay hindi masyadong matigas laban dito. Narito ang CSS na maaari mong isulat:
.left {float: left; padding: 0 20px 20px 0; }Ang estilo na ito ay lumutang sa larawang iyon sa kaliwa at nagdadagdag ng isang maliit na padding (gamit ang ilang mga shorthand ng CSS) sa kanan at ibaba ng imahe.
Kung susuriin mo ang pahina na naglalaman ng HTML na ito sa isang browser, ang imahe ay nakahanay sa kaliwa at ang teksto ng talata ay lilitaw sa kanan nito sa angkop na dami ng spacing sa pagitan ng dalawa. Tandaan na ang halaga ng klase ng "kaliwa" na ginamit namin ay di-makatwirang. Maaari naming tumawag ito ng anumang bagay dahil ang salitang "kaliwa" ay wala sa sarili nitong. Kailangan nito na magkaroon ng isang katangian ng klase sa HTML na gumagana sa isang aktwal na estilo ng CSS na dictates ang mga visual na mga pagbabago na iyong hinahanap upang gumawa.
Mga Alternatibong Paraan upang Makamit ang Mga Estilo na Ito
Ang paraan ng pagbibigay ng elemento ng imahe sa katangian ng isang klase at pagkatapos ay gumagamit ng isang pangkalahatang estilo ng CSS na lumulutang ang elemento ay isa lamang na paraan upang magawa mo ang "kaliwang nakahanay na imahe" na hitsura. Maaari mo ring kunin ang halaga ng klase ng imahe at estilo ito sa CSS sa pamamagitan ng pagsulat ng isang mas tukoy na selector. Halimbawa, tingnan natin ang isang halimbawa kung saan ang imaheng iyon ay nasa loob ng isang dibisyon na may halaga ng klase ng "main-content".
Upang estilo ang larawang ito, maaari mong isulat ang CSS na ito:
.main-content img {float: left; padding: 0 20px 20px 0; }Sa sitwasyong ito, ang aming imahe ay nakahanay sa kaliwa, na may teksto na lumulutang sa paligid nito tulad ng dati, ngunit hindi namin kailangang magdagdag ng dagdag na halaga ng klase sa aming markup. Ang paggawa nito sa antas ay maaaring makatulong sa paglikha ng isang mas maliit na HTML file, na magiging mas madaling pamahalaan at maaari ring makatulong na mapabuti ang pagganap.
Sa wakas, maaari mo pa ring idagdag ang mga estilo nang direkta sa iyong HTML markup, tulad nito:
Ang pamamaraang ito ay tinatawag na "mga inline na estilo ". Hindi ito maipapayo dahil malinaw na pinagsasama nito ang estilo ng isang elemento na may markup sa istruktura nito. Ang mga pinakamahuhusay na gawi sa Web ay nangangasiwa na ang estilo at istraktura ng isang pahina ay dapat manatiling hiwalay. Ito ay lalong nakakatulong kapag kailangang baguhin ng iyong pahina ang layout nito at maghanap ng iba't ibang mga laki ng screen at device na may tumutugon na website. Ang pagkakaroon ng estilo ng pahina na nauugnay sa HTML ay magiging mas mahirap sa mga may- akda ng mga query ng media na ayusin ang hitsura ng iyong site kung kinakailangan para sa mga iba't ibang mga screen.
Orihinal na artikulo ni Jennifer Krynin. Na-edit ni Jeremy Girard noong 4/3/17.