Sužinokite, kaip pagerinti jūsų svetainės išvaizdą
Mokymasis stiliaus formomis su CSS yra puikus būdas pagerinti jūsų svetainės išvaizdą. HTML formos, be abejo, yra viena labiausiai blogiausių dalykų daugumoje interneto svetainių. Jie dažnai yra nuobodūs ir utilitarizuoti ir nesiūlo daug stiliaus.
Su CSS, kad gali pasikeisti. Sujungus CSS su pažangesnėmis formų žymomis, galite sukurti keletą puikių formų.
Pakeiskite spalvas
Kaip ir su tekstu, galite keisti elemento priekines ir fono spalvas.
Lengvas būdas pakeisti beveik kiekvienos formos elemento fono spalvą yra naudoti fono spalvos nuosavybę įvesties žymoje. Pvz., Šis kodas taiko mėlyną fono spalvą (# 9cf) visuose elementuose.
įvestis {
fono spalva: # 9cf;
spalva: # 000;
}
Norėdami pakeisti tik tam tikrų formos elementų fono spalvą, tiesiog pridėkite teksto lauką ir pasirinkite stilių. Pavyzdžiui:
įvestis, teksto laukelis, pasirinkite {
fono spalva: # 9cf;
spalva: # 000;
}
Būtinai pakeiskite teksto spalvą, jei fono spalva bus tamsi. Kontrastingos spalvos padeda formos elementams įskaityti. Pavyzdžiui, tekstas tamsiai raudonos fono spalvos yra daug lengviau skaityti, jei teksto spalva yra balta. Pavyzdžiui, šis kodas palieka baltąjį tekstą raudoname fone.
įvestis, teksto laukelis, pasirinkite {
fono spalva: # c00;
spalva: #fff;
}
Jūs netgi galite patalpinti fono spalvą formos žyme. Atminkite, kad formos žyma yra blokinis elementas , todėl spalva užpildo visą stačiakampį, o ne tik elementų vietas.
Galite pridėti geltoną foną į bloko elementą, kad sritis išsiskirtų, pvz .:
forma {
fono spalva: #ffc;
}
Pridėti sieneles
Kaip ir spalvos, galite keisti įvairių formos elementų sienas. Galite pridėti vienos sienos aplink visą formą. Įsitikinkite, kad pridėjote užpildą, arba jūsų formos elementai bus užstrigę tiesiai šalia sienos.
Čia pateiktas 1 pikselių juodos spalvos sienos kodo pavyzdys su 5 pikselių užpildu:
forma {
sienos: 1px tvirtas # 000;
padding: 5px;
}
Jūs galite įterpti sienas daugiau nei vien tik forma. Pakeiskite įvesties elementų sieną, kad jie išsiskirtų:
įvestis {
sienos: 2px dashed # c00;
}
Būkite atsargūs, kai įvesite sienas įvesties dėžutes, nes jie atrodo mažiau kaip įvesties dėžutės, o kai kurie žmonės gali nesuprasti, kad jie gali užpildyti formą.
Suderinti stiliaus savybes
Sukūrę formos elementus su mintimis ir tam tikru CSS, galite sukurti gražią formą, kuri papildytų jūsų svetainės dizainą ir išdėstymą.