در این جلسه  طراحی سایت شما را با  خصوصیت های شناور ساختن عناصر و تراز عمودی آشنا می کنیم:

خصوصیت Align Vertical

این خاصیت به منظور تراز عمودی عناصر inline مثل <span> , <img> , <a> و … استفاده می شود…
خب اول باید فرق عناصر inline و عناصر block را بدانید تا تعریف این خاصیت قابل فھم شود.
عناصر block : عناصری ھستند که قبل و بعد از آنھایک خط خالی وجود دارد؛ مانند <hn> , <div> , <p> و
… در HTML
عناصر inline (خطی) : عناصر خطی عناصری ھستند که قبل و بعد از انھا خط خالی وجود ندارد؛ مانند <, <a
span> <img>> و… در HTML
و ھمان طور که گفتیم خاصیت align vertical برای تراز عناصر inline استفاده می شود؛ این خاصیت یکی از سه مقدار
عددی، درصدی و کلمات کلیدی را به عنوان مقدار می پذیرد.

کلمات کلیدی:

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

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

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

کد 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 می پردازیم

طراحی سایت اسپیناس همیشه سعی در استفاده از به روز ترین تکتینک ها و ابزارها در  طراحی سایت دارد  در اسپیناس از تکنولوژی ها روز دنیا مانند CSS3 , HTML5 , Jquery , JAVASCRIPT   در طراحی وب سایت استفاده می شود و همچنین زبانهایی مانند PHP , ASP  در شرکت اسپیناس مشتری مداری حرف اول را می زند

بارگذاری نوشته های مرتبط بیشتر
بارگذاری بیشتر در آموزش Css در طراحی سایت

پاسخ دهید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

18 − پانزده =

بررسی کنید

آموزش CSS (فصل بیستم) – آشنایی جلوه های ویژه ی CSS3

در این جلسه  طراحی سایت شما را با جلوه های ویژه ی CSS3 آشنا می کنیم: خاصیت transform شما م…