L-istil u t-tqassim viżwali ta 'websajt huma ddettati minn CSS jew Cascading Style Sheets. Dawn huma dokumenti li jiffurmaw il-markup HTML tal-webpage, li jipprovdi lill-browsers bl-istruzzjonijiet dwar kif juru l-paġni li jirriżultaw minn dak il-markup. CSS jittratta t-tqassim ta 'paġna, kif ukoll kulur, stampi ta' sfond, tipografija u ħafna aktar.
Jekk tħares lejn fajl CSS, tara li bħal kull markup jew lingwa ta 'kodifikazzjoni, dawn il-fajls għandhom sintassi speċifika għalihom. Kull karta tal-istil hija magħmula minn numru ta 'regoli CSS. Dawn ir-regoli, meta jittieħdu bis-sħiħ, huma liema stili is-sit.
Il-Partijiet ta 'Regola tas-CSS
Regola CSS hija magħmula minn żewġ partijiet distinti - is-selettur u d-dikjarazzjoni. Is-selettur jiddetermina dak li qed jiġi stiljat fuq paġna u d-dikjarazzjoni hija kif għandha tkun stiljata. Pereżempju:
p {
kulur: # 000;
}
Din hija regola CSS. Il-parti selettiva hija l- "p", li hija element selettur għal "paragrafi". Għalhekk, jagħżel il-paragrafi KOLLHA f'sit u jipprovdilhom dan l-istil (sakemm ma jkunx hemm paragrafi li huma mmirati bi stili aktar speċifiċi x'imkien ieħor fid-dokument CSS tiegħek).
Il-parti tar-regola li tgħid "kulur: # 000;" hija dik li hi magħrufa bħala d-dikjarazzjoni. Dik id-dikjarazzjoni hija magħmula minn żewġ biċċiet - il-proprjetà u l-valur.
Il-proprjetà hija l-biċċa "kulur" ta 'din id-dikjarazzjoni. Iddetta liema aspett tas-selettur se jinbidel viżwalment.
Il-valur huwa dak li l-proprjetà CSS magħżula se tinbidel għal. Fl-eżempju tagħna, qed nużaw il-valur hex ta '# 000, li huwa t-taqsimiet tas-CSS għal "iswed".
Allura billi tuża din ir-regola tas-CSS, il-paġna tagħna jkollha paragrafi murija bil-font-kulur iswed.
Basics tal-Proprjetà tas-CSS
Meta tikteb proprjetajiet CSS, ma tistax sempliċement tagħmelhom kif jidhrilha xieraq. Għal każijiet, "kulur" hija proprjetà CSS attwali, sabiex tista 'tużaha. Din il-proprjetà hija dik li tiddetermina l-kulur tat-test ta 'element. Jekk ippruvajt tuża "text-color" jew "font-color" bħala proprjetajiet CSS, dawn jonqsu minħabba li mhumiex partijiet attwali tal-lingwa CSS.
Eżempju ieħor huwa l-proprjetà "immaġni ta 'sfond". Din il-proprjetà tistabbilixxi immaġini li tista 'tintuża għal sfond, bħal dan:
.logo {
immaġni ta 'sfond: url (/images/company-logo.png);
}
Jekk ippruvajt tuża "sfond" jew "background-graphic" bħala proprjetà, huma jonqsu minħabba li, għal darb'oħra, dawn mhumiex proprjetajiet CSS attwali.
Xi CSS Properties
Hemm numru ta 'proprjetajiet CSS li tista' tuża biex tistudja sit. Xi eżempji huma:
- Fruntiera (inkluża l-istil tal-fruntiera, il-kulur tal-fruntiera, u l-wisa 'tal-fruntiera)
- L-ikkuttunar (inkluż il-padding-top, il-padding-right, il-qiegħ tal-padding u l-ikkuttunar-xellug)
- Il-marġini (inklużi l-marġni tal-marġini, id-dritt tal-marġini, il-marġni tal-qiegħ u l-marġini tax-xellug
- Font-family
- Id-daqs tal-font
- Daqs tal-kulur
- Wisa '
- Għoli
Dawn il-proprjetajiet tas-CSS huma dawk kbar biex jintużaw bħala eżempji, minħabba li huma kollha sempliċi ħafna u, anki jekk ma tkunx taf CSS, probabilment tista 'ssib dak li jagħmlu bbażat fuq isimhom.
Hemm proprjetajiet oħra ta 'CSS li se jiltaqgħu magħhom ukoll li jistgħu ma jkunux daqshekk ovvji kif jaħdmu bbażati fuq isimhom:
- Float
- Ċari
- Overflow
- Test-trasformat
- Z-indiċi
Kif ikollok aktar profonda fid-disinn tal-web, int se tiltaqa '(u tuża) dawn il-proprjetajiet kollha u aktar!
Il-proprjetajiet jeħtieġu valuri
Kull darba li tuża proprjetà, trid tagħtiha valur - u ċerti proprjetajiet jistgħu jaċċettaw biss ċerti valuri.
Fl-ewwel eżempju tagħna tal-proprjetà "kulur", neħtieġu nużaw valur tal-kulur. Dan jista 'jkun valur hex , valur RGBA, jew saħansitra kliem tal-kulur . Kwalunkwe minn dawk il-valuri jkun jaħdem, madankollu, jekk użajt il-kelma "gloomy" ma 'din il-proprjetà, hija ma tagħmel xejn għaliex, kif deskrittiv bħal dik il-kelma tista', mhijiex valur rikonoxxut fis-CSS.
It-tieni eżempju tagħna ta '"immaġni ta' sfond" jeħtieġ li tintuża triq ta 'l-immaġni biex tinġabar immaġni attwali mill-fajls tas-sit tiegħek. Dan huwa l-valur / sintassi li huwa meħtieġ.
Il-proprjetajiet kollha tas-CSS għandhom valuri li jistennew. Pereżempju:
- Il-kulur tal-fruntiera jistenna valur tal-kulur
- Id-daqs tal-fruntiera jistenna valur ta 'daqs, bħal pixels jew persentaġġi
- L-istili tal-fruntiera jistennew wieħed mill-istili riżervati użati għal din il-proprjetà, bħal "solidu"
Jekk tgħaddi l-lista tal-proprjetajiet tas-CSS, tiskopri li kull wieħed minnhom għandu valuri speċifiċi li se jużaw biex joħolqu l-istili li huma maħsuba għalihom.
Editjat minn Jeremy Girard