Belajar Meningkatkan Lihat Laman Web Anda
Belajar bagaimana bentuk gaya dengan CSS adalah cara yang baik untuk memperbaiki rupa laman web anda. Bentuk HTML boleh dibilang di antara perkara-perkara yang paling buruk di kebanyakan laman web. Mereka sering membosankan dan utilitarian dan tidak menawarkan banyak cara gaya.
Dengan CSS, itu boleh berubah. Menggabungkan CSS dengan teg bentuk yang lebih maju boleh menyampaikan beberapa bentuk yang menarik.
Tukar Warna
Sama seperti teks, anda boleh menukar latar depan dan warna latar belakang elemen bentuk.
Cara mudah untuk menukar warna latar belakang hampir setiap elemen bentuk ialah menggunakan sifat latar belakang pada tag input. Sebagai contoh, kod ini menggunakan warna latar biru (# 9cf) pada semua elemen.
input {
warna latar belakang: # 9cf;
warna: # 000;
}
Untuk menukar warna latar belakang hanya elemen bentuk tertentu, tambahkan teks dan pilih pada gaya. Sebagai contoh:
input, textarea, pilih {
warna latar belakang: # 9cf;
warna: # 000;
}
Pastikan anda menukar warna teks jika anda membuat warna latar anda gelap. Warna-warna yang menolong membantu menjadikan unsur-unsur bentuk lebih mudah dibaca. Sebagai contoh, teks pada warna latar belakang gelap adalah lebih mudah dibaca jika warna teks berwarna putih. Sebagai contoh, kod ini meletakkan teks putih pada latar belakang merah.
input, textarea, pilih {
warna latar belakang: # c00;
warna: #fff;
}
Anda juga boleh meletakkan warna latar belakang pada bentuk borang itu sendiri. Ingatlah bahawa bentuk borang adalah elemen blok , jadi warna itu mengisi seluruh segi empat tepat, bukan hanya lokasi unsur-unsur.
Anda boleh menambah latar belakang kuning pada elemen blok untuk menjadikan kawasan itu menonjol, seperti ini:
borang {
warna latar belakang: #ffc;
}
Tambah Borders
Seperti warna, anda boleh menukar sempadan pelbagai elemen bentuk. Anda boleh menambah sempadan tunggal di seluruh bentuk keseluruhan. Pastikan untuk menambah padding, atau unsur bentuk anda akan tersekat di sebelah sempadan.
Berikut adalah contoh kod untuk sempadan hitam 1-pixel dengan 5 piksel padding:
borang {
sempadan: 1px pepejal # 000;
padding: 5px;
}
Anda boleh meletakkan sempadan lebih daripada sekadar bentuk itu sendiri. Tukar sempadan item input untuk menonjolnya:
input {
border: 2px dashed # c00;
}
Berhati-hatilah apabila anda meletakkan sempadan pada kotak input kerana mereka kelihatan kurang seperti kotak input kemudian, dan sesetengah orang mungkin tidak menyedari bahawa mereka boleh mengisi borang tersebut.
Menggabungkan Ciri-ciri Gaya
Dengan menyusun unsur-unsur bentuk anda dengan pemikiran dan beberapa CSS, anda boleh menyediakan bentuk yang menarik yang melengkapi reka bentuk dan tata letak laman web anda.