Piga picha, fungulia, na kuzuia mambo wakati wa kujenga tovuti
Ikiwa unajifunza jinsi ya kujenga tovuti , mojawapo ya mbinu za kawaida unayohitaji kutazama ni jinsi ya kuingiza vitu katika dirisha la kivinjari. Hii inaweza kumaanisha kuzingatia picha kwenye ukurasa, au inaweza kuwa kituo-kuhalalisha maandishi kama kichwa kama sehemu ya kubuni.
Njia sahihi ya kukamilisha uonekano huu wa kuona wa picha au uandishi wa msingi au hata ukurasa wako wote wa wavuti ni kwa kutumia Majarida ya Sinema ya Kichuuzi (CSS) . Malipo mengi ya kuzingatia yamekuwa kwenye CSS tangu toleo la 1.0, na hufanya kazi vizuri na CSS3 na vivinjari vya kisasa vya wavuti .
Kama mambo mengi ya kubuni wavuti, kuna njia nyingi za kutumia CSS kwa vipengele vya kati kwenye ukurasa wa wavuti. Hebu tuangalie njia tofauti za kutumia CSS kufikia kuangalia hii ya kuona.
Juu ya Uhtasari wa kutumia CSS kwa Kituo cha Kituo cha HTML
Kuweka na CSS inaweza kuwa changamoto kwa waanzia waanzia wavuti kwa sababu kuna njia nyingi za kufanikisha mtindo huu wa kuona. Wakati mbinu mbalimbali zinaweza kuwa nzuri au wavuti wavuti wanaojua kwamba sio mbinu zote zinazofanya kazi kila kipengele, hii inaweza kuwa changamoto kubwa kwa wataalamu wa wavuti mpya tangu njia mbalimbali za njia zina maana wanahitaji kujua wakati wa kutumia njia gani. Kitu bora cha kufanya ni kupata ufahamu wa mbinu chache. Unapoanza kuitumia, utajifunza njia ambayo inafanya kazi bora zaidi katika matukio gani.
Katika ngazi ya juu, unaweza kutumia CSS kwa:
- Nakala ya kituo
- Kituo cha kipengele cha kuzuia kiwango (kama mgawanyiko)
- Piga picha
- Kimazingira kituo cha kuzuia au picha
Miaka mingi (mingi) iliyopita, wabunifu wa wavuti wanaweza kutumia kipengele
Nakala ya msingi na CSS
Jambo rahisi zaidi kwenye ukurasa wa wavuti ni maandishi. Kuna mali moja tu ya mtindo unahitaji kujua kufanya hivi: fungulia maandiko. Chukua mtindo wa CSS hapa chini, kwa mfano:
P.center {text-align: kituo; }
Kwa mstari huu wa CSS, kila aya iliyoandikwa na darasani la kituo kitazingatia usawa ndani ya kipengele cha mzazi. Kwa mfano, kama aya ilikuwa ndani ya mgawanyiko, maana yake ni mtoto wa mgawanyo huo, ingekuwa katikati ya usawa ndani ya
Hapa ni mfano wa darasa hili lililowekwa katika hati ya HTML:
Nakala hii imezingatia
Wakati wa maandishi ya msingi na mali ya kuandika maandiko, kumbuka kuwa itakuwa katikati ya kipengele chake kilicho na kipengele na sio msingi kati ya ukurasa kamili yenyewe. Pia kumbuka kuwa maandiko ya katikati ya haki yanaweza kuwa vigumu kusoma kwa vitalu vingi vya maudhui, kwa hiyo tumia mtindo huu kidogo. Vichwa vya habari na vitalu vidogo vya maandishi, kama maandishi ya teaser ya makala au maudhui mengine, mara nyingi ni rahisi kusoma na kufaa wakati unaozingatia, lakini vitalu vingi vya maandiko, kama makala kamili yenyewe, itakuwa vigumu kutumia ikiwa maudhui yalikuwa kikamilifu Thibitisha. Kumbuka, readability daima ni muhimu wakati inakuja kwenye maandiko ya tovuti!
Kuweka Vikwazo vya Maudhui na CSS
Vikwazo ni mambo yoyote kwenye ukurasa wako ambao una upana uliofafanuliwa na umeanzishwa kama kipengele cha kiwango cha kuzuia. Mara nyingi, vitalu hivi vinatengenezwa kwa kutumia kipengele cha HTML
div.center {
margin: 0 auto;
upana: 80m;
}
Mchezaji huu wa CSS kwa mali ya kijiji utaweka kijiko cha juu na cha chini kwa thamani ya 0, wakati wa kushoto na wa kulia utaweza kutumia "auto." Hii inachukua nafasi yoyote inayopatikana na kuigawanya sawasawa kati ya pande mbili za dirisha la mtazamo, kwa ufanisi kuzingatia kipengele kwenye ukurasa.
Hapa inatumika katika HTML:
lakini maandishi ndani yake yanashirikiwa.
Muda kama block yako ina upana uliofafanuliwa, itajiingiza ndani ya kipengele kilicho na. Nakala zilizomo katika kizuizi hicho hazitazingatia ndani, lakini zitashoto-haki. Hii ni maandiko ya becaus ya kushoto-haki katika default katika browsers mtandao. Ikiwa unataka uandishi huo uzingatie vizuri, unaweza kutumia mali ya kuandika maandishi ambayo tuliyofunulia mapema kwa kushirikiana na njia hii ili kuanzisha mgawanyiko.
Kuweka picha na CSS
Wakati vivinjari vingi vitaonyesha picha zilizozingatia kutumia mali sawa ya kuandika maandishi tumeangalia tayari kwa aya, sio wazo nzuri kutegemea mbinu hiyo kama haipendekezwi na W3C . Kwa kuwa haipendekezi, daima kuna nafasi ya kwamba matoleo ya baadaye ya browsers inaweza kuchagua kupuuza njia hii.
Badala ya kutumia saini ya maandishi ili kuunda picha, unapaswa kuwaambia kivinjari wazi kwamba picha ni kipengele cha kiwango cha kuzuia. Kwa njia hii, unaweza kuuweka kama ungependa kuzuia nyingine yoyote. Hapa ni CSS ya kufanya hivyo kutokea:
img.center {
kuonyesha: kuzuia;
margin-kushoto: auto;
jiji-kulia: auto;
}
Na hapa ni HTML ambayo kwa picha ambayo tungependa kuzingatia:
Unaweza pia kuingiza vitu kwa kutumia CSS ya mstari (angalia chini), lakini njia hii haipendekezi kwa sababu inaongeza mitindo ya kuona kwenye markup yako ya HTML. Kumbuka, tunataka kutenganisha mtindo na muundo, kwa hivyo kuongeza mitindo ya CSS kwa kanuni yako ya HTML na kuvunja kuwa kujitenga na, kama vile, inapaswa kuepukwa wakati wowote iwezekanavyo.
Vipengele vya Vipande Vima kwa CSS
Vipande vya vitu vimekuwa vilikuwa changamoto katika kubuni wavuti, lakini kwa kutolewa kwa Moduli ya CSS Flexible Box Layout katika CSS3, sasa kuna njia ya kufanya.
Alignment wima hufanyika sawa na usawa wa usawa ulio juu hapo. Mali ya CSS ni wima-sawa na thamani ya kati.
. {
wima-align: katikati;
}
Kikwazo kwa njia hii ni kwamba sio wote browsers kusaidia CSS FlexBox, ingawa zaidi na zaidi ni kuja karibu na hii mpya CSS layout njia! Kwa kweli, browsers zote za kisasa leo zinaunga mkono mtindo huu wa CSS. Hii inamaanisha kwamba wasiwasi wako pekee na Flexbox itakuwa ni toleo la kivinjari kikubwa zaidi.
Ikiwa una matatizo na vivinjari vilivyopita, W3C inapendekeza kwamba uweke katikati ya maandiko kwenye chombo ukitumia njia ifuatayo:
- Weka vipengele vinavyozingatia ndani ya kipengele kilicho na, kama div.
- Weka urefu mdogo kwenye kipengee kilicho na.
- Tangaza kwamba una kipengee kama kiini cha meza.
- Weka usawa wa wima kwa "kati."
Kwa mfano, hapa ni CSS:
. {
urefu wa min: 12m;
kuonyesha: kiini-meza;
wima-align: katikati;
}
Na hapa ni HTML:
Nakala hii inalenga kwenye sanduku.
Centering Vertical na Versions Older ya Internet Explorer
Kuna baadhi ya njia za kulazimisha Internet Explorer (IE) kwa kituo na kisha kutumia maoni ya masharti ili IE pekee ione mitindo, lakini ni vyema na ni mbaya. Habari njema ni kwamba kwa uamuzi wa hivi karibuni wa Microsoft wa kushuka msaada kwa matoleo ya zamani ya IE, vivinjari vyao vilivyosaidiwa vinapaswa kuwa katika safari yao hivi karibuni, na iwe rahisi kwa wabunifu wa mtandao kutumia mbinu za kisasa za mpangilio kama CSS FlexBox ambayo itafanya mpangilio wote wa CSS, si tu kuzingatia, rahisi zaidi kwa wabunifu wote wa mtandao.