Íomhánna lárnacha, téacs, agus gnéithe bloc nuair a bhíonn láithreáin ghréasáin á dtógáil
Má tá tú ag foghlaim conas láithreáin ghréasáin a thógáil , is é ceann de na cleasanna is coitianta is gá duit a mháistir ná conas iontrálacha a ionaid i bhfuinneog an bhrabhsálaí. Ciallaíonn sé seo go gcruthófaí íomhá ar an leathanach, nó d'fhéadfadh sé go mbeadh sé mar fhírinniú ar théacs mar cheannlínte mar chuid den dearadh.
Is é an bealach cuí chun an cuma amhairc seo d'íomhánna nó do théacs lárnaithe nó fiú do leathanach gréasáin ar fad a bhaint amach trí úsáid a bhaint as Cascading Style Sheets (CSS) . Bhí an chuid is mó de na hairíonna chun díriú ar CSS a bheith dírithe ar leagan 1.0, agus oibríonn siad go hiontach le CSS3 agus le brabhsálaithe gréasáin nua-aimseartha.
Cosúil le go leor gnéithe de dhearadh gréasáin, tá bealaí éagsúla ann chun CSS a úsáid chun eilimintí a ionaid i leathanach gréasáin. Déanfaimid breathnú ar bhealaí éagsúla chun CSS a úsáid chun an cuma amhairc seo a bhaint amach.
Ar Forbhreathnú ar Úsáid CSS le hEilimintí Lárionaid i HTML
Is féidir le hionadú le CSS a bheith ina dhúshlán do dhearthóirí gréasáin a thosú toisc go bhfuil an oiread sin bealaí ann chun an stíl amhairc amháin seo a bhaint amach. Cé gur féidir go mbeadh éagsúlacht na modhanna ina bhforbróirí gréasáin deas nó séasúracha a bhfuil a fhios acu nach bhfuil gach teicníc ag obair ar gach gné, is féidir go mbeadh sé seo go mór dúshlánach do ghairmithe gréasáin níos nuaí ós rud é go gciallaíonn an réimse leathan modhanna gur gá dóibh a fháil amach cén t-úsáid a bhaint as an gcur chuige sin. Is é an rud is fearr le déanamh ná tuiscint a fháil ar roinnt cur chuige. De réir mar a thosaíonn tú iad a úsáid, beidh tú ag foghlaim cén modh is fearr a oibríonn i gcásanna.
Ag ardleibhéal, is féidir leat CSS a úsáid chun:
- Lárionad téacs
- Ionad eilimint blocleibhéil (cosúil le rannán)
- Ionad íomhá
- Cuir bloc nó íomhá ar lár ingearach
Go leor (go leor) bliain ó shin, d'fhéadfadh dearthóirí gréasáin an ghné
Téacs a Ionaid le CSS
Is é an rud is éasca a chur ar lár ar leathanach gréasáin téacs. Níl aon mhaoin stíl amháin ann a theastódh uait seo a dhéanamh: téacs-ailíniú. Glac an stíl CSS thíos, mar shampla:
p.center {téacs-ailíniú: ionad; }
Leis an líne CSS seo, bheadh gach mír scríofa leis an rang lárnach dírithe go cothrománach taobh istigh dá máthairghné. Mar shampla, dá mbeadh an mhír taobh istigh de rannán, rud a chiallaíonn gur leanbh í an roinn sin, bheadh sé dírithe go cothrománach taobh istigh den
Seo sampla den rang seo a cuireadh i bhfeidhm sa doiciméad HTML:
Tá an téacs seo dírithe.
Agus téacs á gcur ar lár leis an téacs-ailíniú ar an maoin, cuimhnigh go mbeidh sé dírithe laistigh den eilimint ina bhfuil sé agus ní gá go lárnach a bheith laistigh den leathanach iomlán é féin. Chomh maith leis sin cuimhnigh gur féidir an téacs a bhfuil údar leis an ionad a bheith deacair a léamh le haghaidh bloic móra ábhar, mar sin bain úsáid as an stíl seo go gasta. Is minic go bhfuil na cinnlínte agus na bloic beaga téacs, cosúil le téacs teaser le haghaidh alt nó ábhar eile, le léamh agus fíneáil nuair a bhíonn siad dírithe, ach bheadh bloic níos mó téacs, cosúil leis an airteagal iomlán féin, dúshlánach a ithe dá mbeadh an t-ábhar go hiomlán lár údar maith. Cuimhnigh, is é an inléiteacht eochair i gcónaí nuair a thagann sé le téacs an láithreáin ghréasáin!
Bloic Ábhar a Ionaid le CSS
Tá aon chuid de na blocanna ar do leathanach a bhfuil leithead sainithe acu agus tá siad bunaithe mar eilimint blocleibhéil. De ghnáth, cruthaítear na bloic seo trí úsáid a bhaint as an eilimint HTML
div.center {
corrlach: 0 uathoibríoch;
leithead: 80em;
}
Leis an lámhscríbhinn CSS seo don mhaoin imeall, leagfadh na corrlaigh barr agus bun ar luach 0, agus úsáidfí "uathoibríoch" ar chlé agus ar dheis. Go bunúsach, glacann sé aon spás atá ar fáil agus déantar é a chothromú go cothrom idir an dá thaobh den fhuinneog dearc, agus an eilimint ar an leathanach a chur i bhfeidhm go héifeachtach.
Seo cuirtear i bhfeidhm sa HTML:
ach tá an téacs taobh istigh fágtha ailínithe.
Chomh fada agus a bheidh leithead sainithe ag do bloc, beidh sé féin laistigh den eilimint ina bhfuil sé. Ní bheidh an téacs atá sa bhloc sin dírithe laistigh de, ach beidh sé de cheart ag an bhfoireann. Is é seo an téacs becaus atá fágtha ar chlé sa réamhshocraithe i mbrabhsálaithe gréasáin. Má theastaigh uait go raibh an téacs dírithe freisin, d'fhéadfá úsáid a bhaint as an t-aistreofar téacs a d'éirigh linn a chlúdach i gcomhar leis an modh seo chun an roinn a ionadú.
Ionadáil Íomhánna le CSS
Cé go taispeánfaidh an chuid is mó de na brabhsálaithe íomhánna atá dírithe ar úsáid a bhaint as an maoin chéanna a ailíniú téacs a d'fhéach muid ar aghaidh cheana féin don mhír, ní smaoineamh maith é brath a bheith aige ar an teicníc sin toisc nach moltar an W3C . Ós rud é nach bhfuil sé molta, tá seans ann i gcónaí go bhféadfadh leaganacha todhchaí na brabhsálaithe neamhaird a dhéanamh ar an modh seo.
In ionad úsáid a bhaint as téacs-ailíniú íomhá a ionaid, ba cheart duit a rá go soiléir don bhrabhsálaí gur gné blocleibhéil í an íomhá. Ar an mbealach seo, is féidir leat é a ionadú mar go mbeadh aon bhloc eile agat. Seo an CSS chun seo a tharlóidh:
img.center {
taispeáint: bloc;
imeall-chlé: uathoibríoch;
ceart corrlach: uathoibríoch;
}
Agus anseo an HTML atá ann don íomhá ar mhaith linn a bheith dírithe:
Is féidir leat rudaí a ionaid freisin ag baint úsáide as CSS in-líne (féach thíos), ach NACH moltar an cur chuige seo ós rud é go gcuireann sé stíleanna amhairc isteach i do mharcáil HTML. Cuimhnigh, ba mhaith linn stíl agus struchtúr a scaradh, agus mar sin ag cur stíleanna CSS ar do chód HTML agus an scaradh sin a bhriseadh agus, mar sin, ba chóir é a sheachaint nuair is féidir.
Na hEilimintí a Lárnú go hIngearach le CSS
Bhí dúshlán i gcónaí i ndearadh gréasáin ag díriú ar rudaí go hingearach i gcónaí, ach nuair a scaoileadh Modúl Leagan amach Bosca Solúbtha CSS i CSS3, tá bealach ann anois é a dhéanamh.
Oibríonn ailíniú ingearach mar aon leis an ailíniú cothrománach atá clúdaithe thuas. Tá maoin CSS ingearach leis an meánluach.
.vcenter {
ingearach-ailíniú: lár;
}
Is é an t-easnamh atá leis an gcur chuige seo ná nach dtugann gach brabhsálaí tacaíocht do CSS FlexBox, cé go bhfuil níos mó agus níos mó ag teacht ar aghaidh chuig an modh leagan nua CSS seo! Go deimhin, tá gach brabhsálaí nua-aimseartha inniu anois ag tacú leis an stíl CSS seo. Ciallaíonn sé seo go mbeadh an t-aon imní ort le Flexbox leagan bhrabhsálaí i bhfad níos sine.
Má tá ceisteanna agat le brabhsálaithe níos sine, molann W3C go dtéann tú téacs go hingearach i gcoimeádán ag baint úsáide as an modh seo a leanas:
- Cuir na heilimintí le lárnú taobh istigh de eilimint ina bhfuil, mar shampla div.
- Socraigh airde íosta ar an eilimint ina bhfuil.
- Dearbhú go bhfuil eilimint ina bhfuil cill tábla.
- Socraigh an ailíniú ingearach go "lár."
Mar shampla, is é seo an CSS:
.vcenter {
min-airde: 12em;
taispeáint: tábla-chill;
ingearach-ailíniú: lár;
}
Agus anseo tá an HTML:
Tá an téacs seo dírithe go hingearach sa bhosca.
Ionaid Ingearach agus Leaganacha Scothaosta de Internet Explorer
Tá roinnt bealaí ann chun Internet Explorer (IE) a chumasú chun ionad a dhéanamh agus tuairimí coinníollach a úsáid ionas go bhfeiceann ach IE na stíleanna, ach tá siad beagán bréagach agus gránna. Is é an dea-scéal go bhfuil cinneadh le déanaí ag Microsoft titim tacaíochta a thabhairt do leaganacha níos sine de IE, ba cheart go mbeadh na brabhsálaithe gan tacú leo ar a mbealach amach go luath, rud a fhágann go bhfuil sé níos éasca do dhearthóirí gréasáin cur chuige nua-aimseartha a úsáid mar CSS FlexBox a dhéanfaidh gach leagan CSS, ní hamháin ag díriú, níos éasca do gach dearthóir gréasáin.