Научете како да го подобрите изгледот на вашата веб-страница
Учење како да стилизирате форми со CSS е одличен начин за подобрување на изгледот на вашата веб-страница. HTML-формите се веројатно меѓу најгрлите работи на повеќето веб-страници. Тие често се досадни и утилитарни и не нудат многу на патот на стилот.
Со CSS, тоа може да се промени. Комбинирањето на CSS со понапредните тагови може да даде некои убави форми.
Променете ги боите
Исто како и со текст, можете да ги промените предните и боите на позадината на елементите на формата.
Лесен начин за промена на бојата на позадината на речиси секој елемент на формата е да се користи сликата во боја на позадина на влезна ознака. На пример, овој код се однесува на сина боја на позадина (# 9cf) на сите елементи.
влез {
позадина-боја: # 9cf;
боја: # 000;
}
За да ја смените бојата на заднината само за одредени форми, едноставно додадете тексареа и изберете за стилот. На пример:
влез, текст, изберете {
позадина-боја: # 9cf;
боја: # 000;
}
Бидете сигурни да ја промените бојата на текстот ако ја направите вашата боја на позадина темна. Контрастните бои помагаат да бидат читливи формите. На пример, текстот на темноцрвена боја на позадина е многу полесно да се прочита ако бојата на текстот е бела. На пример, овој код го става белиот текст на црвена позадина.
влез, текст, изберете {
боја на позадина: # c00;
боја: #fff;
}
Можете дури да поставите боја на позадина на самата форма на тагот. Запомнете дека ознаката за форма е блок елемент , така што бојата го исполнува целиот правоаголник, а не само локациите на елементите.
Можете да додадете жолта позадина на блок елементот за да ја издвоите областа, како на пример:
форма {
боја на позадина: #ffc;
}
Додај граници
Како и со боите, можете да ги промените границите на различни форми на елементи. Можете да додадете една граница околу целата форма. Бидете сигурни да додадете проследување, или елементите на формата ќе бидат заглавени веднаш до границата.
Еве еден пример за код за црна граница од 1 пиксела со 5 пиксели на обвивката:
форма {
граница: 1px солидна # 000;
Соочувајќи се: 5px;
}
Можете да ги ставите границите околу повеќе отколку само самата форма. Променете ја границата на влезните елементи за да ги издвоите:
влез {
граница: 2px попарен # c00;
}
Бидете внимателни кога ќе ги ставите границите на влезните полиња, бидејќи тогаш изгледаат помалку како влезни кутии, а некои луѓе можеби не сфаќаат дека можат да ја пополнат формата.
Комбинирајте ги стилските функции
Со составување на вашите форми со мисла и некои CSS, можете да поставите убав изглед кој го надополнува дизајнот и изгледот на вашата веб-страница.