Zithunzi zojambula, zolemba, ndi kutseka zinthu pamene mumanga mawebusaiti
Ngati mukuphunzira momwe mungakhalire mawebusaiti , imodzi mwa njira zamakono zomwe muyenera kuzidziwa ndi momwe mungayankhire zinthu muwindo la osatsegula. Izi zikhoza kutanthauzira chithunzi pa tsambalo, kapena lingakhale loyambira-kulembera malemba monga mutu ngati gawo la kapangidwe.
Njira yoyenera kukwanilitsa maonekedwe a zithunzi zofanana kapena zolembera kapena tsamba lanu lonse lapansi pogwiritsira ntchito Zithunzi Zamakono (CSS) . Zambiri mwazomwe zimakhazikitsidwa zakhala ziri mu CSS kuyambira Version 1.0, ndipo zimagwira ntchito kwambiri ndi CSS3 ndi osakayikira masiku ano.
Monga mbali zambiri za mawonekedwe a webusaiti, pali njira zambiri zogwiritsira ntchito CSS kuti zikhazikitse zinthu pa tsamba la intaneti. Tiyeni tiwone njira zosiyanasiyana zogwiritsira ntchito CSS kuti tikwaniritse maonekedwe awa.
Pazomwe Mukugwiritsa Ntchito CSS kupita ku Zisankho za Pakati pa HTML
Kulimbana ndi CSS kungakhale kovuta kuyamba oyambitsa webusaiti chifukwa pali njira zambiri zogwiritsira ntchito kalembedwe kamodzi. Ngakhale kuti njira zosiyanasiyana zingakhale zabwino kapena okonzedwa ndi intaneti omwe amadziwa kuti palibe njira zonse zomwe zimagwirira ntchito pazinthu zonse, izi zingakhale zovuta kwambiri kwa akatswiri atsopano a webusaiti chifukwa njira zosiyanasiyana zimatanthawuzira kuti azigwiritsa ntchito nthawi yanji. Chinthu chabwino kwambiri choti muchite ndikumvetsa njira zingapo. Pamene mukuyamba kuzigwiritsa ntchito, mudzaphunziranso njira yomwe ikuyenda bwino kwambiri muzochitika.
Pamwamba, mukhoza kugwiritsa ntchito CSS ku:
- Chigawo chapakati
- Lembani chigawo chokhala pambali (monga kugawa)
- Pangani chithunzi
- Vomerezani pakati pa chipika kapena fano
Zaka zambiri (zaka) zapitazo, olemba webusaiti angagwiritse ntchito
Kulemba Mawu ndi CSS
Chinthu chophweka kuyika pa tsamba lamasamba ndilolemba. Pali malo amodzi okhazikika omwe muyenera kudziwa kuti muchite izi: malemba-align. Tengani ndondomeko ya CSS pansipa, mwachitsanzo:
p.center {text-align: pakati; }}
Ndi mndandanda wa CSS, ndime iliyonse yolembedwa ndi gulu loyambira iyenera kukhazikitsidwa mkati mwazochitika za kholo. Mwachitsanzo, ngati ndimeyi ili mkati mwa magawano, kutanthauza kuti inali mwana wa magawano, idzakhala yozungulira mkati mwa
Pano pali chitsanzo cha kalasi iyi yomwe ikugwiritsidwa ntchito muzokambirana ya HTML:
Lembali likuyambira.
Pogwiritsa ntchito malemba-align property, kumbukirani kuti idzayambira mkati mwazomwe zili ndi mfundo zomwe sizidzakhazikitsidwa mkati mwa tsamba lenilenilo. Kumbukiraninso kuti malo ovomerezekawa angakhale ovuta kuwerengera zinthu zazikulu, kotero gwiritsani ntchito kalembedwe kamodzi. Mitu ndi zolemba zazing'ono, monga teaser zolemba nkhani kapena zina, zimakhala zosavuta kuziwerenga komanso zogwirizana, koma zikuluzikulu zolemba, monga nkhani yonse yokha, zingakhale zovuta kudya ngati zomwe zilipo ziyenera. Kumbukirani, kuwerengeka nthawi zonse kuli kofunika pa tsamba la webusaiti!
Kuyika Zomwe Zimakhudza ndi CSS
Miyala ndizomwe zili pa tsamba lanu lomwe liri ndi chiwerengero chofotokozera ndipo limakhazikitsidwa ngati gawo lamasitepe. Kawirikawiri, timatabwa timene timapanga pogwiritsa ntchito HTML
div.center {
malire: 0 auto;
width: 80m;
}}
CSS shorthandyi ya katundu wamtunda ikanaika mitsinje yam'mwamba ndi ya pansi ku mtengo wa 0, pomwe kumanzere ndi kumanja kungagwiritse ntchito "galimoto." Izi zimatengera malo aliwonse omwe alipo ndikuzigawanitsa mofanana pakati pa mbali ziwiri zawindo lazenera, motsogoleredwa momveka bwino pa tsamba.
Pano izo zikugwiritsidwa ntchito mu HTML:
koma malemba mkati mwake atsala limodzi.
Malingana ngati chipika chanu chiri ndi chigawo chofotokozera, chidzalowetsa mkati mwa zinthuzo. Malembo omwe ali mu chipikacho sichidzakhazikitsidwa mkati mwake, koma adzasiyidwa. Izi ndizolemba zomwe zatsala-zowonongeka pa zosasinthika m'masakatuli a intaneti. Ngati mukufuna kuti lembalo likhale lokhazikika, mungagwiritse ntchito zolemba zomwe tazilemba poyambirira ndikugwirizana ndi njirayi kuti tifunikire kugawa.
Kuyika mafano ndi CSS
Pamene masakatuli ambiri akuwonetsera zithunzi zomwe zimagwiritsidwa ntchito pogwiritsa ntchito zolemba zomwe taziwonera kale, sizolingalira kuti tidalira njirayi monga chosakonzedwe ndi W3C . Popeza kuti sizowonjezera, nthawi zonse mumakhala mwayi kuti asakatuli amatha kusasamala njira iyi.
M'malo mogwiritsira ntchito malemba-kulumikiza kuti muyambe kujambula chithunzi, muyenera kufotokozera momveka bwino osatsegula kuti fanolo ndilo gawo lokhazikika. Mwanjira iyi, mukhoza kuyika momwe mungathere. Pano pali CSS kuti izi zichitike:
img.center {
onetsani;
malire kumanzere: auto;
kumanja kumanja: galimoto;
}}
Ndipo apa pali HTML yomwe yachithunzi yomwe tikufuna kuti tiyike:
Mukhozanso kukhazikitsa zinthu pogwiritsira ntchito pa intaneti CSS (onani m'munsimu), koma njira iyi siyotchulidwa chifukwa imapanga mafayilo owonetsera mu HTML. Kumbukirani, ife tikufuna kusiyanitsa kalembedwe ndi kapangidwe, kotero kuwonjezera machitidwe a CSS anu HTML code ndi yopuma kuti kulekana ndipo, chotero, ayenera kupeŵa ngati kuli kotheka.
Kupanga Zomwe Zimaonekera ndi CSS
Zopangira zinthu zowonongeka nthawi zonse zakhala zovuta pa webusaiti, koma potulutsa gawo la CSS Flexible Box Layout mu CSS3, panopa pali njira yochitira.
Mgwirizano wofanana umagwira ntchito mofananamo ndi kusuntha komwe kumapangidwe pamwambapa. Chinthu cha CSS chili chofanana ndi mtengo wapakati.
.modzi {
kulumikizana molunjika: pakati;
}}
Chokhumudwitsa ku njirayi ndikuti sizithuku zonse zomwe zimathandizira CSS FlexBox, ngakhale kuti ambiri akubwera kuzungulira njirayi yatsopanoyi. Ndipotu, osuta masiku ano lero akuthandizira kalembedwe ka CSS. Izi zikutanthauza kuti nkhawa zanu zokha ndi Flexbox zingakhale zowonjezera kale.
Ngati muli ndi vuto ndi osuta akale, W3C ikukulimbikitsani kuti muyike pamtima pa chidebe pogwiritsa ntchito njira yotsatirayi:
- Ikani zinthu zomwe ziyenera kukhazikitsidwa mkati mwa zinthu zomwe zilipo, monga div.
- Ikani kutalika kwazing'ono pa zomwe zilipo.
- Lengezani kuti muli ndi chinthu monga selo la table.
- Ikani mgwirizano wofanana ndi "pakati."
Mwachitsanzo, apa pali CSS:
.modzi {
kutalika kwa minita: 12em;
kusonyeza: tebulo-selo;
kulumikizana molunjika: pakati;
}}
Ndipo apa pali HTML:
Lembali liri pamzere mwabokosi.
Centering Vertical and Older Versions ya Internet Explorer
Pali njira zina zomwe zingakakamizire Internet Explorer (IE) kuti ikhalepo ndikugwiritsa ntchito ndemanga zowonjezera kuti IE yokha iwonetsetse mafashoni, koma ndi ochepa chabe ndi olakwika. Nkhani yabwino ndi yakuti, posankha chisankho cha Microsoft chaposachedwapa kuti asiye kuthandizira machitidwe akale a IE, osatsegula osatetezerawo ayenera kukhala paulendo wawo mwamsanga, kuti zikhale zovuta kwa okonza webusaiti kugwiritsa ntchito njira zamakono monga CSS FlexBox zomwe zingapange CSS onse, osati kungoyambira, zosavuta kwambiri kwa onse opanga makasitomala.