A 'cleachdadh CSS gus ìomhaigh a cheangal ri taobh clì duilleag-lìn Leigeil
Seall air làrach lìn cha mhòr an-diugh agus chì thu measgachadh de theacsaichean agus de dhealbhan a 'dèanamh suas a' mhòr-chuid de na duilleagan sin. Tha e gu math furasta teacsa agus ìomhaighean a chur ri duilleag . Tha an teacsa air a chòdachadh le tagaichean HTML àbhaisteach leithid paragrafan, liostaichean agus cinnidhean, fhad 'sa tha na h-ìomhaighean air an gabhail a-steach a' cleachdadh an eileamaid .
Tha an comas a bhith a 'dèanamh an teacsa sin agus na h-ìomhaighean sin ag obair gu math còmhla a tha a' suidheachadh dhealbhadairean lìn eadar-dhealaichte bho chèile! Chan eil thu dìreach ag iarraidh do theacsa agus do dhealbhan nochdadh an dèidh a chèile, agus sin mar a bhios na h -eileamaidean blocaidh seo a 'tighinn gu crìch. Chan e, tha thu ag iarraidh beagan smachd air mar a tha an teacsa agus na h-ìomhaighean a 'sruthadh còmhla ann an dè a bhios aig a' cheann thall mar dhealbhadh lèirsinneach do làrach-lìn.
Tha dealbh a tha ceangailte ri taobh clì na duilleige fhad 'sa tha teacsa na duilleige sin a' sruthadh timcheall air mar leigheas dealbhaidh cumanta airson dealbhadh clò-bhuailte agus cuideachd airson duilleagan lìn. Ann an teirmichean lìn, thathas a 'toirt buaidh air an bhuaidh seo mar a tha an ìomhaigh a' seòladh . Tha an stoidhle seo air a choileanadh le seilbh CSS airson "flùraichean". Tha an togalach seo a 'leigeil le teacsa a bhith a' sruthadh timcheall an ìomhaigh clì-co-cheangailte ris an taobh dheas aige. (No timcheall air ìomhaigh ceangailte gu ceart ris an taobh chlì.) Thoir sùil air mar a choileanas sinn an sealladh lèirsinneach seo.
Tòisich le HTML
Is e a 'chiad rud a dh'fheumas tu a dhèanamh a th' ann an HTML gus obrachadh còmhla. Airson an eisimpleir againn, sgrìobhaidh sinn paragraf de theacsa agus cuiridh sinn ìomhaigh aig toiseach a 'pharagraf (ron teacsa, ach an dèidh an
tag fosglaidh). Seo mar a tha coltas HTML mar seo:
Gu bunaiteach, shealladh an duilleag-lìn againn leis an ìomhaigh os cionn an teacsa. Tha seo air sgàth 's gu bheil ìomhaighean eilidean bloic-ìre ann an HTML. Tha seo a 'ciallachadh gu bheil am brabhsair a' sealltainn briseadh loidhne ro agus às dèidh an eileamaid dheilbh gu bunaiteach. Nì sinn an sealladh bunaiteach atharrachadh le bhith a 'tionndadh gu CSS. An toiseach, ge-tà, cuiridh sinn luach clas ris an eileamaid ìomhaigh againn . Bidh an clas sin mar "dubhan" a chleachdas sinn nar CSS nas fhaide air adhart.
Thoir an aire nach eil a 'chlas seo "clì" a' dèanamh dad idir leis fhèin! Airson ar n-stoidhle a tha sinn ag iarraidh a choileanadh, feumaidh sinn CSS a chleachdadh an ath rud.
CSS Styles
Le ar HTML stèidhichte, a 'gabhail a-steach an gnè sa chlas againn air "clì", is urrainn dhuinn a-nis tionndadh gu CSS. Chuireadh sinn riaghailt ris an stoidhle stoidhle againn a bhiodh a 'seòladh na h-ìomhaigh sin agus cuideachd cuiridh sinn gleansadh beag ri taobh gus nach dèan an teacsa a bhios a' dol timcheall na h-ìomhaigh gu mòr an aghaidh e gu dlùth. Seo an CSS a dh 'fhaodadh tu sgrìobhadh:
.left {flùr: clì; gleadachadh: 0 20px 20px 0; }Bidh an stoidhle seo a 'giùlan an ìomhaigh sin chun an làimh chlì agus a' cur gleansaidh beag (a 'cleachdadh cuid de làimh-làimhe CSS) gu taobh deas is bonn na h-ìomhaigh.
Ma rinn thu ath-bhreithneachadh air an duilleig anns a bheil an HTML seo ann am brabhsair, bhiodh an dealbh a-nis air a chuairteachadh ris an taobh chlì agus nochd teacsa na paragraf gu ceart le farsaingeachd iomchaidh eadar an dà rud. Thoir fa-near gu bheil luach a 'chlas aig "clì" a chleachd sinn gu neo-riaghailteach. Dh'fhaodadh sinn rudeigin a ghairm oir chan eil an abairt "clì" a 'dèanamh dad air a shon fhèin. Feumaidh seo adhbhar sa chlas a bhith agad anns an HTML a tha ag obair le stoidhle CSS fhèin a tha a 'riaghladh nan atharrachaidhean lèirsinneach a tha thu airson a dhèanamh.
Dòighean eile airson na dòighean sin a choileanadh
Chan eil an dòigh-obrach seo a thaobh a bhith a 'toirt an seòrsa ìomhaigh gnè clas agus an uairsin a' cleachdadh stoidhle CSS coitcheann a tha a 'ruith an eileamaid ach aon dòigh air an urrainn dhut an "ìomhaigh co-cheangailte clì" seo a choileanadh. Dh'fhaodadh tu cuideachd luach a 'chlas a thoirt far an ìomhaigh agus an stoidhle le CSS le bhith a' sgrìobhadh tagraiche nas sònraichte. Mar eisimpleir, leig dhuinn sùil a thoirt air eisimpleir far a bheil an ìomhaigh sin taobh a-staigh roinneadh le luach clas "prìomh-shusbaint".
Gus stoidhle an ìomhaigh seo, dh'fhaodadh tu an CSS seo a sgrìobhadh:
.main-content img {flùraichean: clì; gleadachadh: 0 20px 20px 0; }Anns an sceario seo, bhiodh an ìomhaigh againn co-chòrdail ris an taobh chlì, leis an teacsa a 'seòladh mun cuairt mar a bha e roimhe, ach cha robh againn ri luach a bharrachd a chur ris a' chomharra againn. Le bhith a 'dèanamh seo aig sgèile faodaidh cuideachadh faidhle HTML nas lugha a chruthachadh, a bhios nas fhasa a làimhseachadh agus cuideachd a chuideachadh gus coileanadh a leasachadh.
Mu dheireadh, dh'fhaodadh tu fiù 's na stoidhlichean a chur ris a' chomharra HTML agad, mar seo:
Canar " stoidhlichean in-loidhne " ris an dòigh seo. Cha bu chòir moladh a dhèanamh oir tha e soilleir gu bheil e a 'ceangal stoidhle eileamaid leis a' chomharra structair aige. Tha cleachdaidhean as fheàrr air an lìon ag ràdh gum bu chòir stoidhle agus structar duilleag a bhith air leth eadar-dhealaichte. Tha seo gu sònraichte cuideachail nuair a dh'fheumas do dhuilleag an cruth atharrachadh agus coimhead airson meudan sgrion agus innealan eadar-dhealaichte le làrach-lìn fhreagarrach. Le bhith a 'faighinn stoidhle na duilleige eadar-lìnichte ann an HTML, bidh e nas duilghe a bhith ann airson ceistean meadhanan ùghdarraichte a nì atharrachadh air sealladh an làraich mar a bhios feum air na sgàilean sin.
Artaigil tùsail le Jennifer Krynin. Air a dheasachadh le Jeremy Girard air 4/3/17.