فرم های سبک با CSS

یادگیری برای بهبود نگاه وب سایت شما

یادگیری نحوه ی فرم کردن با CSS یک راه عالی برای بهبود نگاه وب سایت شما است. اشکال HTML، مسلما در میان بسیاری از چیزهای زشت ترین در بسیاری از صفحات وب است. آنها اغلب خسته کننده و سودآور هستند و به شیوه ای بسیار سبک ارائه نمی دهند.

با CSS، که می تواند تغییر کند. ترکیب CSS با تگ های فرم پیشرفته تر می تواند برخی از فرم های زیبا را ارائه دهد.

تغییر رنگ ها

همانند متن، می توانید رنگ پیش زمینه و پس زمینه عناصر فرم را تغییر دهید.

یک روش ساده برای تغییر رنگ پس زمینه تقریبا هر عنصر فرم، استفاده از خصوصیت پسزمینه در تگ ورودی است. به عنوان مثال، این کد یک رنگ پس زمینه آبی (# 9cf) را روی تمام عناصر اعمال می کند.

ورودی {
رنگ پس زمینه: # 9cf؛
رنگ: # 000؛
}

برای تغییر رنگ پس زمینه تنها عناصر فرم خاص، فقط اضافه کردن متن و انتخاب به سبک. مثلا:

ورودی، متن، انتخاب {
رنگ پس زمینه: # 9cf؛
رنگ: # 000؛
}

اگر رنگ پس زمینه تیره باشد، مطمئن شوید که رنگ متن را تغییر دهید. رنگ های متنوع کمک می کنند که عناصر فرم قابل خواندن باشند. به عنوان مثال، متن در رنگ پس زمینه تیره قرمز بسیار آسان تر است اگر رنگ متن سفید است. به عنوان مثال، این کد متن سفید را در پس زمینه قرمز جای می دهد.

ورودی، متن، انتخاب {
رنگ پس زمینه: # c00؛
رنگ: #fff؛
}

شما حتی می توانید یک رنگ پس زمینه را در تگ فرم خود قرار دهید. به یاد داشته باشید که تگ فرم یک عنصر بلوک است ، بنابراین رنگ تمام مستطیل را پر می کند، نه فقط مکان های عناصر.

شما می توانید پس زمینه زرد را به یک عنصر بلوک اضافه کنید تا منطقه را به بیرون بکشید، مانند این:

فرم {
رنگ پس زمینه: #ffc؛
}

اضافه کردن مرزها

همانند رنگها، می توانید مرزهای عناصر مختلف را تغییر دهید. شما می توانید یک مرز واحد را در کل فرم اضافه کنید. اطمینان حاصل کنید که حاشیه را اضافه کنید، یا عناصر فرم شما درست در کنار مرز قرار می گیرند.

در اینجا یک مثال از کد برای یک مرز سیاه سیاه 1 پیکسل با 5 پیکسل padding است:

فرم {
مرز: 1px solid # 000؛
padding: 5px؛
}

شما می توانید مرزها را بیش از فرم خود قرار دهید. مرز آیتم های ورودی را تغییر دهید تا آنها را بیابند:

ورودی {
مرز: 2px dashed # c00؛
}

مراقب باشید زمانی که مرزها را روی جعبه های ورودی قرار دهید، به نظر می رسد که آنها مانند جعبه های ورودی کمتر نگاه می کنند و بعضی ممکن است متوجه شوند که می توانند فرم را پر کنند.

ترکیبی از ویژگی های سبک

با قرار دادن عناصر فرم خود را با اندیشه و برخی از CSS، شما می توانید یک فرم خوب نگاه کنید که به طراحی و طرح سایت شما متصل است.