Masamba a webusaiti ndi mawonekedwe omwe amawonetsedwa ndi ma Css kapena Cascading Style Sheets. Izi ndi zolemba zomwe zimapanga tsamba lamasamba la HTML, ndikupereka ma webusaiti ndi malangizo a momwe angasonyezere masamba omwe amachokera pamtunduwu. CSS ikuthandizira dongosolo la tsamba, komanso mtundu, zithunzi zam'mbuyo, zojambulajambula ndi zina zambiri.
Ngati muyang'ana pa fayilo ya CSS, mudzawona kuti monga malemba kapena chilankhulidwe china, mafayilowa ali ndi mawu ofanana nawo. Tsamba lililonse limapangidwa ndi malamulo angapo a CSS. Malamulowa, pamene atengedwa mokwanira, ndizojambula masitepe.
Ziwalo za malamulo a CSS
Ulamuliro wa CSS wapangidwa ndi zigawo ziwiri zosiyana - wosankha ndi chidziwitso. Wosankhayo amatsimikizira zomwe zikulembedwa pa tsamba ndipo chilengezo ndi momwe ziyenera kukhalira. Mwachitsanzo:
p {
Mtundu: # 000;
}}
Uwu ndiwo lamulo la CSS. Gawo la osankhidwa ndi "p", limene liri chosankha cha "ndime". Choncho, mungasankhe ZINTHU zonse pa sitelo ndi kuwapezera kalembedwe (kupatula ngati pali ndime zomwe zimayang'aniridwa ndi mafashoni apadera kwinakwake muzolemba zanu za CSS).
Gawo la lamulo lomwe limati "mtundu: # 000;" ndi chimene chimatchedwa chidziwitso. Chilengezochi chimapangidwa ndi zidutswa ziwiri - katundu ndi mtengo.
Malo ndi gawo la "mtundu" wa chidziwitso ichi. Zimatanthawuza mtundu uti wa wosankha udzasinthidwa kuwoneka.
Mtengo ndi chomwe katundu wosankhidwa CSS adzasinthidwa. Mu chitsanzo chathu, tikugwiritsa ntchito mtengo wa # 000, umene uli CSS shorthand wa "wakuda".
Choncho pogwiritsa ntchito ulamuliro wa CSS, tsamba lathu likhoza kukhala ndi ndime zosonyeza mtundu wazithunzi.
CSS Property Basics
Pamene mulemba katundu wa CSS, simungathe kuwongolera momwe mukuonera. Pazochitika, "mtundu" ndi katundu weniweni wa CSS, kotero mukhoza kuchigwiritsa ntchito. Malo awa ndi omwe amatsimikizira mtundu wa malemba. Ngati mutayesa kugwiritsa ntchito "mtundu wa malemba" kapena "maonekedwe apamwamba" ngati katundu wa CSS, izi zikhoza kulephera chifukwa sizinthu zenizeni za chinenero cha CSS.
Chitsanzo china ndi katundu "chithunzi-chakumbuyo". Malowa akukhazikitsa chithunzi chomwe chingagwiritsidwe ntchito kumbuyo, monga chonchi:
.logo {
Chithunzi chakumbuyo: url (/images/company-logo.png);
}}
Ngati mutayesera kugwiritsa ntchito "chithunzi chakumbuyo" kapena "chithunzi chakumbuyo" monga malo, iwo amalephera chifukwa, kachiwiri, izi sizinthu zenizeni za CSS.
Zina za CSS Properties
Pali zida zambiri za CSS zomwe mungagwiritse ntchito polemba tsamba. Zitsanzo zina ndi izi:
- Border (kuphatikizapo malire, malire, ndi malire)
- Padding (kuphatikizapo padding-top, padding-right, padding-pansi, ndi padding -manzere)
- Mitsinje (kuphatikizapo pamtunda, kumanja kumanja, kumtunda-m'munsi, ndi kumanzere kumanzere)
- Mndandanda wa banja
- Kukula kwazithunzi
- Mtundu wa kumbuyo
- Kutalika
- Kutalika
Zida za CSSzi ndizofunikira kugwiritsa ntchito monga zitsanzo, chifukwa zonse zimakhala zoongoka ndipo, ngakhale simukudziwa CSS, mungathe kuganiza zomwe akuchita malinga ndi mayina awo.
Pali zinthu zina zomwe zingakumane ndi CSS zomwe sizikuwoneka bwino momwe zimagwiritsira ntchito mayina awo:
- Sungani
- Chotsani
- Kusefukira
- Lembani-kusintha
- Z-index
Mukamalowa mkati mwa intaneti, mumakumana (ndikugwiritsanso ntchito) zonsezi ndi zina!
Zida Zimasowa Makhalidwe
Nthawi iliyonse yomwe mumagwiritsa ntchito katundu, muyenera kuzipereka mtengo - ndipo katundu wina akhoza kulandira zokhazokha.
Mu chitsanzo chathu choyamba cha katundu wa "mtundu", tifunika kugwiritsa ntchito mtengo wamtengo. Izi zikhoza kukhala mtengo wa hex, mtengo wa RGBA, kapena ngakhale mawu achinsinsi . Zonse mwazimenezo zingagwire ntchito, komabe ngati mutagwiritsa ntchito mawu akuti "okhumudwa" ndi malowa, sizingatheke kuchita chifukwa, monga momwe mawuwo angatchulire, sizowunika ku CSS.
Chitsanzo chathu chachiwiri cha "chithunzi chakumbuyo" chimafuna njira yowonetsera yogwiritsidwa ntchito kuti mupeze fano lenileni kuchokera pazithunzi za webusaiti yanu. Ichi ndi mtengo / syntax yomwe ikufunika.
Zonse za CSS zili ndi zinthu zomwe amayembekezera. Mwachitsanzo:
- Mtundu wam'mbali umayang'ana mtundu wa mtundu
- Kukula kwa malire kuyembekezera mtengo wapatali, monga ma pixel kapena magawo
- Mitambo yam'mbali imayang'ana chimodzi mwazosungidwa zomwe zimagwiritsidwa ntchito pa malo awa, monga "olimba"
Ngati mutadutsa mndandanda wa katundu wa CSS, mudzapeza kuti aliyense wa iwo ali ndi mfundo zomwe angagwiritse ntchito popanga mafashoni omwe akufuna.
Kusinthidwa ndi Jeremy Girard