ورود ثبت نام
آخرین قسمت از آموزش تصویری CSS - نحوه استایل دهی به فرم ها
» طراحی سایت » آموزش CSS » آخرین قسمت از آموزش تصویری CSS – نحوه استایل دهی به فرم ها
5299 بازدید

آخرین قسمت از آموزش تصویری 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 رو می تونید از لینک زیر دانلود کنید .

رضا طوماری

دیدگاه



جواب سوال چیه ؟ *

  1. علی کریمی گفت:

    سلام آیا توی این آموزش همه ویژوگی ها و خصوصیت های css 1 به صورت کامل آموزش دا ده شده

    • رضا طوماری گفت:

      سلام
      بله تقریبا همه ویژگی های css آموزش داده شده است و علاوه بر اون تو اموزش های css3 ویژگی های جدید رو هم آموزش دادیم .

  2. mohsen گفت:

    با سلام و عرض خسته نباشید از آموزش های خوبتون کمال تشکر رو دارم .
    قسمت 19 تا 23 را نمیتوانم دانلود کنم وبرای دیدن ویدیوها چه نرم افزاری نیاز است

  3. armia گفت:

    slam
    Link ha kharab hastan

    lotfan Drostesh konid