آخرین قسمت از آموزش تصویری CSS – نحوه استایل دهی به فرم ها
در این قسمت از آموزش تصویری 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 رو می تونید از لینک زیر دانلود کنید .
-
حجم :
39 مگابایت -
دانلود :
دانلود با لینک مستقیم
لینک دانلود
پیشنهاد می کنیم حتما بخوانید :
سلام آیا توی این آموزش همه ویژوگی ها و خصوصیت های css 1 به صورت کامل آموزش دا ده شده
سلام
بله تقریبا همه ویژگی های css آموزش داده شده است و علاوه بر اون تو اموزش های css3 ویژگی های جدید رو هم آموزش دادیم .
با سلام و عرض خسته نباشید از آموزش های خوبتون کمال تشکر رو دارم .
قسمت 19 تا 23 را نمیتوانم دانلود کنم وبرای دیدن ویدیوها چه نرم افزاری نیاز است
سلام سرور ها مشکل داشت ، درستشون کردیم .
slam
Link ha kharab hastan
lotfan Drostesh konid