در این قسمت از فیلم آموزش 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 در جلسات بعدی آشنا خواهید شد .
