Isikhungo sezithombe, umbhalo, futhi uvimbele izakhi uma usakha amawebhusayithi
Uma ufunda ukwakha amawebhusayithi , enye yezindlela ezivame kakhulu ukuthi kuzodingeka wazi ukuthi ungabeka kanjani izinto ezisefini lesiphequluli. Lokhu kungasho ukugxilisa isithombe ekhasini, noma kungaba isikhungo-ukugunyaza umbhalo njengamakhanda njengengxenye yendlela yokuklama.
Indlela efanele yokufeza ukubukeka okubonakalayo kwezithombe ezigxile noma umbhalo noma ngisho nekhasi lakho lewebhu lonke usebenzisa i- Cascading Style Sheets (CSS) . Iningi lezakhiwo ze-centering ziseCSS kusukela inguqulo ye-1.0, futhi zisebenza kahle nge- CSS3 neziphequluli zewebhu zanamuhla.
Njengemikhakha eminingi yokuklama kwewebhu, kunezindlela eziningi zokusebenzisa i-CSS ukuze uhlele izici ekhasini lewebhu. Ake sibuke ngezindlela ezahlukene zokusebenzisa i-CSS ukuze sifinyelele ukubukeka okubukwayo.
Kubukrini bokusebenzisa i-CSS kwi-Elements Elements ku-HTML
Ukuqala nge-CSS kungaba yinselele ekuqaliseni abaklami bewebhu ngoba kunezindlela eziningi kakhulu zokufeza isitayela esisodwa esibukwayo. Nakuba izindlela ezihlukahlukene zingase zibe mnandi noma abakhiqizi bewebhu bezinkanyezi abazi ukuthi akuzona zonke izindlela ezisebenzayo kuzo zonke izinto, lokhu kungaba yinkinga enkulu kubachwepheshe abasha bewebhu kusukela ngezindlela eziningi ezihlukahlukene kusho ukuthi badinga ukwazi ukuthi bangayisebenzisa nini. Into engcono kakhulu ukuyenza ukuzuza ukuqonda izindlela ezimbalwa. Njengoba uqala ukuyisebenzisa, uzofunda ukuthi iyiphi indlela esebenza kahle kunayo izimo.
Ezingeni eliphezulu, ungasebenzisa i-CSS ku-:
- Umbhalo wesikhungo
- Hlanganisa isici se-block-level (njengokwahlukana)
- Setha isithombe
- Hlela ngokuqondile isikhala noma isithombe
Iminyaka eminingi (eminingi) edlule, abaklami bewebhu bangasebenzisa i-
I-Centering Text ne-CSS
Into elula ukugxila kukhasi lewebhu yombhalo. Kukhona impahla eyodwa yesitayela oyidingayo yokwenza lokhu: ukuqondanisa umbhalo. Thatha isitayela se-CSS ngezansi, isibonelo:
p.center {umbhalo-align: isikhungo; }}
Ngalolu chungechunge lwe-CSS, yonke isigaba esibhalwe ngeklasi eliphakathi lizobe ligxilwe ngokuqondile ngaphakathi kwento yalo yomzali. Isibonelo, uma isigaba singaphakathi ngaphakathi kwesahluko, okusho ukuthi siyingane yalowo hluko, kuyoba phakathi kwe-
Nasi isibonelo salesi sifundo esetshenzisiwe kumqulu we-HTML:
Lo mbhalo usekelwe.
Uma umbhalo wokugxila unomthamo wokuqondisa umbhalo, khumbula ukuthi uzoba phakathi kwezinto eziqukethe futhi awungekho phakathi kwekhasi eligcwele ngokwalo. Futhi khumbula ukuthi umbhalo ophakathi nendawo onokulunga ungaba nzima ukuwufundela amabhulokhi amakhulu okuqukethwe, ngakho sebenzisa lesi sita kancane. Izihloko kanye namabhuloki amancane wombhalo, njenge-teaser umbhalo we-athikili noma okunye okuqukethwe, kuvame ukulula ukufunda nokuhle uma kunomlando, kodwa amabhulokhi amakhulu wombhalo, njenge-athikili egcwele ngokwayo, kungaba yinselele ekudleni uma okuqukethwe kube isikhungo ngokugcwele kulungile. Khumbula, ukufundwa njalo kuyisihluthulelo uma kuziwa kumbhalo wewebhusayithi!
I-Blocking Content Content ne-CSS
Amabhuloki ayikho izakhi ekhasini lakho elinomkhawulo ochaziwe futhi zisungulwa njengesici se-block-level. Ngokuvamile, lezi zingqimba zidalwe ngokusebenzisa i-HTML
i-div.center {
umkhawulo: 0 auto;
ububanzi: 80m;
}}
Lesi sikhashana se-CSS sendawo ye-margin sasizobeka amamitha angaphezulu naphezulu ngezansi kwe-0, ngenkathi kwesobunxele nangakwesokudla kungasebenzisa "i-auto." Lokhu kuthatha noma yikuphi isikhala esitholakalayo futhi sihlukanise ngokulinganayo phakathi kwezinhlangothi zombili zewindi lokubuka, ngokugxilisa ngokuyinhloko isici ekhasini.
Lapha lisetshenziswa ku-HTML:
kodwa umbhalo ngaphakathi kwawo uhambelanisiwe.
Uma nje i-block yakho inomkhawulo ochaziwe, izoba phakathi kwayo ngaphakathi kwento equkethe. Umbhalo oqukethwe kulelo bhulogi ngeke kube phakathi kwawo, kodwa kuzoshiywa-okulungile. Lokhu kungukuthi umbhalo we-becaus ulungele-ukulungiswa kokuzenzakalelayo kuziphequluli zewebhu. Uma ufuna ukuthi umbhalo uphinde usebenze kahle, ungasebenzisa umbhalo-ukuvumelanisa impahla esiyihlanganisiwe ngaphambili ngokuhlanganyela nale ndlela ukuze sikwazi ukubeka ukwahlukana.
Ukufaka izithombe nge-CSS
Ngenkathi iziphequluli eziningi zizobonisa izithombe ezigxile ekusetshenzisweni okufanayo kokubhala umbhalo esivele sibheke isigaba, akusiwo umqondo omuhle ukuthembela kuleso sindlela njengoba kunganconywa yi -W3C . Njengoba kungavunyelwe, kuhlale kunethuba lokuthi izinguqulo ezizayo zephequluli zingakhetha ukungazinaki le ndlela.
Esikhundleni sokusebenzisa umbhalo-ukuvumelanisa ukubeka isithombe, kufanele usitshele ngokucacile isiphequluli ukuthi isithombe siyisici se-block-level. Ngale ndlela, ungakwazi ukuyibeka njengoba ungathanda noma yikuphi ukuvimba. Nansi i-CSS yokwenza lokhu kwenzeke:
img.center {
ukubonisa: ukuvimba;
umkhawulo-kwesokunxele: auto;
i-right-right: auto;
}}
Futhi nansi i-HTML esesithombe esingathanda ukuyibeka kuzo:
Ungakwazi futhi ukubeka izinto usebenzisa i-CSS ye-inthanethi (bheka ngezansi), kodwa le ndlela ayinconywa ngoba ihlanganisa izitayela zokubukwa zibe ngumkhawulo wakho we-HTML. Khumbula, sifuna ukwehlukanisa isitayela nesakhiwo, ngakho-ke ukwengeza izitayela ze-CSS kwikhodi yakho ye-HTML ngekhefu ukuthi ukwehlukana futhi, ngakho-ke, kufanele kugwenywe noma kunini lapho kungenzeka khona.
I-Centering Elements I-Vertically ne-CSS
Izinto zokuqala zihlale ziyinselele kumklamo wewebhu, kodwa ngokukhululwa kwe-CSS Flexible Box Layout Module ku-CSS3, manje sekukhona indlela yokukwenza.
Ukuqondanisa okufanayo kusebenza ngokufanayo nokulungiswa okuqondile okuvezwe ngenhla. Impahla ye-CSS iqondana ngokuqondile nenani eliphakathi.
.maphakathi {
ukuhambisana ngokuqondile: phakathi;
}}
Ukuphazamiseka kule ndlela yukuthi akuzona zonke iziphequluli ezisekela i-CSS FlexBox, nakuba abaningi futhi beza kulo mzila indlela entsha ye-CSS! Eqinisweni, zonke iziphequluli zanamuhla namuhla zisekela lesi sitayela se-CSS. Lokhu kusho ukuthi ukukhathazeka kwakho okuphela ku-Flexbox kungaba inguqulo yesiphequluli esidala.
Uma unenkinga ngeziphequluli ezindala, i- W3C isincoma ukuthi ubeke umbhalo phakathi kwesitsha ngokusebenzisa indlela elandelayo:
- Beka izakhi ukuthi zibekwe ngaphakathi kwento equkethe, njenge-div.
- Setha ukuphakama okuncane kwisici esiqukethe.
- Memezela ukuthi liqukethe isici njengeseli yethebula.
- Setha ukuvumelanisa okuqondile kuya "phakathi."
Isibonelo, nansi i-CSS:
.maphakathi {
ukuphakama kwamaminithi: 12em;
bonisa: ithebula-iseli;
ukuhambisana ngokuqondile: phakathi;
}}
Futhi nansi i-HTML:
Lo mbhalo uhloselwe ngokuqondile ebhokisini.
Centering Vertical and Versions Versions of Internet Explorer
Kunezindlela ezithile zokuphoqelela i-Internet Explorer (IE) ukuba ibeke isikhungo bese usebenzisa imibono enemibandela ukuze i-IE kuphela ibone izitayela, kodwa i-verbose ne-badly. Izindaba ezinhle ukuthi ngesinqumo samuva seMicrosoft sokushiya ukwesekwa kwezinguqulo ezindala ze-IE, lezo ziphequluli ezingasekeli kufanele zihambe endleleni, masenze kube lula kubakhi bewebhu ukuthi basebenzise izindlela zamanje zokuhlela njengeCSS FlexBox ezokwenza konke ukuhlelwa kwe-CSS, hhayi nje kuphela, okulula kakhulu kubo bonke abaklami bewebhu.