Pagkat-on sa Pagpauswag sa Panglantaw sa Imong Website
Ang pagkat-on unsaon pag-istilo sa mga porma sa CSS usa ka maayong paagi sa pagpauswag sa hitsura sa imong website. Ang mga porma sa HTML mahimo nga mahimong usa sa labing makahahadlok nga mga butang sa kadaghanang mga panid sa web. Kanunay sila nga makalaay ug mapuslanon ug dili mohatag og daghan sa paagi sa estilo.
Uban sa CSS, nga mausab. Ang pagkombinar sa CSS uban sa mas abante nga porma sa mga tag makahatag sa pipila ka nindot nga mga porma.
Usba ang mga kolor
Sama sa teksto, mahimo nimong usbon ang mga foreground ug background sa mga elemento sa porma.
Ang usa ka sayon nga paagi sa pagbag-o sa kolor sa background sa halos tanang porma sa elemento mao ang paggamit sa mga butang sa background nga kolor sa input tag. Pananglitan, kini nga kodigo nagpadapat sa kolor nga asul nga background (# 9cf) sa tanan nga mga elemento.
input {
kolor sa background: # 9cf;
kolor: # 000;
}
Aron mausab ang kolor sa background sa pipila ka mga elemento sa porma lamang, idugang ang textarea ug pilia ang estilo. Pananglitan:
input, textarea, pagpili {
kolor sa background: # 9cf;
kolor: # 000;
}
Siguroha ang pag-usab sa kolor sa teksto kon imong himoong ngitngit ang kolor sa imong background. Ang nagkalahi nga mga kolor makatabang sa paghimo sa mga porma sa mga elemento nga mas masabtan. Pananglitan, ang teksto sa usa ka itom nga pula nga kolor sa background mas sayon basahon kung ang kolor sa teksto puti. Pananglitan, kini nga kodigo nagbutang sa puti nga teksto sa pula nga background.
input, textarea, pagpili {
background-color: # c00;
kolor: #fff;
}
Mahimo ka usab magbutang og usa ka kolor sa background sa porma nga tag mismo. Hinumdomi nga ang porma sa tag usa ka block element , busa ang kolor nagpuno sa tibuok rectangle, dili lamang ang mga lokasyon sa mga elemento.
Mahimo nimong idugang ang usa ka dalag nga background sa usa ka block element aron mahimo ang lugar nga makita, sama niini:
porma {
background-color: #ffc;
}
Idugang ang mga Border
Sama sa mga kolor, mahimo nimong usbon ang mga utlanan sa nagkadaiyang elemento sa porma. Mahimo nimong idugang ang usa ka utlanan sa tibuok nga porma. Siguroha ang pagdugang sa padding, o ang imong mga elemento nga hugpong mahimong hunong sa tupad sa utlanan.
Ania ang usa ka pananglitan sa code alang sa usa ka 1-pixel itom nga utlanan nga adunay 5 ka pixel sa padding:
porma {
utlanan: 1px solid # 000;
padding: 5px;
}
Mahimo nimong ibutang ang mga utlanan nga dili lamang ang porma mismo. Usba ang utlanan sa input items aron kini makit-an:
input {
utlanan: 2px dashed # c00;
}
Pag-amping kon imong ibutang ang mga utlanan sa mga kahon sa pagsulod samtang dili kaayo sila sama sa mga kahon sa pag-input unya, ug ang pipila ka mga tawo tingali dili makaamgo nga mahimo nilang pun-on ang porma.
Kombinasyon sa Mga Feature sa Estilo
Pinaagi sa paghiusa sa imong porma sa mga elemento uban sa hunahuna ug sa pipila ka CSS, mahimo ka nga magtukod og usa ka nindot nga porma nga nagpuno sa disenyo ug layout sa imong site.