
در این قسمت از آموزش تصویری CSS به نحوه استایل دهی به فرم ها پرداخته شده است و نکات مهمی را نیز در این قسمت بیان کرده ایم و این آخرین قسمت از آموزش CSS است که برای کاربران وب سیتی آماده شده است و از شما کاربران عزیز تقاضا داریم تا نظرات خود و نقاظ ضعف این دوره را در قسمت نظرات بنویسید تا از نظرات شما استفاده کنیم و در دوره های بعدی کیفیت فیلم های آموزشی را بالا ببریم .
استایل دهی به فرم ها در CSS
اگر با فرم ها آشنا نیستید این آموزش ساخت فرم در HTML را مشاهده فرمایید .
همان طور که در آموزش Attribute Selector گفتم می تونیم با استفاده از ویژگی هایی که در HTML تعریف می کنیم به تگ ها استایل بدیم ، پس حالا هم همین کار رو انجام میدیم :
کد HTML :
<!doctype html> <html> <head> <meta charset="utf-8"> <title>وب سیتی</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <form> <input type="text" name="user" /> </form> </body> </html>
کد CSS :
input[type = text]{ width:350px; height:50px; background-color:gray; color:#fff; font-size:20px; }
اگر کدهای بالا را اجرا کنید خواهید دید که به کادر متنی استایل خاصی داده شده است . حالا به بقیه تگ هایی که در فرم استفاده می شوند هم به همین صورت استایل می دهیم .
اضافه کردن آیکون به فرم جستجو
حالا اگر بخواید به فرم ها آیکون اضافه بکنید باید مثل فیلم آموزش CSS این کار رو انجام بدید و سورس کد اون هم به صورت زیر هستش و توضیحات تکمیلی و کامل در آموزش تصویری CSS داده شده است :
کد HTML :
<!doctype html> <html> <head> <meta charset="utf-8"> <title>وب سیتی</title> <link rel="stylesheet" type="text/css" href="style.css" /> </head> <body> <form> <input type="text" name="user" /> <i></i> </form> </body> </html>
کد CSS :
input[type = text]{ width:350px; height:100px; color:#000; font-size:20px; border:2px solid red; padding-right:110px; } input[type = text]:focus{ border:4px solid green; border-radius:5px; outline:none; font-size:25px; } form{ position:relative; direction:rtl; } form i{ width:100px; height:100px; background-color:red; display:block; position:absolute; top:5px; right:20px; background:url("search.png") no-repeat; }
در این جا شما فقط به جای search.png در پس زمینه آدرس عکس مورد نظر خودتون رو بدید تا عکس در صفحه ظاهر بشه .
سلام آیا توی این آموزش همه ویژوگی ها و خصوصیت های css 1 به صورت کامل آموزش دا ده شده
سلام
بله تقریبا همه ویژگی های css آموزش داده شده است و علاوه بر اون تو اموزش های css3 ویژگی های جدید رو هم آموزش دادیم .
با سلام و عرض خسته نباشید از آموزش های خوبتون کمال تشکر رو دارم .
قسمت 19 تا 23 را نمیتوانم دانلود کنم وبرای دیدن ویدیوها چه نرم افزاری نیاز است
سلام سرور ها مشکل داشت ، درستشون کردیم .
slam
Link ha kharab hastan
lotfan Drostesh konid