Научите да побољшате изглед Вашег веб сајта
Учење како обликовати облике са ЦСС-ом је одличан начин за побољшање изгледа ваше веб странице. ХТМЛ облици су вероватно међу најгорим стварима на већини веб страница. Често су досадни и утилитарни и не пружају много на начин стила.
Са ЦСС-ом, то се може променити. Комбиновање ЦСС-а са напреднијим ознакама облика може донијети неке лепе изгледе.
Промените боје
Као и код текста, можете променити предње и позадинске боје елемената форми.
Једноставан начин за промјену боје позадине скоро сваког елемента је кориштење боје позадине у улазној ознаци. На примјер, овај код примјењује боју плаве позадине (# 9цф) на све елементе.
улазни {
бацкгроунд-цолор: # 9цф;
боја: # 000;
}
Да бисте променили боју позадине само одређених елемента форми, само додајте тектареа и изаберите стил. На пример:
инпут, тектареа, изаберите {
бацкгроунд-цолор: # 9цф;
боја: # 000;
}
Обавезно промијените боју текста ако творите боју позадине. Контрастне боје помажу у томе да елементи облика буду читљиви. На пример, текст на тамно црвеној боји боје је много лакше прочитати ако је боја текста бела. На пример, овај код поставља бели текст на црвену позадину.
инпут, тектареа, изаберите {
бацкгроунд-цолор: # ц00;
боја: #ффф;
}
Можете чак и ставити позадинску боју на саму форму ознаке. Запамтите да је ознака за облик блок елемент , тако да боја испуњава цео правоугаоник, а не само локације елемената.
Можете додати жуту позадину елементу блока да би се подручје издвојило, овако:
форма {
бацкгроунд-цолор: #ффц;
}
Додај границе
Као и код боја, можете променити границе различитих елемената форме. Можете додати једну границу око цијелог формулара. Обавезно додајте паддинг, или ће вам елементи за облик бити заглављени одмах поред границе.
Ево примера кода црне границе од 1 пиксела са 5 пиксела облоге:
форма {
бордер: 1пк солид # 000;
паддинг: 5пк;
}
Можете поставити границе више него само сам образац. Промените границу улазних ставки како би их истакли:
улазни {
граница: 2пк испрекидана # ц00;
}
Будите пажљиви када стављате границе на улазна поља пошто изгледају мање као улазне кутије, а неки људи можда не схватају да могу попунити формулар.
Функције комбинације стила
Постављањем ваших елемената за облик уз помисао и неким ЦСС-ом, можете поставити лијеп изглед који допуњује дизајн и изглед вашег сајта.