Hotunan hotuna, rubutun, da abubuwa masu tarin lokacin da suke gina yanar gizo
Idan kuna koyon yadda za a gina shafukan intanet , ɗaya daga cikin hanyoyin da kuka fi dacewa da za ku buƙaci ya jagoranci shi ne yadda za a ajiye abubuwa a cikin browser browser. Wannan yana nufin zartar da hoton a kan shafin, ko kuma yana iya zama cibiyar-tabbatar da rubutu kamar ƙididdiga a matsayin ɓangare na zane.
Hanyar da ta dace don kammala wannan hotunan hotunan hotuna ko rubutu ko ma duk shafin yanar gizonku shi ne ta amfani da Jagororin Cascading Style (CSS) . Yawancin dukiyar da aka tsara don ci gaba sun kasance a cikin CSS tun daga 1.0, kuma suna aiki tare da CSS3 da masu bincike na zamani.
Kamar sauran al'amurran yanar gizo, akwai hanyoyi masu yawa don amfani da CSS zuwa cibiyar abubuwa a shafin yanar gizo. Bari mu dubi wasu hanyoyi daban-daban don amfani da CSS don cimma burin gani.
A kan Bayani na Amfani da CSS don Cibiyar Gida ta HTML
Ci gaba tare da CSS zai iya zama kalubale don farawa zanen yanar gizo saboda akwai hanyoyi daban-daban don cimma wannan salon na gani. Duk da yake hanyoyin da dama za su iya zama masu kyau ko masu fasahar yanar gizo waɗanda suka san cewa ba dukkanin hanyoyin da ke aiki a kan kowane nau'i ba, wannan zai iya fuskantar kalubale ga sababbin shafukan yanar gizo tun da hanyoyi masu yawa na nufin sun bukaci sanin lokacin da za su yi amfani da wannan tsarin. Mafi kyawun abin da za ku yi shine fahimtar wasu hanyoyi. Yayin da ka fara amfani da su, za ka koyi yadda hanya ke aiki mafi kyau a wace lokuta.
A babban matakin, zaka iya amfani da CSS zuwa:
- Rubutun cibiyar
- Ci gaba da ɓangaren matakan (kamar rabo)
- Cibiyar hoto
- A tsaye a tsakiya wani toshe ko hoto
Mutane da yawa (da yawa) da suka wuce, masu zanen yanar gizo zasu iya amfani da rafin
Tsayar da rubutu tare da CSS
Abinda ya fi sauƙi don zama a kan shafin yanar gizon shine rubutu. Akwai kaya guda kayan abin da kake buƙatar sani don yin wannan: rubutu-align. Ɗauki CSS na kasa, alal misali:
p.center {rubutu-align: cibiyar; }
Tare da wannan layin na CSS, kowane sakin layi da aka rubuta tare da ɗakin tsakiya zai kasance a tsakiya a cikin matakan iyayensa. Alal misali, idan sakin layi ya kasance a cikin rarraba, ma'anar cewa yaro ne na wannan rukuni, zai kasance a tsakiya a cikin
Ga misali na wannan aji da aka yi amfani da shi cikin rubutun HTML:
Wannan rubutun yana tsakiyar.
Lokacin da zartar da rubutun da rubutun rubutu, ka tuna cewa za a ci gaba da ciki a ciki ta ƙunshi nau'i kuma ba dole ba ne a cikin cikakken shafi na kanta. Har ila yau, ka tuna cewa rubutun da aka tsaida a cikin cibiyar na iya zama da wuyar karantawa don manyan abubuwan da ke ciki, don haka yi amfani da wannan siffantaccen ƙira. Adadin labarai da ƙananan tubalan rubutu, kamar rubutun teaser don wani labarin ko wasu abubuwan, sau da yawa sauƙin karantawa da kyau a lokacin da keɓaɓɓen shafi, amma ƙananan fasali na rubutu, kamar cikakken labarin da kansa, zai zama kalubale don cinye idan abun ciki ya cika barata. Ka tuna, readability ne ko da yaushe key a lõkacin da ya je website website!
Shirye-shiryen Binciken Cibiyar da CSS
Kulle su ne duk wani abu a kan shafinka wanda ke da nuni da aka tsara kuma an kafa shi a matsayin ɓangaren matsala. Sau da yawa, an halicci waɗannan tubalan ta hanyar amfani da maɓallin HTML
mai ƙididdigewa {
gefe: 0 auto;
nisa: 80em;
}
Wannan CSS ta hanzarta ga dukiya na gefen zai sanya ragamar sama da kasa don darajar 0, yayin da hagu da dama zasu yi amfani da "auto". Wannan yana amfani da kowane sarari wanda yake samuwa kuma ya raba shi a ko'ina a tsakanin bangarorin biyu na taga mai dubawa, ta yadda za a zartar da kashi a kan shafin.
A nan an yi amfani da ita cikin HTML:
amma rubutu a ciki an bar haɗin kai.
Muddin ka toshe yana da nuni a fili, zai zama cibiyar kanta a ciki. Rubutun da ke ƙunshe a cikin wannan toshe ba za a zartar da shi ba, amma za'a bar shi. Wannan rubutun ƙididdiga ne wanda aka bar shi cikin ladabi a cikin masu bincike. Idan kana son rubutu ya zamo, zaku iya amfani da kayan aikin rubutu wanda muka rufe a baya tare da wannan hanyar don zartar da rarraba.
Shirya hotuna tare da CSS
Duk da yake mafi yawan masu bincike za su nuna hotunan da aka yi amfani da su ta hanyar amfani da alamomin rubutu guda ɗaya da muka riga muka dubi na sakin layi, ba dace ba ne a dogara da wannan hanyar ta yadda W3C ba ta da shawarar. Tun da ba a ba da shawarar ba, akwai wata dama da dama cewa wasu masu bincike za su iya zaɓar kada su yi watsi da wannan hanya.
Maimakon yin amfani da rubutun rubutu zuwa tsakiyar hoto, ya kamata ka gaya wa mai bincike cewa siffar wani ɓangaren matsala ne. Wannan hanya, za ku iya ci gaba da shi kamar yadda kuka yi wa wani toshe. A nan ne CSS ya sa wannan ya faru:
img.center {
nuna: toshe;
gefe-hagu: auto;
hagu-dama: auto;
}
Kuma a nan ne HTML cewa don hoton da muke so mu kasance a tsakiya:
Hakanan zaka iya zartar da abubuwa ta amfani da CSS mai layi (duba ƙasa), amma wannan tsarin ba shi da shawarar tun lokacin da ya kara da tsarin ra'ayi a cikin samfurin HTML. Ka tuna, muna so mu rarraba salon da tsarin, don haka ƙara CSS styles zuwa lambar HTML ɗin tare da karya wannan rabuwa kuma, saboda haka, ya kamata a kauce masa a duk lokacin da zai yiwu.
Gudanar da Elements a hankali tare da CSS
Shirya abubuwa a tsaye yana fuskantar kalubale a zane yanar gizo, amma tare da sakin CSS Flexible Box Layout Module a CSS3, akwai yanzu hanyar da za ta yi.
Daidaitaccen tsaye yana aiki daidai da daidaitaccen kwance a sama. Ƙarin CSS yana tsaye-daidaita da darajar tsakiyar.
.vcenter {
tsaye-daidaitawa: tsakiya;
}
Abinda ake ciki a wannan hanyar ita ce ba duk masu bincike sun goyi bayan CSS FlexBox ba, ko da yake mafi yawa suna zuwa zuwa wannan sabon tsarin layi na CSS! A gaskiya ma, duk masu bincike na yau a yau suna goyon bayan wannan tsarin CSS. Wannan yana nufin cewa kawai damuwa da Flexbox zai zama mafi yawan jujjuyawar binciken.
Idan kana da matsala tare da masu bincike na tsofaffi, W3C ya bada shawarar cewa ka sanya rubutu a tsaye a cikin akwati ta amfani da hanyar da ta biyo baya:
- Sanya abubuwan da za su kasance a cikin ciki wanda ya ƙunshi nau'i, kamar raba.
- Saita mafi tsawo a kan dauke da kashi.
- Bayyana cewa dauke da nau'i a matsayin tantanin halitta.
- Saita jeri a tsaye zuwa "tsakiyar."
Alal misali, a nan ne CSS:
.vcenter {
Min-tsawo: 12m;
nunawa: tantanin launi;
tsaye-daidaitawa: tsakiya;
}
Kuma a nan ne HTML:
Wannan rubutun yana tsaye a tsakiya a cikin akwatin.
Cibiyar Ganin Hoto da Ƙarshen Harshen Internet Explorer
Akwai wasu hanyoyi don tilasta Internet Explorer (IE) zuwa cibiyar sannan a yi amfani da maganganun kwakwalwa don haka kawai IE na ganin tsarin, amma sun kasance suna kalma ne da mummuna. Labari mai dadi shine cewa tare da shawarar da Microsoft ya yanke na kwanan nan don sauke goyon baya ga tsofaffi na IE, waɗannan masu binciken ba su buƙatar su fita ba da daɗewa, don yin sauƙi ga masu zanen yanar gizo don amfani da hanyoyin layout na yau kamar CSS FlexBox wanda zai sa dukkanin layi na CSS, ba kawai zartarwa, mafi sauki ga dukkan masu zanen yanar gizo ba.