Nzvimbo ye webhusaiti inoonekwa uye nzira yakatarwa inotsanangurwa neCSS kana Cascading Style Sheets. Idzi ndidzo zvinyorwa zvinogadzira tsamba yewebhu ye HTML yepa webpage, zvichipa web browsers nemirayiridzo yekuti ungaratidza sei mapeji anoguma kubva pakuburitsa. CSS inotarisa mapeji epaji, pamwe nemuvara, mifananidzo yemufananidzo , typography nezvimwe zvakawanda.
Kana iwe wakatarisa faira reCSS, uchaona kuti sezvinongoita mararamiro kana mutauro wekunyoresa, mafaira aya ane syntax chaiyo kwavari. Zuva rimwe nerimwe mapepa ane mapepa emitemo yeCSS. Iyi mitemo, iyo inotorwa zvakakwana, ndiyo inofanirwa nzvimbo yacho.
Zvikamu zveCSS Rule
Mutemo weCSS unoumbwa nezvikamu zviviri zvakasiyana - musarudzo uye chirevo. Munhu anosarudza anosarudza zvinenge zvichinyorwa pane peji uye chiziviso ndechekuti inofanira kunge yakanyorwa sei. Semuyenzaniso:
p {
muvara: # 000;
}
Uyu ndiwo mutemo weCSS. Mutsanangudzo chikamu ndi "p", iyo inosarudzwa se "ndima". Saka, zvingaita, kusarudza ZVOSE ndima mundima uye ugovapa netsamba iyi (kunze kwekunge pane ndima dzinotarirwa nemamwe michina pane imwe nzvimbo mubhuku rako reCSS).
Chikamu chekutonga kunoti "ruvara: # 000;" ndiyo inozivikanwa seyo kuzivisa. Mashoko akadaro anoumbwa nezvidimbu zviviri - iyo nzvimbo uye kukosha.
Imba ndiyo "chivara" chiduku chekuzivisa. Inotarisa kuti chii chinosarudzwa nemusarudzo chichashandurwa kuratidzwa.
Kukosha ndizvo izvo sarudzo yeCSS yakasarudzwa ichachinjwa. Mumuenzaniso wedu, tiri kushandisa hex kukosha kwe # 000, iyo iri CSS shorthand ye "black".
Nokudaro uchishandisa mutemo weCSS, peji yedu ingadai ine ndima inoratidzwa mumutambo-ruvara rwemavara.
CSS Property Basics
Paunonyora CSS zvinhu, haugoni kuzviita sezvaunoona zvakakodzera. Kune mamiriro ezvinhu, "ruvara" ndiyo chaiyo CSS pfuma, saka unogona kuishandisa. Iyi pfuma ndiyo inogadzirisa mavara echinhu. Kana wakaedza kushandisa "mavara-mavara" kana "mavara-mavara" seCSS zvinhu, izvi zvingakundikana nokuti zvisiri zvikamu zveCSS mutauro.
Imwe muenzaniso ndeyeimba "chiso-chiso". Iyi pfuma inogadzirisa mufananidzo unogona kushandiswa kumamiriro ezvinhu, seizvi:
.logo {
mamiriro-emufananidzo: url (/images/company-logo.png);
}
Kana wakaedza kushandisa "chinyorwa-chinyorwa" kana "chinyorwa-chinyorwa" sechinhu, vaizokundikana nokuti, zvakare, izvi hazvisi zveCSS chaiyo.
Dzimwe CSS Properties
Kune mazita eCSS akawanda aungashandisa kushandura nzvimbo. Mimwe mienzaniso ndeyi:
- Border (kusanganisira muganhu-style, muganhu-ruvara, uye muganhu-upamhi)
- Padding (kusanganisira padding-top, padding-right, padding-bottom, uye padding-kuruboshwe)
- Margins (kusanganisira marginal-top, margin-right, margin-bottom, uye margin-kuruboshwe)
- Font-family
- Chimiro chemafaira
- Ruvara rwekumashure
- Kuwedzera
- Kureba
Izvi CSS zvinhu zvakakura zvinoshandiswa semuenzaniso, nokuti zvose zvakanyatsojeka uye, kunyange kana iwe usingazivi CSS, unogona kunge uchifungidzira zvavanoita maererano nemazita avo.
Pane zvimwe zveCSS zvaunosangana nazvo zvakare izvo zvingave zvisingaoneki kuti zvinoshanda sei maererano nemazita avo:
- Float
- Clear
- Kuputika
- Nyora-shandura
- Z-index
Sezvaunopinda mukati mu web design, iwe uchasangana (uye shandisa) zvinhu izvi zvose nezvimwe!
Zvinhu Zvinoda Maitiro
Nguva dzose paunoshandisa pfuma, iwe unofanira kuzvipa kukosha-uye zvimwe zvinhu zvinogona kungogamuchira dzimwe tsika.
Mumuenzaniso wedu wokutanga we "marara" pfuma, tinofanira kushandisa maruva kukosha. Izvi zvingava kukosha kwehex, RGBA kukosha, kana kunyange mavara emashoko . Chero ipi zvayo inokosha yaizoshanda, zvisinei, kana iwe wakashandisa shoko rokuti "kusuruvara" neimba iyi, hazvingatongobatsiri nokuti, sezvinotsanangurwa sezwi iro ringadaro, haisi kukosha kunozivikanwa muCSS.
Muenzaniso wedu wechipiri we "chitubu-chithunzi" chinoda nzira yekufananidzira inoshandiswa kutora mufananidzo chaiwo kubva pane faira rewebsite yako. Iri ndiro kukosha / syntax inodiwa.
Zvinhu zvose zveCSS zvine maonero zvavanotarisira. Semuyenzaniso:
- Border-ruvara runotarisira marara kukosha
- Border-size inotarisira kukosha kwekukosha, sepikisiki kana zvikamu
- Border mitambo inotarisira imwe yemashizha akachengetedzerwa anoshandiswa pane iyi pfuma, se "yakasimba"
Kana iwe ukapfuura nepakanyorwa kweCSS zvinhu, uchaona kuti mumwe nomumwe wavo ane maitiro chaiwo avachashandisa kushandisa zvigadziro zvavanenge vachida.
Yakarongedzwa naJeremy Girard