Veb saytınızın görünüşünü yaxşılaşdırmaq üçün məlumat əldə edin
CSS ilə stil formasını necə öyrənmək, veb saytınızın görünüşünü yaxşılaşdırmaq üçün yaxşı bir yoldur. HTML formaları ən çox web səhifələrində ən çətin şeylər arasında mübahisəlidir. Onlar tez-tez qazma və utilitarian və stil yolu çox təklif etmirlər.
CSS ilə dəyişə bilər. CSS'yi daha inkişaf etmiş forma etiketleriyle birleştiren bazı gözəl görünüşlü formlar təmin edə bilər.
Rəngləri dəyişdirin
Mətndə olduğu kimi, forma elementlərinin ön planda və fon rənglərini dəyişə bilərsiniz.
Təxminən hər forma elementinin fon rəngini dəyişdirmək üçün asan bir yoldur, giriş etiketindəki fon rəngini istifadə etməkdir. Məsələn, bu kod bütün elementlərdə mavi fon rəngini (# 9cf) tətbiq edir.
giriş {
fon-rəng: # 9cf;
rəng: # 000;
}
Yalnız müəyyən forma elementlərinin fon rəngini dəyişdirmək üçün yalnız textarea əlavə edin və üsluba seçin. Misal üçün:
giriş, textarea, seçin {
fon-rəng: # 9cf;
rəng: # 000;
}
Arka planınızın rəngini qaranlıq etdiyinizdə mətn rəngini dəyişdiyinizə əmin olun. Müqayisəli rənglər forma elementlərini daha aydın oxuya gətirir. Məsələn, mətn rəngli ağ olduqda, qara rəngli bir qırmızı rəngli mətn daha asan oxunur. Məsələn, bu kod ağ mətni qırmızı fonda yerləşdirir.
giriş, textarea, seçin {
background-color: # c00;
rəng: #fff;
}
Siz hətta fon şəklində bir fon rəngini özü də edə bilərsiniz. Unutmayın ki, forma etiketi bir blok elementdir , belə ki rəng yalnız elementlərin yerləri deyil, bütün düzbucaqlı doldurur.
Bölgəni fərqləndirmək üçün blok elementinə sarı bir fon əlavə edə bilərsiniz:
formu {
fon-rəng: #ffc;
}
Sərhədlər əlavə edin
Rənglərlə olduğu kimi, müxtəlif forma elementlərinin sərhədlərini dəyişə bilərsiniz. Bütün forma ətrafında bir sərhəd əlavə edə bilərsiniz. Padding əlavə olunduğundan əmin olun və ya forma elementləriniz sərhədin yanından sağa sıxılır.
5 piksel padding ilə 1 piksel qara sərhəd kodunun nümunəsi:
formu {
sərhəd: 1px bərk # 000;
padding: 5px;
}
Sərhədləri yalnız özü şəkillərdən daha çoxdur. Giriş maddələrinin sərhədlərini fərqləndirmək üçün dəyişdirin:
giriş {
sərhəd: 2px dashed # c00;
}
Giriş qutularına sərhədləri qoyduğunuzda diqqətli olun, sonra giriş qutuları kimi az görünsünlər və bəzi insanlar formunu doldura bilə bilməyəcəklər.
Style xüsusiyyətlərini birləşdirin
Forma elementlərinizi fikir və bəzi CSS ilə birlikdə qoyaraq, sitenizin dizaynını və yerləşdirilməsini tamamlayan gözəl görünüşlü bir forma qura bilərsiniz.