Conas Íomhá a Snámh ar Chlé na Téacs ar leathanach Gréasáin

Ag baint úsáide as CSS chun íomhá a ailíniú ar an taobh clé de Leagan Amach leathanach gréasáin

Féach ar leathanach gréasáin beagnach aon lá inniu agus feicfidh tú meascán de théacs agus íomhánna a dhéanann suas an chuid is mó de na leathanaigh sin. Tá sé an-éasca téacs agus íomhánna a chur le leathanach . Déantar códáil ar an téacs ag baint úsáide as clibeanna HTML caighdeánach cosúil le míreanna, liostaí agus ceannteidil, agus na híomhánna san áireamh ag baint úsáide as an eilimint .

Is é an cumas chun an téacs agus na híomhánna sin a dhéanamh go maith le chéile ná cad a leagann dearthóirí gréasáin mór óna chéile! Ní mian leat ach do théacs agus d'íomhánna a bheith le feiceáil i ndiaidh a chéile, agus mar a leagtar amach na heilimintí blocleibhéil de réir réamhshocraithe. Níl, is mian leat roinnt smacht a fháil ar an gcaoi a dtéann an téacs agus na híomhánna le chéile i ndearadh dearaidh do láithreán gréasáin.

Tá íomhá atá ailínithe le taobh clé leathanach agus téacs an leathanaigh sin timpeall air mar chóireáil dearadh coitianta le haghaidh dearadh clóite agus le haghaidh leathanaigh ghréasáin freisin. I dtéarmaí gréasáin, is é an t-íomhá seo a thugtar ar an éifeacht seo . Baintear an stíl seo amach le maoin CSS le haghaidh "snámhphointe". Ceadaíonn an mhaoin seo téacs a shreabhadh ar fud an íomhá ar chlé ar a taobh deas. (Nó timpeall íomhá atá ag teacht ar dheis ar a thaobh clé.) Tabhair dúinn breathnú ar conas an éifeacht radharcach seo a bhaint amach.

Tosaigh le HTML

Is é an chéad rud a theastaíonn uait a dhéanamh ná go bhfuil roinnt HTML ag obair leis. Ar ár sampla, scríobhfaimid mír de théacs agus cuirfimid íomhá ag tús na míre (roimh an téacs, ach tar éis an

tag oscailte). Seo mar a bhreathnaíonn an marc HTML seo:

Téann téacs na míre anseo. Sa sampla seo, ní mór dúinn íomhá de ghrianghraf ceaptha, mar sin b'fhéidir go mbeadh an téacs seo mar gheall ar an duine a bhfuil an t-am ar cheann.

De réir réamhshocraithe, taispeánófaí ár leathanach gréasáin leis an íomhá thuas an téacs. Tá sé seo toisc go bhfuil íomhánna eilimintí blocleibhéil i HTML. Ciallaíonn sé seo go léiríonn an bhrabhsálaí sosanna líne roimh agus tar éis an eilimint íomhá de réir réamhshocraithe. Athróidh muid an cuma réamhshocraithe seo trí athrú ar CSS. Ar dtús, áfach, cuirfimid luach ranga ar ár ngné íomhá . Gníomhóidh an rang sin mar "hook" go n-úsáidfimid inár CSS ina dhiaidh sin.

Téann téacs na míre anseo. Sa sampla seo, ní mór dúinn íomhá de ghrianghraf ceaptha, mar sin b'fhéidir go mbeadh an téacs seo mar gheall ar an duine a bhfuil an t-am ar cheann.

Tabhair faoi deara nach ndéanann an aicme seo "fágtha" rud ar bith ar a shon féin! Chun dúinn ár stíl atá ag teastáil a bhaint amach, ní mór dúinn CSS a úsáid ina dhiaidh sin.

Stíleanna CSS

Le ár n-HTML i bhfeidhm, lena n-áirítear tréith an ranga "left", is féidir linn dul chuig CSS anois. Ba mhaith linn riail a chur leis an mbileog stíl a bheadh ​​ag snámháil an íomhá sin agus cuirfí beagán greamaithe in aice leis, ionas go mbeidh an téacs a chuirfidh an íomhá ar deireadh thiar nach gcuirfidh sé aníos i gcoinne é. Seo an CSS is féidir leat scríobh:

.left {snámhphointe: chlé; stuáil: 0 20px 20px 0; }

Labhraíonn an stíl seo an íomhá sin ar an taobh clé agus cuireann sé greamaithe beag (ag baint úsáide as roinnt bpríosúnachta CSS) go dtí ceart agus bun an íomhá.

Má rinne tú athbhreithniú ar an leathanach ina bhfuil an HTML seo i mbrabhsálaí, bheadh ​​an íomhá ailínithe anois ar an taobh clé agus is cosúil go mbeadh sé ceart ag téacs na paragraf le méid cuí spáis idir an dá cheann. Tabhair faoi deara go bhfuil luach ranga an "chlé" a d'úsáidfimid treallach. D'fhéadfaimis rud ar bith a bheith againn mar nach ndéanann an téarma "fágtha" aon rud ar a shon féin. Ní mór go mbeadh tréith rang sa HTML a oibríonn le stíl iarbhír CSS a dhearbhaíonn na hathruithe amhairc atá á lorg agat.

Bealaí Malartacha chun na Stíleanna seo a bhaint amach

Is é an cur chuige seo maidir le gné an íomhá a bheith ina ghné ranga agus ansin ag baint úsáide as stíl ginearálta CSS a ghluaiseann an eilimint ach bealach amháin is féidir leat an "íomhá ailínithe clé" seo a bhaint amach. D'fhéadfá luach an ranga a bhaint as an íomhá agus é a stíl le CSS trí roghnóir níos sainiúla a scríobh. Mar shampla, féachfaimid sampla ina bhfuil an íomhá sin taobh istigh de roinn le luach ranga "príomh-ábhar".