Sinau Ngapikake Deleng Situs web Sampeyan
Learning carane bentuk formulir karo CSS minangka cara sing apik kanggo nambah tampilan situs web sampeyan. Wangun HTML bisa dibantah ing antarane sing paling ala ing pirang-pirang kaca web. Padha asring mboseni lan utilitarian lan ora menehi akeh cara gaya.
Kanthi CSS, sing bisa diganti. Nggabungke CSS kanthi tag wangun luwih maju bisa ngirim sawetara wangun sing apik.
Ngganti Warna
Kaya karo teks, sampeyan bisa ngganti warna latar mburi lan latar mburi unsur wangun.
Cara sing gampang kanggo ngganti werna latar mburi saklawasé saben unsur wangun yaiku nggunakake warna latar mburi ing tag input. Contone, kode iki ditrapake werna latar mburi biru (# 9cf) ing kabeh elemen.
input {
latar mburi-werna: # 9cf;
werna: # 000;
}
Kanggo ngganti warna latar mburi elemen wangun tartamtu, mung nambah textarea lan pilih gaya. Tuladhane:
input, textarea, pilih {
latar mburi-werna: # 9cf;
werna: # 000;
}
Dadi manawa kanggo ngganti warna teks yen sampeyan nggawe werna latar mburi. Contrasting colors help make form forms more readable. Contone, teks ing werna latar mburi werna peteng luwih gampang diwaca yen werna teks putih. Contone, kode iki nulis teks putih ing latar mburi abang.
input, textarea, pilih {
werna latar mburi: # c00;
werna: #fff;
}
Sampeyan bisa uga nulis werna latar ing tag wangun dhewe. Elinga yen tag mbentuk minangka unsur blok , supaya werna ngisi kabeh persegi panjang, ora mung lokasi unsur kasebut.
Sampeyan bisa nambah latar mburi kuning menyang elemen pemblokiran supaya area bisa metu, kaya iki:
wangun {
werna latar mburi: #ffc;
}
Tambah Borders
Kaya werna, sampeyan bisa ngganti wates saka macem-macem unsur wangun. Sampeyan bisa nambah watesan ing kabeh wangun. Dadi manawa kanggo nambah padding, utawa unsur wangun bakal macet munggah ing jejere wates.
Punika conto kode kanggo wates ireng 1 piksel kanthi 5 piksel padding:
wangun {
wewatesan: 1px solid # 000;
padding: 5px;
}
Sampeyan bisa nggawe wates luwih akeh tinimbang mung wujud kasebut. Ngganti watesan item input supaya bisa metu:
input {
wates: 2px dashed # c00;
}
Ati-ati nalika nggawe watesan ing kothak input kaya sing katon kaya kothak input, lan sawetara wong ora bisa nyumurupi manawa bisa isi formulir kasebut.
Gabung Fitur Gaya
Kanthi ngemot unsur wangun kanthi pikirane lan sawetara CSS, sampeyan bisa nyiyapake formulir sing becik sing ngrampungake desain lan tata letak situs sampeyan.