Cleachd CSS gu Ìomhaighean Ionad agus Rudan HTML Eile

Ìomhaighean ionad, teacsa agus eileamaidean bloca nuair a thogas tu làraichean-lìn

Ma tha thu ag ionnsachadh mar a thogas tu làraichean-lìn , is e aon de na cleasan as cumanta a dh'fheumas tu maighstireachd a bhith agad mar a chuireas tu nithean ann am meadhan uinneag a 'bhrabhsair. Dh'fhaodadh seo a bhith a 'ciallachadh a bhith ag amas air ìomhaigh air an duilleig, no dh'fhaodadh e bhith na mheadhan-fìreanachadh teacsa mar cheann-uidhe mar phàirt den dealbhadh.

Is e an dòigh cheart air an t-seallaidhean lèirsinneach seo de ìomhaighean ceudna no teacsa no eadhon an duilleag-lìn agad a choileanadh le bhith a 'cleachdadh Cascading Style Sheets (CSS) . Tha a 'chuid as motha de na togalaichean airson a bhith ag amas air a bhith air a bhith ann an CSS bho dhreach 1.0, agus tha iad ag obair gu math le CSS3 agus le brobhsaran lìn ùra .

Coltach ri iomadh taobhan de dhealbhadh lìn, tha iomadh dòigh ann CSS a chleachdadh airson eileamaidean sa mheadhan ann an duilleag lìn. Thoir sùil air dòighean eadar-dhealaichte gus CSS a chleachdadh gus an sealladh lèirsinneach seo a choileanadh.

Air ais-shealladh air a bhith a 'cleachdadh CSS gu eileamaidean ionad ann an HTML

Faodaidh ionadachadh le CSS a bhith na dhùbhlan do luchd-dealbhaidh lìn tòiseachaidh oir tha uiread de dhòighean eadar-dhealaichte ann gus an stoidhle lèirsinneach seo a choileanadh. Ged a dh'fhaodas na diofar dhòighean-obrach a bhith nan luchd-leasachaidh lìn snog no socrach a tha eòlach nach eil a h-uile modh ag obair air a h-uile h-eileamaid, faodaidh seo a bhith gu math dùbhlanach dha proifeiseantaich lìn nas ùire bhon a tha an diofar dhòighean a 'ciallachadh gum feum fios a bhith aca cuin a chleachdas iad an dòigh-obrach sin. Is e an rud as fheàrr ri dhèanamh tuigse fhaighinn air beagan dhòighean-obrach. Mar a thòisicheas tu gan cleachdadh, ionnsaichidh tu dè an dòigh as fheàrr a tha ag obair anns na suidheachaidhean sin.

Aig ìre àrd, faodaidh tu CSS a chleachdadh airson:

Mòran (mòran) bliadhna air ais, dh'fhaodadh dealbhadairean lìn an teacsa

a chleachdadh gu ìomhaighean sa mheadhan agus teacsa, ach tha an eilim HTML seo a-nis neo-ionnan agus chan eil taic tuilleadh ann le brabhsair lìn ùr. Tha seo a 'ciallachadh nach fheum thu an eileamaid HTML seo a sheachnadh ma tha thu ag iarraidh gun dèan na duilleagan agad gu ceart agus a bhith a' cumail ri ìrean nuadh-aimsireil! Is e an adhbhar a bha an eileamaid seo air a mholadh, gu ìre mhòr, oir bu chòir sgaradh soilleir de structar agus stoidhle a bhith aig làraichean-lìn an latha an-diugh. Tha HTML air a chleachdadh gus structar a chruthachadh fhad 'sa tha CSS a' deisealachadh stoidhle. A chionn 's gu bheil cinntireachd aig ìre lèirsinneach de eileamaid (mar a tha e a' coimhead an àite na tha e), tha an stoidhle sin air a làimhseachadh le CSS, chan e HTML. Is e seo as coireach gu bheil tagaichean
ri structar HTML mì-cheart a rèir ìrean an latha an-diugh. An àite sin, tionndaidh sinn gu CSS gus na h-eileamaidean againn a thaghadh agus a tha stèidhichte.

Teacsa Ionadachadh le CSS

Is e an teacsa as fhasa a bhith ann am meadhan air duilleag-lìn. Chan eil ann ach aon togalach stoidhle ris am feum thu fios a dhèanamh gus seo a dhèanamh: teacs-co-thaobhadh. Gabh stoidhle CSS gu h-ìosal, mar eisimpleir:

p.center {teacs-ceangal: ionad; }

Leis an loidhne CSS seo, bhiodh a h-uile paragraf a chaidh a sgrìobhadh leis a 'chlas meadhan a' dol gu crìch taobh a-staigh a phàrant. Mar eisimpleir, nam biodh am paragraf taobh a-staigh roinn, a 'ciallachadh gur e pàiste den roinn sin a bh' ann, bhiodh e air a chòmhdach gu taobh a-staigh an

.

Seo eisimpleir den chlas seo air a chleachdadh anns an sgrìobhainn HTML:

Tha an teacs seo stèidhichte.

Nuair a chuireas tu teacs le cuideam air an t-seilbh teacsa a-rèir, cuimhnich gum bi e air a chuimseachadh taobh a-staigh na h-eileamaid a tha a 'gabhail a-steach agus nach eil gu riatanach stèidhichte air an duilleag iomlan fhèin. Cuimhnich cuideachd gum faod an teacsa a tha air a dhearbhadh leis an ionad a bhith doirbh a leughadh airson bloic mòra de shusbaint, mar sin cleachd an stoidhle seo gu math. Bidh cinn-naidheachd agus blocaichean beaga teacsa, mar theacsa teasairginn airson artaigil no susbaint eile, gu math furasta a leughadh agus gu math nuair a tha iad air an cuimseachadh, ach bhiodh blocaichean teacsa nas motha, mar an t-artaigil iomlan fhèin, dùbhlanach a chleachdadh an robh an t-susbaint gu h-iomlan ceart. Cuimhnich, tha leughadh an-còmhnaidh cudromach nuair a thig e gu teacsa na làraich-lìn!

Bloic a bhith ag amas air susbaint le CSS

Tha blocaichean nan eileamaidean sam bith air do dhuilleag aig a bheil leud sònraichte agus air an stèidheachadh mar eileamaid bloc-ìre. Gu tric, thèid na blocaichean sin a chruthachadh le bhith a 'cleachdadh an eileamaid HTML

. Is e an dòigh as cumanta air blocaichean meadhain le CSS a bhith a 'suidheachadh nan iomaill chlì is deas gu carbad. Seo an CSS airson roinneadh aig a bheil adhbhar clas de "ionad" air a chur ris:

div.center {
iomall: 0 carbad;
leud: 80em;
}

Bhiodh an clàr-geàrr CSS seo airson na h-earrainn a 'dol a' suidheachadh na h-oirean àrd gu h-àrd gu luach 0, agus bhiodh an taobh clì agus deas a 'cleachdadh "auto." Tha seo a 'gabhail a-steach àite sam bith a tha ri fhaotainn agus ga roinn gu cothromach eadar an dà thaobh de uinneag na h-uinneig, a' toirt buaidh gu h-èifeachdach air an eileamaid air an duilleig.

An seo tha e air a chleachdadh anns an HTML:

Tha am bloc gu lèir seo stèidhichte,
ach tha an teacsa a tha a-staigh air a cho-thaobhadh.

Cho fad 's gu bheil farsaingeachd mhìnichte aig a' bhloc agad, seasaidh e fhèin taobh a-staigh na h-eileamaid anns a bheil e. Cha tèid teacsa a tha anns a 'bhloc sin a chuimseachadh air a shon, ach bidh e air a dhìteadh air fhàgail. Is e seo an t-teacsa teacs a tha air fhàgail a dh 'fhàgail air fhàgail mar bhunait ann am brobhsaran-lìn. Ma bha thu airson gum biodh an teacs a 'dol an cèill cuideachd, dh'fhaodadh tu an t-seilbh a tha sinn a' dèiligeadh ri teacsa a chleachdadh a bha sinn a 'còmhdach nas tràithe an co-bhonn leis an dòigh seo gus an roinn a thòiseachadh.

A 'Dealbhadh Dealbhan le CSS

Ged a bhios a 'chuid as motha de luchd brabhsairean a' taisbeanadh ìomhaighean air an comharrachadh le bhith a 'cleachdadh an aon theacsa a tha sinn a' coimhead air a 'pharagraf mar-thà, chan e deagh bheachd a bhith ann an seo a rèir mar a tha an W3C air a mholadh. Leis nach eil e air a mholadh, tha an-còmhnaidh cothrom gum faodadh dreachan de shealladairean san àm ri teachd roghnachadh an dòigh seo a leigeil seachad.

An àite a bhith a 'cleachdadh teacsa-co-chòrdail ri ìomhaigh a' mheadhan, bu chòir dhut innse don bhrobhsair gu soilleir gu bheil an ìomhaigh na eileamaid bloic-ìre. Mar seo, faodaidh tu a bhith air a sheinn mar gum biodh thu ag iarraidh bloca sam bith eile. Seo an CSS gus seo a dhèanamh:

img.center {
taisbeanaidh: bloc;
iomall-clì: auto;
ceart-taobh: carbad;
}

Agus an seo an HTML a tha airson an ìomhaigh a bu mhath leinn a bhith air a chuimseachadh:

Faodaidh tu cuideachd nithean a chuideachadh le bhith a 'cleachdadh CSS ann an loidhne (faic gu h-ìosal), ach chan eil an dòigh-obrach seo NACH a' moladh bho tha e a 'cur stoidhlichean lèirsinneach ris a' chomharra HTML agad. Cuimhnich, tha sinn airson stoidhle is structar a sgaradh, mar sin a 'cur stoidhliche CSS ris a' chòd HTML agad le bhith a 'briseadh an sgaradh sin agus, mar sin, bu chòir a sheachnadh nuair a ghabhas e dèanamh.

Na h-Eileamaidean Ionadachaidh gu dìreach le CSS

Tha e an-còmhnaidh dùbhlanach ann an dealbhadh lìn a bhith ag amas air nithean dìreach gu dìreach, ach le sgaoileadh Modal Layout Bog sùbailte CSS ann an CSS3, tha dòigh a-nis ga dhèanamh.

Tha co-thaobhadh dìreach dìreach ag obair gu co-chòrdail ri còmhdach gu h-àrd. Tha an t-seilbh CSS dìreach co-chòrdail ris an luach meadhanach.

.vcenter {
dìreach dìreach: meadhan;
}

Is e an rud as ìsle ris an dòigh-obrach seo nach eil a h-uile brabhsairean a 'toirt taic do CSS FlexBox, ged a tha barrachd is barrachd a' tighinn timcheall air modh ùr CSS seo! Gu dearbh, tha a h-uile brabhsairean ùra an-diugh a 'toirt taic don stoidhle CSS seo. Tha seo a 'ciallachadh gur e an aon dhraghan agad le Flexbox a bhiodh gu math nas sine na bhrabhsair.

Ma tha ceistean agad le brabhsairean nas sine, tha an W3C a 'moladh gun teid thu teacsa gu h-ìseal ann an soitheach leis an dòigh a leanas:

  1. Cuir na h-eileamaidean ri bhith air an cuimseachadh taobh a-staigh rud eile, mar div.
  2. Suidhich co-dhiù àirde air an eileamaid a tha ann.
  3. Dèan cinnteach gu bheil eileamaid ann mar chealla bùird.
  4. Suidhich an ceangal dìreach gu "meadhan."

Mar eisimpleir, is e seo an CSS:

.vcenter {
àirde mhionaid: 12m;
taisbeanadh: cill-chlàr;
dìreach dìreach: meadhan;
}

Agus an seo tha an HTML:


Tha an teacsa seo gu h-ìseal air a shealltainn anns a 'bhogsa.

Ionadachadh dìreach agus seann fhrith-rathaidean de Internet Explorer

Tha cuid de dhòighean ann gus Internet Explorer (IE) a neartachadh gu ionad agus an uair sin a 'cleachdadh bheachdan co-chòrdail gus nach bi ach IE a' faicinn nan stoidhlichean, ach tha iad beagan glic agus grànda. Is e an deagh naidheachd, ma tha co-dhùnadh Microsoft mu dheireadh a 'leigeil taic airson tionndaidhean nas sine de IE, gum bu chòir dhaibhsan a tha a' toirt taic do bhrabhsairean air an slighe a-mach a dh'aithghearr, ga dhèanamh nas fhasa do luchd-dealbhaidh lìn dòighean-obrach ùr-nodha leithid CSS FlexBox a chleachdadh a nì an suidheachadh CSS uile, chan e a-mhàin a 'cuimseachadh, nas fhasa do gach neach-dealbhaidh lìn.