Saznajte kako poboljšati izgled svoje web stranice
Učenje kako oblikovati obrasce s CSS-om izvrstan je način za poboljšanje izgleda vaše web stranice. HTML obrasci nedvojbeno su među najružnijima na većini web stranica. Često su dosadni i utilitarni, a ne nude mnogo u stilu.
Uz CSS, to se može promijeniti. Kombinacija CSS-a s naprednijim oznakama formata može pružiti neke lijepe izglede.
Promijenite boje
Kao i kod teksta, možete promijeniti prednje i pozadinske boje elemenata oblika.
Jednostavan način za promjenu boje pozadine gotovo svakog elementa obrasca jest korištenje svojstva pozadinske boje na ulaznoj oznaci. Na primjer, ovaj kôd primjenjuje plavu boju pozadine (# 9cf) na sve elemente.
ulaz {
boja pozadine: # 9cf;
boja: # 000;
}
Da biste promijenili boju pozadine samo određenih elemenata oblika, jednostavno dodajte textarea i odaberite stil. Na primjer:
unos, textarea, odaberite {
boja pozadine: # 9cf;
boja: # 000;
}
Obavezno mijenjati boju teksta ako tamno boja vaše pozadinske boje. Kontrastne boje olakšavaju oblik elementa. Primjerice, tekst na tamnoj crvenoj pozadini mnogo je lakše pročitati ako je boja teksta bijela. Na primjer, ovaj kod postavlja bijeli tekst na crvenu pozadinu.
unos, textarea, odaberite {
boja pozadine: # c00;
boja: #fff;
}
Možete čak staviti pozadinsku boju na oznaku obrasca. Ne zaboravite da je oznaka obrasca blok element , tako da boja ispunjava čitav pravokutnik, a ne samo lokacije elemenata.
Možete dodati žutu pozadinu elementu bloka kako bi se područje istaknulo, ovako:
obrazac {
boja pozadine: #ffc;
}
Dodaj granice
Kao i kod boja, možete promijeniti granice različitih elemenata oblika. Možete dodati jednu granicu oko cijelog obrasca. Obavezno dodajte padding, ili će elementi vašeg obrasca biti zaglavljeni odmah do granice.
Slijedi primjer koda crne crte od 1 piksela s 5 piksela padanja:
obrazac {
granica: 1px solid # 000;
padding: 5px;
}
Možete graničiti oko više od samog obrasca. Promijenite granicu ulaznih stavki da bi se istaknuli:
ulaz {
granica: 2 piksela isprekidana # c00;
}
Budite oprezni kada stavite granice na ulazne kutije jer izgledaju manje poput ulaznih okvira tada, a neki ljudi možda ne shvaćaju da mogu popuniti obrazac.
Kombinirajte značajke stila
Stavljanjem elemenata oblika s razmišljanjima i nekim CSS-om možete postaviti lijep izgled koji nadopunjuje dizajn i izgled vaše web-lokacije.