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

خاصیت Float

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

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

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

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

کد html :

<h1> 7Learn.com </h1>
<ul class="navi">
<li> <a href="#"> Home Page </a> </li>
<li> <a href="#"> Tutorials </a> </li>
<li> <a href="#"> About Us </a> </li>
</ul>

و کد Css زیر :

H1 {
Float: left;
Margin-top: 0;
}

.navi {
Float: right;
Margin: 0;
List-style: none;
}

.navi li {
Float: left;
}

.navi a {
Display: block;
Margin-left: 15px;
Padding: 15px;
Border: 1px solid #ccc;
Color: #233;
Text-decoration: none;
}

.navi a:focus , .navi a:hover {
Background: #aaa;
Color: #fff;
}

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

خاصیت 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 شناور نخواهد شد.

مثال :

<h1> 7Learn.com </h1>
<ul class="navi">
<li> <a href="#"> Home Page </a> </li>
<li> <a href="#"> Tutorials </a> </li>
<li> <a href="#"> About Us </a> </li>
</ul>
<h2> Javascript and Web Design Tutorials </h2>

و کد Css زیر :

H1 {
Float: left;
Margin-top: 0;
}

.navi {
Float: right;
Margin: 0;
List-style: none;
}

.navi li {
Float: left;
}

.navi a {
Display: block;
Margin-left: 15px;
Padding: 15px;
Border: 1px solid #ccc;
Color: #233;
Text-decoration: none;
}

.navi a:focus , .navi a:hover {
Background: #aaa;
Color: #fff;
}

H2 {
Clear: both;
}

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

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

خصوصیت Vertical Align

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

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

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

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

کلمات کلیدی:

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

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

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

مثال :

P {
Line-height: 10px;
Vertical-align: 5px;
}

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

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

مثال :

کد html :

<h1>
<span class="top"> Top </span>
<span class="middle"> Middle </span> 7Learn
<span class="bottom"> bottom </span> 7Learn
</h1>

و کد css :

H1 span { font-size: 10px;}
.top {vertical-align: top;}
.bottom {vertical-align: bottom;}
.middle {vertical-align: middle;}

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

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

نویسنده

طاها دریس