Naučite se izboljšati videz vaše spletne strani
Učenje, kako oblikovati oblike s CSS, je odličen način za izboljšanje videza vašega spletnega mesta. HTML obrazci so nedvomno med najkoristnejšimi stvarmi na večini spletnih strani. Pogosto so dolgočasne in uporabne in ne ponujajo veliko na način sloga.
S CSS se lahko to spremeni. Združevanje CSS z naprednejšimi oznakami obrazcev lahko prinese nekaj lepih oblik.
Spremenite barve
Tako kot z besedilom lahko spremenite barve ospredja in ozadja elementov obrazca.
Enostaven način za spreminjanje barve ozadja skoraj vsakega elementa obrazca je uporaba lastnosti barve ozadja na vnosni oznaki. Na primer, ta koda uporablja barvo modre barve (# 9cf) za vse elemente.
vnos {
barva ozadja: # 9cf;
barva: # 000;
}
Če želite spremeniti barvo ozadja samo določenih elementov obrazca, preprosto dodajte textarea in izberite slog. Na primer:
input, textarea, izberite {
barva ozadja: # 9cf;
barva: # 000;
}
Bodite prepričani, da spremenite barvo besedila, če barvo ozadja postane temno. Kontrastne barve omogočajo, da so elementi obrazca bolj čitljivi. Na primer, besedilo na temno rdeči barvi ozadja je veliko lažje, če je barva besedila bela. Ta koda na primer postavlja belo besedilo v rdeče ozadje.
input, textarea, izberite {
barva ozadja: # c00;
barva: #fff;
}
Lahko celo postavite barvo ozadja na sam obrazec obrazca. Ne pozabite, da je oznaka za obrazec blokovni element , zato barva zapolni celoten pravokotnik, ne samo lokacijo elementov.
Elementu bloka lahko dodate rumeno ozadje, da bo območje izstopalo, na primer:
oblika {
barva ozadja: #ffc;
}
Dodaj meje
Kot pri barvah lahko spremenite tudi meje različnih elementov obrazca. Dodate lahko eno samo rob okrog celotnega obrazca. Bodite prepričani, da dodate oblazinjenje, ali pa bodo vaši elementi obrazca zataknjeni ob robu.
Tukaj je primer kode za 1-pikslovo črno obrobo s 5 slikovnimi pikami:
oblika {
border: 1px solid # 000;
padding: 5px;
}
Meje lahko postavite več kot samo obrazec. Spremenite mejo vhodnih elementov, da bodo izstopale:
vnos {
meja: 2px črta # c00;
}
Bodite previdni, ko postavite meje na vnosna polja, ker so manj kot vhodna polja in nekateri ljudje morda ne vedo, da lahko izpolnijo obrazec.
Značilnosti kombiniranega sloga
Če združite elemente obrazca z mislijo in nekaj CSS, lahko nastavite lepo videti obliko, ki dopolnjuje zasnovo in postavitev vaše spletne strani.