Ang isang elemento ng block-level sa isang dokumento ng HTML (hal. Isang webpage) ay lilitaw nang sunud-sunod. Upang baguhin ang pagkakasunud-sunod upang gawing mas nakakaakit ang pahina o upang mapabuti ang pagiging kapaki-pakinabang nito kailangan mong i-wrap ang mga bloke, kabilang ang mga larawan, upang ang teksto ng pahinang iyon ay dumadaloy sa paligid nito.
Sa mga term sa web, ang epekto na ito ay kilala bilang "lumulutang" ang 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 kanang bahagi sa kaliwang bahagi nito.
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:
Ang teksto ng talata ay napupunta dito. Sa halimbawang ito, mayroon kaming isang larawan ng isang larawan ng ulo, kaya ang tekstong ito ay malamang na tungkol sa tao kung sino ang para sa ulo.
Bilang default, ipapakita ang aming webpage sa imahe sa itaas ng teksto, 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.
Ang teksto ng talata ay napupunta dito. Sa halimbawang ito, mayroon kaming isang larawan ng isang larawan ng ulo, kaya ang tekstong ito ay malamang na tungkol sa tao kung sino ang para sa ulo.
Tandaan na ang uri 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 klase ng katangian ng "kaliwa") maaari na 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 { lumutang pakaliwa; 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. Anumang katagang ginagamit mo ay dapat magkaroon ng katangian ng klase sa HTML na gumagana sa isang aktwal na estilo ng CSS na dictates ang mga visual na pagbabago na iyong hinahanap upang gumawa. 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 "pangunahing-nilalaman" na klase. Upang estilo ang larawang ito, maaari mong isulat ang CSS na ito: .main-content img { lumutang pakaliwa; 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 sa 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 maipapayo dahil 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. Ang pagbubukod na ito ay lalong nakakatulong kapag kailangang baguhin ng iyong pahina ang layout nito at maghanap ng iba't ibang 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. Mga Alternatibong Paraan upang Makamit ang Mga Estilo na Ito
Ang teksto ng talata ay napupunta dito. Sa halimbawang ito, mayroon kaming isang larawan ng isang larawan ng ulo, kaya ang tekstong ito ay malamang na tungkol sa tao kung sino ang para sa ulo. Iwasan ang Mga Estilo ng Inline
Ang teksto ng talata ay napupunta dito. Sa halimbawang ito, mayroon kaming isang larawan ng isang larawan ng ulo, kaya ang tekstong ito ay malamang na tungkol sa tao kung sino ang para sa ulo.
