خانه / مقالات اموزشی / css / آموزش CSS خاصیت Float
آموزش CSS
آموزش CSS

آموزش CSS خاصیت Float

آموزش CSS (فصل ششم) : شناور ساختن عناصر و تراز عمودی

خاصیت Float

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

  • None : مقدار پیشفرض (هیچ)
  • Left : عنصری که این خاصیت برای آن تخصیص یابد در سمت چپ صفحه و یا در سمت چپ عنصر پدر خود قرار خواهد گرفت و عناصر پس از آن نیز در کنار این عنصر شناور خواهند شد.
  • Right : عنصری که این خاصیت برای آن تخصیص یابد در سمت راست صفحه و یا در سمت راست عنصر پدر خود قرار خواهد گرفت و عناصر پس از آن نیز در کنار این عنصر شناور خواهند شد.

خاصیت float برای ایجاد و تنظیم بخش navigation ( منوی سایت ) مناسب است

مثال : (ایجاد بخش منوی بالای سایت با استفاده از float )

کد html :

و کد Css زیر :
 

نتیجه در مرورگر :

1x1.trans آموزش CSS (فصل ششم) : شناور ساختن عناصر و تراز عمودی

خاصیت Clear

خاصیت clear وابسته به خاصیت float بوده و برای کنترل خاصیت float به کار می رود. و یکی از چهار مقدار زیر را می گیرد:

  • مقدار پیشفرض : none
  • Left : تاثیر خاصیت float:left را از بین می برد؛ یعنی باعث می شود که تاثیر left floated element (عنصری که خاصیت float left به آن دادیم) بر روی عناصر دیگر از بین برود.
  • Right : تاثیر خاصیت float: right را از بین می برد.
  • Both : تاثیر هر دو خاصیت float:left و float:right را بین می برد.

یک توضیح ساده برای خاصیت clear این است که این خاصیت برای cancel کردن تاثیر یک یا تعداد بیشتری از عناصر floated بر روی دیگر عناصراستفاده می شود. تاثیر یک عنصر floated بر روی دیگر عناصر این است که عناصر همجوار این عنصر به صورت شناور در کنار این عنصر قرار خواهند گرفت. به منظور از بین بردن تاثیر عنصر floated بر روی عناصر همجواراز خاصیت clear استفاده می کنند.

اگر خاصیت clear برای عنصری تعریف شود این عنصر در کنار عنصر floated شناور نخواهد شد.

مثال :

و کد Css زیر :
 

نتیجه در مرورگر :

1x1.trans آموزش CSS (فصل ششم) : شناور ساختن عناصر و تراز عمودی

اگر در مثال فوق از خاصیت clear استفاده نکنیم، صفحه به هم ریخته خواهد شد. همانند شکل زیر:

1x1.trans آموزش CSS (فصل ششم) : شناور ساختن عناصر و تراز عمودی

خصوصیت Vertical Align

این خاصیت به منظور تراز عمودی عناصر inline مثل <a> , <img> , <span> و … استفاده می شود…

خب اول باید فرق عناصر inline  و عناصر block را بدانید تا تعریف این خاصیت قابل فهم شود.

  • عناصر block : عناصری هستند که قبل و بعد از آنهایک خط خالی وجود دارد؛ مانند <p> , <div> , <hn> و … در HTML
  • عناصر inline (خطی) : عناصر خطی عناصری هستند که قبل و بعد از انها خط خالی وجود ندارد؛ مانند <a> ,<img> <span>  و… در HTML

و همان طور که گفتیم خاصیت vertical align برای تراز عناصر inline  استفاده می شود؛ این خاصیت یکی از سه مقدار عددی، درصدی و کلمات کلیدی را به عنوان مقدار می پذیرد.

کلمات کلیدی:

  • Baseline : این مقدار خطی است فرضی که هم تراز با قسمت پایینی حروف یک کلمه یا جمله می باشد. مثلا خط فرضی که کلمه ۷Learn رو آن می نشیند.
  • Middle : تراز با میانه ی خط
  • Sub : تراز بالای خط مثل اعداد توان در ریاضی؛ این مقدار معادل تگ <sub> در HTML است.
  • Super : تراز با پایین خط و مثل اعداد اندیس در ریاضی ؛ این مقدار معادل تگ <sup> در HTML است.
  • Text-top : متن را با بالای بلندترین حروف اطراف تراز می کند.
  • Text-bottom : متن را با کوتاه ترین یا پایین ترین حروف تراز می کند، برای مثال g یا y زیر خط اصلی (baseline) قرار می گیرند و متن با پایین ترین قسمت این حروف تراز می شود.
  • Top : قسمت بالای عنصر را بلند ترین عنصر موجود در خط تراز می کند.
  • Bottom : قسمت پایین عنصر را با کوتاه ترین عنصر موجود در خط تراز می کند.

استفاده از مقادیر درصدی و عددی بستگی به خاصیت line-height تعریف شده برای عنصر مورد نظر دارد.

مثال : استفاده از vertical-align: 50% متن را در وسط خط تراز می کند.

مثال :

 

در مثال فوق line-height برابر ۱۰ پیکسل و از آنجاییکه vertical-align برابر ۵ پیکسل و نصف مقدار line-height می باشد، متن در وسط خط تراز می شود.

خاصیت vertical-align به طور خاص برای تراز بندی تصاویر مفید است.

مثال :

کد html :

و کد css :
 

نتیجه در مرورگر :

1x1.trans آموزش CSS (فصل ششم) : شناور ساختن عناصر و تراز عمودی

بسیار خب تا اینجا با شناور ساختن عناصر و طریقه از بین بردن شناور بودن عناصر بعد از آن ها، و تراز عمودی آشنا شدیم، در فصل بعدی به کار با لیست های ul و ol و عناصر آن ها یعنی تگ li می پردازیم.

درباره آموزشگاه نوین آی تی

همچنین ببینید

آموزش برنامه نویسی جاوا

نحوه نام گذاری متغییر های جاوا

مطلب جدیدی که در این آموزش قرار است فرا بگیریم نحوه صحیح نامگذاری متغیر ها ...

پاسخ دهید

علی طاهری آموزشگاه طراحی سایت نوین آی تی 021-88283800 info(@)novin-it.net