Tgħallem biex ittejjeb il-Ħares tas-sit elettroniku tiegħek
Tagħlim kif il-formoli tal-istil bis- CSS huwa mod tajjeb ħafna biex ittejjeb il-ħarsa tal-websajt tiegħek. Formoli HTML huma forsi fost l-affarijiet ugliest fuq il-biċċa l-kbira tal-paġni tal-web. Ħafna drabi huma boring u utilitarji u ma joffrux ħafna fil-mod ta 'stil.
Ma 'CSS, dan jista' jinbidel. Il-kombinazzjoni tas-CSS ma 'tikketti tal-forom aktar avvanzati tista' tagħti xi forom sbieħ.
Ibdel il-Kuluri
L-istess bħat-test, tista 'tbiddel it-tagħrif miksub u l-kuluri ta' l-isfond ta 'l-elementi tal-formola.
Mod faċli biex tinbidel il-kulur ta 'l-isfond ta' kważi kull element ta 'forma huwa li tuża l-proprjetà ta' lewn ta 'l-isfond fuq it-tikketta tad-dħul. Pereżempju, dan il-kodiċi japplika kulur fl-isfond blu (# 9cf) fuq l-elementi kollha.
input {
kulur fl-isfond: # 9cf;
kulur: # 000;
}
Biex tibdel il-kulur ta 'l-isfond ta' elementi ta 'ċerti elementi biss, żid biss textarea u tagħżel l-istil. Pereżempju:
input, textarea, tagħżel {
kulur fl-isfond: # 9cf;
kulur: # 000;
}
Kun żgur li tibdel il-kulur tat-test jekk tagħmel il-kulur fl-isfond tiegħek skur. Kuluri kontrastanti jgħinu biex l-elementi tal-forma jinqraw aktar. Per eżempju, it-test fuq kulur fl-isfond skur aħmar huwa ħafna iktar faċli biex jinqara jekk il-kulur tat-test huwa abjad. Pereżempju, dan il-kodiċi jpoġġi t-test abjad fuq sfond aħmar.
input, textarea, tagħżel {
kulur fl-isfond: # c00;
kulur: #fff;
}
Tista 'wkoll tpoġġi kulur fl-isfond fuq it-tikketta tal-formola nnifisha. Ftakar li l-lametta tal-formola hija element ta ' blokka , għalhekk il-kulur jimla r-rettangolu kollu, mhux biss il-lokazzjonijiet tal-elementi.
Tista 'żżid sfond isfar għal element ta' blokka biex tagħmel l-erja stand out, bħal dan:
formola {
sfond kulur: #ffc;
}
Żid Fruntieri
Bħal fil-kuluri, tista 'tbiddel il-fruntieri ta' diversi elementi tal-forma. Tista 'żżid fruntiera waħda madwar il-formola kollha. Kun żgur li żżid l-ikkuttunar, jew l-elementi tal-formola tiegħek se jiġu mdendlin ħdejn il-fruntiera.
Hawn hu eżempju ta 'kodiċi għal fruntiera sewda ta' 1 pixel b'5 pixels ta 'padding:
formola {
fruntiera: 1px solidu 000;
ikkuttunar: 5px;
}
Inti tista 'tpoġġi fruntieri aktar minn sempliċement il-forma nnifisha. Ibdel il-fruntiera tal-punti tad-dħul biex tagħmilhom jispikkaw:
input {
fruntiera: 2px maqtugħin # c00;
}
Oqgħod attent meta tpoġġi l-fruntieri fuq il-kaxxi tad-dħul għax imbagħad tħares inqas bħal kaxxi tad-dħul, u xi nies jistgħu ma jirrealizzawx li jistgħu jimlew il-formola.
Għaqqad Karatteristiċi tal-Istil
Billi tgħaqqad flimkien l-elementi tal-forma tiegħek b'ħasbu u xi CSS, tista 'twaqqaf forma sbieħ li tikkumplimenta d-disinn u t-tqassim tas-sit tiegħek.