دنیای برنامه نویسی و اپلیکیشن

baner-telegram
شما اینجا هستید : صفحه اول » طراحی سایت » آموزش CSS » خاصیت float و clear در فیلم آموزش CSS به زبان فارسی
خاصیت float و clear در فیلم آموزش CSS به زبان فارسی

خاصیت float و clear در فیلم آموزش CSS به زبان فارسی

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

خاصیت float در CSS

float به معنی شناور بودن است و با استفاده از خاصیت float می توان عناصر را به سمت چپ یا راست برد ، و دارای دوتا مقدار است که در ادامه با آن ها آشنا می شوید :

مقدار Right :

اگر ویژگی float را برابر right قرار دهید عنصر مورد نظر شما به سمت راست خواهد رفت ، برای درک این مطلب می توانید کد های زیر را اجرا کنید :

سورس کد HTML :

<!doctype html>
<html>
	<head>
		<title>Web30ty.com</title>
		<link rel="stylesheet" type="text/css" href="style.css" />

	</head>
	<body>
	
		<div class="box1">
		</div>
	</body>
</html>

سورس کد CSS :

.box1{
	width: 400px;
	height: 300px;
	background: green;
	border: #f00 3px solid;
	float: right;
}

مقدار Left :

اگر مقدار خاصیت float را برابر left قرار دهید عنصر مورد نظر شما به سمت چپ خواهد رفت .

کد CSS :

.box1{
	width: 400px;
	height: 300px;
	background: green;
	border: #f00 3px solid;
	float: left;
}

خاصیت Clear در CSS :

با استفاده از ویژگی clear کناره هایی از عنصر را که می خواهیم عکس ، متن یا هر چیز دیگری در آن سمت قرار نگیرد را مشخص می کنیم . اگر به زبان ساده بگم یعنی از این خاصیت برای خالی کردن فضای اطراف یک عنصر استفاده می شود .

به نکته ای که باید توجه کنید این است که زمانی می توانید از این ویژگی استفاده کنید که عنصر قبلی شما از خاصیت float استفاده کرده باشد .
خاصیت clear چهار مقدار زیر را می پذیرد :

مقدار none :

حالت پیش فرض است و هیچ فرقی به حال عنصر ما ندارد .

مقدار right :

در سمت راست عنصر هیچ متن و عکسی قرار نمی گیرد .

مقدار left :

در سمت چپ عنصر هیچ متن و عکسی قرار نمی گیرد .

مقدار both :

در دو طرف عنصر متن و عکس نمی تواند قرار بگیرد .

 

کد HTML :

<!doctype html>
<html>
	<head>
		<title>Web30ty.com</title>
		<link rel="stylesheet" type="text/css" href="style.css" />

	</head>
	<body>
	
		<div class="box1">
		</div>
		<div class="box2">
		</div>
	</body>
</html>

کد CSS :

.box1{
	width: 400px;
	height: 300px;
	background: green;
	border: #f00 3px solid;
	float: right;
}
.box2{
	width: 400px;
	height: 300px;
	background: blue;
	border: #ff0 3px solid;
	float: right;
	clear: right;
}

برای این که بهتر متوجه شوید می توانید فیلم آموزشی را مشاهده کنید .

نحوه استفاده از Content در CSS :

با استفاده از content می توانیم یک متنی را در CSS بنویسیم و آن متن در صفحه وب نمایش داده می شود . برای این کار در CSS از به صورت زیر عمل زیر عمل می کنیم :

.box1{
	width: 400px;
	height: 300px;
	background: blue;
	border: #ff0 3px solid;
	direction: rtl;
}
.box1::after{
	content: "این متن در CSS نوشته شده است .";
}

متنی را که می خواهید بنویسید باید آن را در داخل دابل کوتیشن قرار دهید ، با after در جلسات بعدی آشنا خواهید شد .

فیلم آموزش float و clear را می توانید از لینک زیر دانلود کنید .

پیشنهاد می کنیم حتما بخوانید :

درباره : رضا طوماری

عاشق برنامه نویسی

نظرات کاربران :



نظرات بسته شده است.