Mëso për të përmirësuar pamjen e faqes suaj të internetit
Mësoni si të krijoni formularë me CSS është një mënyrë e shkëlqyer për të përmirësuar pamjen e faqes suaj të internetit. Format HTML janë ndoshta ndër gjërat më të shëmtuara në shumicën e faqeve të internetit. Ata janë shpesh të mërzitshëm dhe utilitar dhe nuk ofrojnë shumë në mënyrën e stilit.
Me CSS, kjo mund të ndryshojë. Kombinimi i CSS me etiketat më të avancuara mund të japë disa forma të këndshme.
Ndrysho Ngjyrat
Ashtu si me tekstin, ju mund të ndryshoni ngjyrat e planit të parë dhe të sfondit të elementëve të formës.
Një mënyrë e thjeshtë për të ndryshuar ngjyrën e sfondit të pothuajse çdo elementi të formës është të përdorësh pronën e ngjyrës së sfondit në etiketën e futjes. Për shembull, ky kod zbatohet me ngjyrë blu të sfondit (# 9cf) në të gjitha elementet.
input {
background-color: # 9cf;
ngjyra: # 000;
}
Për të ndryshuar ngjyrën e sfondit të elementeve të caktuara të formës, vetëm shtoni textarea dhe zgjidhni në stilin. Për shembull:
input, textarea, zgjidhni {
background-color: # 9cf;
ngjyra: # 000;
}
Sigurohuni që të ndryshoni ngjyrën e tekstit nëse e bëni ngjyrën e sfondit të errët. Ngjyrat e kundërta ndihmojnë që elementët e formës të jenë më të lexueshme. Për shembull, teksti në një ngjyrë të kuqe të errët ngjyrë të kuqe është shumë më e lexueshme nëse ngjyra e tekstit është e bardhë. Për shembull, ky kod vendos tekstin e bardhë në një sfond të kuq.
input, textarea, zgjidhni {
background-color: # c00;
ngjyra: #fff;
}
Mund të vendosësh edhe një ngjyrë sfondi në vetë etiketën e formës. Mos harroni se tag-i i formës është një element bllok , kështu që ngjyra mbushet në të gjithë drejtkëndorin, jo vetëm vendndodhjet e elementeve.
Ju mund të shtoni një sfond të verdhë në një element bllok për ta bërë zonën të dalë jashtë, si kjo:
formë {
background-color: #ffc;
}
Shto Kufijtë
Ashtu si me ngjyrat, ju mund të ndryshoni kufijtë e elementeve të formave të ndryshme. Ju mund të shtoni një kufi të vetëm rreth gjithë formularit. Sigurohuni që të shtoni mbushje, ose elementet e formës suaj do të jenë të bllokuara deri afër kufirit.
Ja një shembull i kodit për një kufi të zi 1 pixel me 5 piksele mbushjeje:
formë {
kufiri: 1px solid # 000;
mbushje: 5px;
}
Ju mund të vendosni kufijtë rreth më shumë se vetëm vetë forma. Ndryshoni kufirin e artikujve të hyrjes për t'i bërë ato të dallohen:
input {
kufiri: 2px thye # c00;
}
Kini kujdes kur vendosni kufijtë në kutitë e futjes pasi ato duken më pak si kutitë e futjes pastaj dhe disa njerëz nuk mund ta kuptojnë se mund ta plotësojnë formularin.
Kombino Style Features
Duke vënë së bashku elementet e formës suaj me mendimin dhe disa CSS, mund të krijoni një formë të këndshme që plotëson dizajnin dhe paraqitjen e faqes suaj.