Diajar Ngaronjatkeun Tingal sahiji Website anjeun
Diajar kumaha carana gaya bentuk jeung CSS mangrupakeun jalan gede ngaronjatkeun katingal tina ramatloka anjeun. bentuk HTML mangrupakeun arguably diantara hal ugliest dina kaca web paling. Aranjeunna mindeng boring tur mangpaat sarta teu nawiskeun jauh di jalan gaya.
Kalawan CSS, nu bisa ngarobah. Ngagabungkeun CSS jeung tag formulir leuwih canggih bisa nganteurkeun sababaraha bentuk nice-pilari.
Ngarobah warna
Sagampil kalayan téks, Anjeun bisa ngarobah foreground jeung latar kelir sahiji elemen formulir.
Hiji cara gampang pikeun ngarobah warna latar tukang ampir unggal unsur formulir nyaeta ngagunakeun harta tukang-warna dina tag input. Contona, kode ieu manglaku warna latar biru (# 9cf) kana sakabeh elemen.
input {
tukang-warna: # 9cf;
Warna: # 000;
}
Ngaganti warna latar tukang elemen formulir ngan tangtu, ngan nambahan textarea tur pilih mun gaya. Salaku conto:
input, textarea, pilih {
tukang-warna: # 9cf;
Warna: # 000;
}
Pastikeun pikeun ngarobah warna téks lamun nyieun anjeun poék warna latar. Kontras kelir ngabantu sangkan elemen formulir langkung kabaca. Contona, téks dina warna latar beureum poék leuwih gampang maca lamun dina warna téks nyaéta bodas. Contona, kode ieu tempat téks bodas dina latar beureum.
input, textarea, pilih {
tukang-warna: # c00;
Warna: #fff;
}
Anjeun malah bisa nempatkeun hiji warna latar dina tag formulir sorangan. Inget yen tag formulir mangrupakeun unsur block , jadi warna nu ngeusi dina sakabéh sagi opat, moal ngan lokasi sahiji elemen.
Anjeun tiasa nambahkeun latar konéng ka unsur block sangkan wewengkon nangtung kaluar, siga kieu:
formulir {
tukang-warna: #ffc;
}
nambahkeun wates
Salaku kalawan kelir, Anjeun bisa ngarobah wates rupa elemen formulir. Anjeun tiasa nambahkeun wates tunggal sabudeureun sakabeh formulir. Pastikeun pikeun nambahkeun padding, atawa elemen formulir anjeun bakal macet katuhu nepi gigireun wates.
Di dieu téh conto kode pikeun wates hideung 1-piksel kalawan 5 piksel of padding:
formulir {
wates: 1px solid # 000;
padding: 5px;
}
Anjeun tiasa nyimpen wates sabudeureun leuwih ti ngan wujud sorangan. Ngarobah wates tina item input sangkan aranjeunna nangtung kaluar:
input {
wates: 2px dashed # c00;
}
Kudu ati nalika anjeun tiasa nyimpen wates dina kotak input sakumaha maranéhanana kasampak kirang kawas buleud input lajeng, sarta sababaraha urang bisa jadi teu sadar maranéhna bisa eusian formulir.
Ngagabungkeun Fitur Style
Ku putting babarengan elemen formulir anjeun kalawan pamikiran jeung sababaraha CSS, anjeun tiasa nyetél hiji formulir pilari nice nu complements rarancang sarta perenah loka Anjeun.