Imifanekiso yeZiko, itekisi, kunye nokuvimba izinto xa usakha iiwebhusayithi
Ukuba ufunda indlela yokwakha iiwebhsayithi , enye yeendlela eziqhelekileyo oza kudingeka ukuba uziqonde ngayo indlela yokubeka izinto kwifestile yesiphequluli. Oku kunokuthetha ukugxilwa komfanekiso kwiphepha, okanye kungaba yindawo-ukulungelelanisa itekisi njengezihloko njengenxalenye yoyilo.
Indlela efanelekileyo yokufezekisa ukubonakala kweemifanekiso eziphambili okanye itekisi okanye kwiphepha lakho lewebhu ngokusebenzisa i- Cascading Style Sheets (CSS) . Uninzi lweepropati ze-centering ziye kwiCSS ukusuka kwi-1.0 ye-1.0, kwaye zisebenza kakuhle nge- CSS3 kunye neziphequluli zewebhu zanamhlanje.
Njengemibandela eninzi yokwakheka kwewebhu, kukho iindlela ezininzi zokusebenzisa i-CSS ukubeka izinto kwiziko lewebhu. Makhe sijonge ngeendlela ezahlukeneyo zokusebenzisa i-CSS ukufezekisa okubonakalayo.
Ngomxholo wokusebenzisa iCSS kwiZiko zeZiko kwi-HTML
Ukuxhaswa ngeCSS kungaba ngumngeni kubaqulunqi bewebhu bokuqala kuba kukho iindlela ezininzi ezahlukeneyo zokufeza isitayela esisodwa esibonwayo. Nangona iindidi zeendlela ezinokuba zilungele okanye abaphuculi bewebhu bexesha elithile bazi ukuba akusiwo onke amacandelo asebenza kuyo yonke into, oku kunokuba ngumngeni omkhulu kubafundi abatsha bewebhu ukususela ngeendlela ezahlukeneyo zithetha ukuba bafuna ukwazi ukuba benzise nini. Into efanelekileyo ukuyenza kukuba ufumane ukuqonda iindlela ezimbalwa. Njengoko uqala ukuyisebenzisa, uya kufunda ukuba yiphi indlela esebenza kakuhle kwiimeko.
Kwinqanaba eliphezulu, ungasebenzisa iCSS kwi:
- Umbhalo weziko
- Iziko eliyinxalenye yebhloko (njengokwahlula)
- Isiko umfanekiso
- Eyona nto ibandakanya ibhloko okanye umfanekiso
Kwiminyaka emininzi edluleyo, abaqulunqi bewebhu bangasebenzisa i-
I-Text Text kunye neCSS
Into elula ukuyibeka kwikhasi lewebhu lembhalo. Kukho isakhiwo esisodwa sepropati ofuna ukukwazi ukwenza oku: ukulungelelanisa umbhalo. Thatha isitayela seCSS ngaphantsi, umzekelo:
p.center {text--align: isikhungo; }
Ngalo mgca weCSS, yonke imimiselo ebhaliweyo kunye neklasi yeklasi iya kuba yindawo ephakathi kwendawo yayo yomzali. Ngokomzekelo, ukuba umhlathi ungaphakathi kwecandelo, oku kuthetha ukuba ngumntwana woluhlu, luza kuba lugxininise ngaphakathi ngaphakathi
Nasi umzekelo wale klasi osetyenziswe kwixwebhu le-HTML:
Eli catshulwa liphambili.
Xa umxholo wokubhaliweyo kunye nepropati-ukulungelelanisa ipropati, khumbula ukuba kuya kuba phakathi kwezinto eziqulethekileyo kwaye akuyiyo ingundoqo kwiphepha elipheleleyo ngokwalo. Kwakhona ukhumbule ukuba isikhokelo-esilungileyo esisisigxina sinokuba nzima ukufunda iibhloko ezinkulu zomxholo, ngoko sebenzisa le ndlela ngokukhawuleza. Iintloko kunye neebhloko ezincinci zesicatshulwa, njengombhalo we-teaser wecandelo okanye umxholo, kaninzi kulula ukufunda nokucwangcisa xa zijoliswe kuyo, kodwa iibhloko ezinkulu zetekisi, njengesiqendu esipheleleyo ngokwayo, kuya kuba nzima ukuba idle ukuba umxholo ube yiziko zichanekile. Khumbula, ukufundeka kuseloko kubalulekileyo xa kuziwa kwi-website yombhalo!
I-Blocked Blocks Content nge CSS
Iibhloko zikhona naziphi izinto ezikwiphepha lakho elinomqolo ochaziweyo kwaye zenziwe njengento yebhloko. Ngokuqhelekileyo, ezi bhloko zidalwa ngokusebenzisa i-HTML
div.center {
umgama: 0 ngomoto;
ububanzi: 80m;
}
Le css shorthand kwipropati ye-margin yayiza kubeka iinduli eziphezulu kunye nezantsi phantsi kwexabiso le-0, ngelixa ikhohlo kunye nekhohlo liza kusebenzisa "imoto." Oku kuthatha nantoni na indawo ekhoyo kwaye iyahlula phakathi kwamacandelo amabini kwindowowodweliso yefowuni, ngokucwangcisa ngokucokisekileyo into ekhoyo kwiphepha.
Nantsi isetyenziswa kwi-HTML:
kodwa isicatshulwa ngaphakathi kuso sisele sihambelana.
Ngethuba nje ibhloko yakho inebubanzi obuchaziweyo, iya kuzinza ngaphakathi kwento equlethekileyo. Umbhalo oqulethwe kwilo bloko ayiyi kuba phakathi kwayo, kodwa iya kushiywa-echanekileyo. Oku kukubhaliweyo umbhalo oshiywe-ulungelelweyo kwi-browser kwi-default. Ukuba ufuna isicatshulwa sisisiseko, ungasebenzisa isakhiwo-ukulungelelanisa ipropathi esiyiqwebile kwangaphambili ngokubambisana nale ndlela ukuze sikhululwe ukwahlula.
Imifanekiso yeCent ngeCSS
Ngelixa ezininzi iiphequluli ziza kubonisa imifanekiso esekelwe ekusebenziseni itekisi efanayo-ukulungelelanisa ipropathi esele sijonge kuyo umhlathi, akusiyo ingcamango efanelekileyo yokuthembela kulolu hlobo njengoko kungenyanzeliswa yiW3C . Ekubeni akukhuthazwa, kukho ithuba lokuba iinguqulelo zexesha elizayo ezikhethiweyo zingakhetha ukungazihoyi le ndlela.
Endaweni yokusebenzisa itekisi-ukulungelelanisa ukubeka umfanekiso, kufuneka uchaze ngokucacileyo umkhangeli-mfanekiso ukuba umfanekiso ungumgangatho webhloko. Ngale ndlela, unako ukusibeka njengokuba ungayiphi na enye ibhloko. Nantsi iCSS yokwenza oku kwenzeke:
img.center {
bonisa: uvimba;
umda osekhohlo;
umda ongakwesokudla: uqobo;
}
Yaye nantsi i-HTML enomfanekiso esingaba nawo:
Unako ukubeka izinto ngokusebenzisa i-CSS kwikhompyutha (jonga ngezantsi), kodwa le ndlela ayinakunyuswa kuba yongeza izitayela ezibonakalayo kwi-HTML markup. Khumbula, sifuna ukwahlula isitayela kunye nesakhiwo, ngoko kwengeza izitayela ze-CSS kwiikhowudi yakho ye-HTML ngokuphuka ukuba ukwahlukana kwaye, ngoko kunjalo, kufuneka kugwenywe xa kunokwenzeka.
I-Centering Elements nge-CSS
Izinto zokuqala zihlala zicelomngeni kwi-design yewebhu, kodwa ngokukhutshwa kweModyuli yeCSS Flexible Box Layout ku-CSS3, ngoku ikhona indlela yokwenza.
Ulungelelwaniso olufanayo lusebenza ngokufanayo ukuya kulungelelaniso oluphambili olubhekiswe ngasentla. Ipropati yeCSS ihambelana-ngokuhambelana nexabiso eliphakathi.
{
ukulungelelanisa ngqo: phakathi;
}
Ingcipheko kule ndlela kukuba akuyiyo yonke i-browsers inkxaso ye-CSS FlexBox, nangona abaninzi beza beza kule ndlela entsha yeCSS! Enyanisweni, zonke iiphequluli zanamhlanje ngoku zixhasa le style CSS. Oku kuthetha ukuba ukukhathazeka kwakho kuphela nge-Flexbox kuya kuba yinguqulelo yesigqabi somdala.
Ukuba unemibuzo kunye neziphequluli ezindala, i-W3C icebisa ukuba usebenzise isikhala ngokubhekiselele kwisitenki usebenzisa indlela elandelayo:
- Beka izinto ukuba zibekwe ngaphakathi ngaphakathi kwizinto eziqulethwe, njenge-div.
- Beka ukuphakama ubuncinane kwizinto eziqulethweyo.
- Memezela ukuba uqulethe izinto njengeseli yetafile.
- Beka ukulungelelaniswa kwemiba "phakathi."
Umzekelo, nantsi iCSS:
{
ukuphakama kwamaminithi: 12em;
bonisa: i-table-cell;
ukulungelelanisa ngqo: phakathi;
}
Nantsi i HTML:
Olu bhalo lujoliswe ngqo kwibhokisi.
Centering Vertical and Older Versions ze-Internet Explorer
Kukho iindlela zokunyanzela i-Intanethi Explorer (IE) ukuya kwiziko uze usebenzise izimvo ezinemiqathango ukuze i-IE kuphela ibone izitayela, kodwa ziyi-verbose kwaye zibi. Iindaba ezilungileyo kukuba ngesigqibo se-Microsoft esandula ukuyeka inkxaso yeenguqu ezidala ze-IE, ezo ziphequluli ezingaxhasiyo mazibe ziphuma kwindlela yokukhawuleza, okwenza kube lula kubakhi bewebhu ukusebenzisa iindlela zendlela yokuhlaziywa njengendlela ye-CSS FlexBox eya kwenza konke ukulungiswa kweCSS, akugcini nje ngokuphambili, kulula ngakumbi kubo bonke abayili bewebhu.