جلسه دهم
در ادامه مباحث آموزش طراحی تحت وب با جلسه دهم همراه شما عزیزان خواهیم بود. دو جلسه قبلی اختصاص یافت به آموزش CSS و ویژگی های آن. این جلسه نیز ادامه آن مباحث خواهد بود.
ویژگی شناوری چیست
float یا ویژگی شناوری خاصیتی در CSS است که مشخص می کند عنصر مورد نظر در کدام جهت (چپ یا راست) قرار بگیرد.
برای ساده سازی این تعریف به این مثال توجه کنید: فرض کنید برای طراحی دو ستون در یک صفحه نیاز دارید که هر کدام را در سمتی از صفحه قرار دهید. یکی در سمت چپ و دیگری در سمت راست. برای اینکه ستونهای مورد نظر در یکی از این جهت ها قرار بگیرد CSS ویژگی float را در دسترس طراح قرار داده تا با مقداردهی به آن جهت قرارگیری عنصر را تعیین کند.
float دارای مقادیری همچون:
- none : عنصر مورد نظر شناوری ندارد.
- left : عنصر در سمت چپ شناور است.
- right : عنصر در سمت راست شناور است.
- initial : شناوری پیشفرض.
- inherit : دریافت شناوری از عنصر والد.
مثال:
برای اینکه ستون های تصویر زیر را در جهت مناسبی که برایش تعیین شده قرار دهیم باید به صورت زیر عمل کنیم:
در سند html به این صورت عمل می کنیم:
<html>
<body>
<div class="left-block"></div>
<div class="right-block"></div>
</body>
</html>در سند CSS بصورت زیر عمل می کنیم:
.left-block{
float:left;
border: 2px solid red;
width:200px;
height:400px;
}
.right-block{
float:right;
border: 2px solid red;
width:200px;
height:400px;
}در سند HTML چه خبر؟!
در سند html از دو برچسب div استفاده شد یکی برای ستون سمت راست و دیگری برای ستون سمت چپ. به هرکدام یک کلاس اختصاص دادیم تا بتوانیم از طریق ویزگی های CSS تغییرات را بر روی آنها اعمال کنیم.
برای ایجاد عناصر مورد نظر می توان از برچسب دوطرفه div استفاده کرد.
در سند CSS چه خبر؟!
در سند CSS چون از کلاس برای برچسب ها استفاده کردیم پس ابتدا یک نقطه قرار داده و سپس نام کلاس را نوشتیم. در ابتدای ویزگی ها مشخص کردیم که هریک از ستون در کدام سمت قرار بگیرد. برای همین از ویزگی شناوری با مقداردهی left و right استفاده کردیم. در خط دوم از ویژگی border برای قرار دادن یک مرز و تفکیک ستون ها از یکدیگر استفاده شد. که قطر آن برابر شد با 2px و مقدار برابر با solid (در جلسات بعدی توضیح داده خواهد شد) قرار گرفت و در انتها رنگ border مشخص شد. همچنین برای هریک از ستون ها عرض و ارتفاع در نظر گرفته شد که با ویزگی های height و width مشخص هستند. بدین صورت توانستیم با یادگیری ویژگی شناوری عناصر خود را در سمت راست یا چپ ثابت کنیم.
دیدگاه