Lærðu að bæta útlit vefsvæðis þíns
Að læra hvernig á að stilla eyðublöð með CSS er frábær leið til að bæta útlit vefsvæðisins. HTML form eru væntanlega meðal grimmustu hlutina á flestum vefsíðum. Þau eru oft leiðinleg og gagnsær og bjóða ekki mikið í formi stíl.
Með CSS, sem getur breyst. Að sameina CSS við fleiri háþróaða formmerki getur skilað sumum fallegum myndum.
Breyttu litunum
Rétt eins og með texta geturðu breytt forgrunni og bakgrunnslitum formhluta.
Auðveld leið til að breyta bakgrunnslitum næstum hverju formi er að nota bakgrunnslitinn á inntakstakkanum. Til dæmis gildir þessi kóða blár bakgrunnslitur (# 9cf) á öllum þáttum.
inntak {
bakgrunnslit: # 9cf;
litur: # 000;
}
Til að breyta bakgrunnslit aðeins tiltekinna myndaþætti skaltu bara bæta við textarea og velja í stíl. Til dæmis:
inntak, textarea, veldu {
bakgrunnslit: # 9cf;
litur: # 000;
}
Vertu viss um að breyta textalitnum ef þú gerir bakgrunnslitinn myrkur. Andstæðar litir hjálpa til að mynda þættirnar læsilegari. Til dæmis er texti á dökkri rauðu bakgrunni miklu auðveldara að lesa ef textinn liturinn er hvítur. Til dæmis setur þessi kóði hvíta texta á rauða bakgrunni.
inntak, textarea, veldu {
bakgrunnslit: # c00;
litur: #fff;
}
Þú getur jafnvel sett bakgrunnslit á formið sjálft. Mundu að formmerkið er blokkarþáttur , þannig að liturinn fyllist í öllu rétthyrningnum, ekki bara staðsetningum þættanna.
Þú getur bætt við gula bakgrunn við blokkareiningu til að gera svæðið að jafnaði, eins og þetta:
mynda {
bakgrunnslit: #ffc;
}
Bæta við landamærum
Eins og með liti geturðu breytt landamærum hinna ýmsu formhluta. Þú getur bætt við einum landamærum um allt formið. Vertu viss um að bæta við púði, eða myndarþættir þínar munu vera fastur við hliðina á landamærunum.
Hér er dæmi um kóða fyrir 1 pixla svartan ramma með 5 punktum af padding:
mynda {
landamæri: 1px solid # 000;
padding: 5px;
}
Þú getur sett landamæri í kringum meira en bara formið sjálft. Breyttu landamærum innsláttarþáttanna til að láta þá standa út:
inntak {
landamæri: 2px þjóta # c00;
}
Verið varkár þegar þú setur landamæri á inntakarefnum eins og þær líta út eins og inntakskassar þá og sumt fólk getur ekki áttað sig á að þeir geti fyllt út eyðublaðið.
Sameina Style Aðgerðir
Með því að setja saman þættir þínar með hugsun og sumum CSS, getur þú sett upp fallegt útlit sem bætir við hönnun og uppsetningu vefsvæðisins.