Conas Téacs a Imréitigh Timpeall Íomhá

Féach ar aon leathanach gréasáin agus feicfidh tú meascán d'ábhar téacs agus íomhánna. Tá comhábhair riachtanacha ag an dá ghné seo de réir mar a éiríonn le láithreán gréasáin. Is é ábhar an téacs a léifear cuairteoirí an láithreáin agus na hinnill chuardaigh a úsáid mar chuid dá halgartaim rangú. Cuirfidh íomhánna leas amhairc ar an suíomh agus cabhróidh sé le hábhar an téacs a chothú.

Tá sé éasca le téacs agus íomhánna a chur le láithreáin ghréasáin. Cuirtear téacs le clibeanna HTML caighdeánacha cosúil le míreanna, ceannteidil, agus liostaí, agus cuirtear íomhánna ar leathanach leis an eilimint . Nuair a chuir tú íomhá le do leathanach gréasáin, áfach, b'fhéidir gur mhaith leat an téacs a shreabhadh in aice leis an íomhá, seachas é a ailíniú thíos (is é an bealach réamhshocraithe a chuirfidh íomhá le cód HTML sa bhrabhsálaí). Go teicniúil, tá dhá bhealach ar féidir leat an cuma seo a bhaint amach trí úsáid a bhaint as CSS (molta) nó trí na treoracha amhairc a chur isteach go díreach isteach sa HTML (ní mholtar é, ós rud é gur mhaith leat an stíl agus an struchtúr a scaradh ar do láithreán gréasáin).

Ag baint úsáide as CSS

Is é an bealach ceart chun an bealach a leagan amach ar leagan amach téacs agus íomhánna leathanach agus ar an gcaoi a léiríonn a stíleanna amhairc sa bhrabhsálaí le CSS . Ní cuimhin leat ach, ós rud é go bhfuilimid ag caint faoi athrú amhairc ar an leathanach (ag déanamh sreabhadh téacs timpeall íomhá), ciallaíonn sé seo gurb í réimse na mBileoga Stíl Cascáideach.

1. Ar dtús, cuir do íomhá ar do leathanach gréasáin. Cuimhnigh aon saintréithe amhairc (cosúil le luachanna leithead agus airde) a eisiamh ón HTML sin. Tá sé seo tábhachtach, go háirithe le haghaidh suíomh gréasáin sofhreagrach áit a mbeidh méid an íomhá éagsúil bunaithe ar an mbrabhsálaí. Cuirfidh bogearraí áirithe, cosúil le Adobe Dreamweaver, leithead agus eolas airde ar íomhánna a chuirtear isteach leis an uirlis sin, mar sin déan cinnte go mbainfidh tú an fhaisnéis seo as an gcód HTML! Déan cinnte, áfach, go gcuirfí teacs alt cuí san áireamh. Seo sampla de conas a d'fhéadfadh do chód HTML breathnú:
2. Chun críocha stíleanna, is féidir leat rang a chur le híomhá. Is é an luach ranga seo a úsáidfimid inár gcomhad CSS. Tabhair faoi deara go bhfuil an luach a úsáidimid anseo treallach, cé go bhfuil sé soiléire againn luachanna "fágtha" nó "ceart" a úsáid, ag brath ar an dóigh ar mian linn ár n-íomhá a ailíniú. Faighimid go bhfuil comhréir shimplí ag obair go maith agus a bheith éasca do dhaoine eile a d'fhéadfadh a bheith acu suíomh a bhainistiú sa todhchaí chun tuiscint a fháil, ach d'fhéadfá aon luach ranga a theastaíonn uait a thabhairt.
   2. De réir féin, ní dhéanfaidh an luach ranga seo aon ní. Ní bheidh an íomhá ailínithe go huathoibríoch ar an taobh clé den téacs. Mar sin, ní mór dúinn dul chuig ár gcomhad CSS anois.

1. I do bhileog bhileog, is féidir leat an stíl seo a leanas a chur leis anois:
   1. .left {
   2. snámhphointe: ar chlé;
   3. stuáil: 0 20px 20px 0;
   4. }
   5. Bain úsáid as an maoin "snámhphointe" CSS de CSS , rud a tharraingfidh an íomhá ó shreabhadh gnáthcháipéise (ar an mbealach a thaispeánfadh an íomhá de ghnáth, agus an téacs a ailíniú faoi bhun é) agus é a ailíniú ar an taobh clé den choimeádán . Téann an téacs a thagann ina dhiaidh sin sa mharcáil HTML agus é ag dul timpeall air anois. Chomh maith leis sin, chuir muid roinnt luachanna greamaitheacha ionas nach mbeadh an téacs seo ach díreach i gcoinne an íomhá. Ina áit sin, beidh spásáil deas ann a bheidh thar a bheith tarraingteach i ndearadh an leathanaigh. Sa réamhspleáchas CSS le haghaidh greamaitheoireachta, chuir 0 luachanna leis go dtí an taobh barr agus taobh clé den íomhá, agus 20 picteilín ar a chlé agus ar an taobh clé. Cuimhnigh, ní mór duit roinnt greamaithe a chur ar an taobh deas d'íomhá ailínithe ar chlé. Bheadh ​​íomhá ailínithe ar dheis (a bhreathnóimid orainn i láthair na huaire) ag baint úsáide as stuáil ar a thaobh clé.
2. Má fheiceann tú do leathanach gréasáin i mbrabhsálaí, ba cheart duit a fheiceáil anois go bhfuil d'íomhá ailínithe le taobh clé an leathanaigh agus go dtéann an téacs timpeall air. Is bealach eile é seo a rá go bhfuil an íomhá "flátáilte ar chlé".

1. Má theastaigh uait an íomhá seo a athrú chun a bheith ailínithe ar dheis (cosúil leis an sampla grianghraf a ghabhann leis an alt seo), bheadh ​​sé simplí. Ar an gcéad dul síos, ní mór duit a chinntiú go bhfuil, chomh maith leis an stíl a chuir muid díreach ar ár CSS le haghaidh luach ranga "fágtha", ní mór dúinn ceann amháin le haghaidh ailíniú ceart. Bheadh ​​sé cosúil leis seo:
   1. .right {
   2. snámhphointe: ceart;
   3. stuáil: 0 0 20px 20px;
   4. }
   5. Is féidir leat a fheiceáil go bhfuil sé seo beagnach comhionann leis an gcéad CSS a scríobh muid. Is é an t-aon difríocht ná an luach a úsáidimid as an maoin "snámhphointe" agus na luachanna greamaithe a n-úsáidimid (cuir roinnt ar thaobh na láimhe clé ar ár n-íomhá seachas an ceart).
2. Ar deireadh, d'athródh tú luach rang an íomhá ó "chlé" go "ceart" i do HTML:
3. Féach ar do leathanach sa bhrabhsálaí anois agus ba cheart do íomhá a ailíniú leis an gceart le téacs a thimpeallacht go snasúil timpeall air. Tuigimid an dá stíleanna seo, "ar chlé" agus "ar dheis" a chur leis na stíleanna stíleanna go léir ionas gur féidir linn na stíleanna amhairc seo a úsáid de réir mar is gá nuair atá muid ag cruthú leathanaigh ghréasáin. Bíonn gnéithe den chineál seo inathúsáidte ag an dá stíl seo agus is féidir linn dul i ngach uair is gá dúinn stíleanna a stíl le téacs a thimpeall timpeall orthu.

Ag baint úsáide as HTML seachas CSS (agus Cén fáth nach n-éireodh leat é seo)

Cé go bhféadfaí téacs a dhéanamh ar fud íomhá le HTML, deir caighdeáin ghréasáin gur féidir CSS (agus na céimeanna thuasluaite) a dhéanamh ionas gur féidir linn struchtúr (HTML) agus stíl (CSS) a shocrú. Tá sé seo thar a bheith tábhachtach nuair a mheasann tú, i gcás roinnt feistí agus leagan amach, nach bhféadfadh an téacs sin sreabhadh timpeall na híomhá. I gcás scáileáin níos lú, d'fhéadfadh sé go dteastódh leagan amach sofhreagrach ar an suíomh gréasáin go ndéanann an téacs ailíniú a dhéanamh faoi bhun an íomhá agus go leathnaíonn an íomhá leithead iomlán an scáileáin. Déantar é seo go héasca le fiosrúcháin sna meáin má tá do stíleanna ar leithligh ó do mharcáil HTML. Sa domhan il-ghléas inniu, nuair a bheidh íomhánna agus téacs le feiceáil go difriúil do chuairteoirí éagsúla agus ar scáileáin éagsúla, tá an scaradh seo riachtanach le rath fadtéarmach agus le bainistiú leathanach gréasáin.