Foirmeacha Stíl Le CSS

Foghlaim chun Féach ar Láithreán Gréasáin a Fheabhsú

Is bealach iontach é foghlaim conas foirmeacha a stíl le CSS chun cuma do shuíomh gréasáin a fheabhsú. Is féidir na foirmeacha HTML a rá i measc na n-ugliest is mó ar na leathanaigh ghréasáin is mó. Is minic a bhíonn siad leadránach agus utilitarian agus níl siad ar fáil i bhfad ar an mbealach stíl.

Le CSS, is féidir é sin a athrú. Is féidir le comhcheangail CSS leis na clibeanna foirme níos forbartha roinnt foirmeacha deasacha a sheachadadh.

Athraigh na Dathanna

Díreach mar atá le téacs, is féidir leat an tulra agus dathanna cúlra na n-eilimintí foirm a athrú.

Is é an bealach éasca chun dath cúlra beagnach gach eilimint fhoirm a athrú ná an mhaoin chúlra a úsáid ar an gclib ionchuir. Mar shampla, feidhmíonn an cód seo dath cúlra gorm (# 9cf) ar na heilimintí go léir.

ionchur {
dath cúlra: # 9cf;
dath: # 000;
}

Chun dath cúlra na n-eilimintí áirithe de chineál a athrú, téigh go díreach le textarea agus roghnaigh an stíl. Mar shampla:

ionchur, textarea, roghnaigh {
dath cúlra: # 9cf;
dath: # 000;
}

Bí cinnte an dath téacs a athrú má dhéanann tú do dhath cúlra dorcha. Cuidíonn dathanna codarsnacha leis na heilimintí foirm a bheith níos inléite. Mar shampla, is féidir an téacs ar dhúl dorcha dearg dearg a léamh i bhfad níos éasca má tá dath an téacs bán. Mar shampla, cuireann an cód seo téacs bán ar chúlra dearg.

ionchur, textarea, roghnaigh {
dath cúlra: # c00;
dath: #fff;
}

Is féidir leat fiú dath cúlra a chur ar an gclib foirm féin. Cuimhnigh gur blocghné é an chlib fhoirm, mar sin líonann an dath sa dronuilleog iomlán, ní hamháin suíomhanna na n-eilimintí.

Is féidir leat cúlra buí a chur le blocghné chun an limistéar a dhéanamh amach, mar seo:

foirm {
dath cúlra: #ffc;
}

Cuir Teorainneacha leis

Mar is amhlaidh le dathanna, is féidir leat teorainneacha eilimintí éagsúla de chineál a athrú. Is féidir leat teorainn amháin a chur ar fud an fhoirm iomláin. Bí cinnte go gcuirfí stuáil ar fáil, nó déanfar na heilimintí a fhoirmiú go díreach in aice leis an teorainn.

Seo sampla de chód le haghaidh teorann dubh 1-picteilín le 5 picteilín de stuáil:

foirm {
teorainn: 1px soladach # 000;
stuáil: 5px;
}

Is féidir leat teorainneacha a chur timpeall níos mó ná an fhoirm féin. Athraigh teorainn na n-ionchur ionas go mbeidh siad ag seasamh amach:

ionchur {
teorainn: 2px thit # c00;
}

Bí cúramach nuair a chuireann tú teorainneacha ar bhoscaí ionchuir, mar a fheiceann siad níos lú cosúil le boscaí ionchuir ansin, agus ní fhéadfaidh cuid daoine a thuiscint gur féidir leo an fhoirm a líonadh.

Comhcheangail Gnéithe Stíl

Trí mheán na n-eilimintí foirm atá agat le smaoineamh agus roinnt CSS a chur le chéile, is féidir leat foirm deas a lorg a chomhlánaíonn dearadh agus leagan amach do shuíomh.