Ffurflenni Arddull Gyda CSS

Dysgu i Wella Edrych ar Eich Gwefan

Mae dysgu sut i arddull ffurflenni gyda CSS yn ffordd wych o wella golwg eich gwefan. Gellir dadlau ffurflenni HTML ymhlith y pethau hynafaf ar y rhan fwyaf o dudalennau gwe. Maent yn aml yn ddiflas ac yn ddefnydditarian ac nid ydynt yn cynnig llawer yn y ffordd o arddull.

Gyda CSS, gall hynny newid. Gall cyfuno CSS gyda'r tagiau ffurf mwy datblygedig ddarparu rhai ffurfiau braf.

Newid y Lliwiau

Yn union fel gyda thestun, gallwch chi newid lliwiau blaen a lliwiau cefndir elfennau'r ffurflen.

Ffordd hawdd o newid lliw cefndir bron pob elfen o ffurf yw defnyddio'r eiddo lliw cefndir ar y tag mewnbwn. Er enghraifft, mae'r cod hwn yn gymwys lliw cefndir glas (# 9cf) ar yr holl elfennau.

mewnbwn {
cefndir-liw: # 9cf;
lliw: # 000;
}

I newid lliw cefndir dim ond elfennau ffurf penodol, dim ond ychwanegu textarea a dewiswch i'r arddull. Er enghraifft:

mewnbwn, textarea, dewis {
cefndir-liw: # 9cf;
lliw: # 000;
}

Gwnewch yn siŵr eich bod yn newid lliw y testun os ydych chi'n gwneud eich lliw cefndir yn dywyll. Mae lliwiau cyferbyniol yn helpu i wneud elfennau'r ffurf yn fwy darllenadwy. Er enghraifft, mae testun ar lliw cefndir tywyll tywyll yn llawer hawdd ei ddarllen os yw'r lliw testun yn wyn. Er enghraifft, mae'r cod hwn yn gosod testun gwyn ar gefndir coch.

mewnbwn, textarea, dewis {
cefndir-liw: # c00;
lliw: #fff;
}

Gallwch hyd yn oed roi lliw cefndir ar y tag ffurflen ei hun. Cofiwch fod y tag ffurf yn elfen bloc , felly mae'r lliw yn llenwi yn y petryal cyfan, nid lleoliadau'r elfennau yn unig.

Gallwch ychwanegu cefndir melyn i elfen bloc i wneud yr ardal yn sefyll allan, fel hyn:

ffurflen {
cefndir-liw: #ffc;
}

Ychwanegwch Ffiniau

Fel gyda lliwiau, gallwch newid ffiniau elfennau gwahanol ffurfiau. Gallwch ychwanegu un ffin o gwmpas y ffurflen gyfan. Gwnewch yn siŵr eich bod chi'n ychwanegu padiau, neu bydd eich elfennau yn cael eu jamio i fyny nesaf i'r ffin.

Dyma enghraifft o god ar gyfer ffin du 1-picel gyda 5 picsel o padin:

ffurflen {
ffin: 1px solid # 000;
padio: 5px;
}

Gallwch roi ffiniau o gwmpas mwy na dim ond y ffurflen ei hun. Newid ffin yr eitemau mewnbwn i'w gwneud yn sefyll allan:

mewnbwn {
ffin: 2px dashed # c00;
}

Byddwch yn ofalus wrth roi ffiniau ar fysellau mewnbwn gan eu bod yn edrych yn llai fel mewnbwn blychau yna, ac efallai na fydd rhai pobl yn sylweddoli y gallant lenwi'r ffurflen.

Cyfuno Nodweddion Arddull

Drwy gyd-fynd â'ch elfennau eich ffurflen gyda meddwl a rhai CSS, gallwch chi sefydlu ffurf braf sy'n edrych ar gynllun a chynllun eich safle.