آموزش CSS – آشنایی با مفاهیم طراحی Layout از طریق سی اس اس (CSS) (جلسه ۳۰)

شاید بتوان گفت یکی از دشوار ترین بخش های فراگیری زبان سی اس اس (CSS) نحوه ایجاد یک Layout از طریق آن باشد. در این ماژول قصد داریم تا با چیزی تحت عنوان Normal Flow آشنا شویم.
به طور کلی تگ های اچ تی ام ال (HTML) به همان ترتیبی که نوشته می شوند روی صفحه نمایش داده می شوند که به چنین چیزی Normal Flow گفته می شود. برای روشن شدن این مسئله کدهای زیر را وارد ویراشگر کد خود می کنیم:

<!DOCTYPE html>
<html>
     
    <head>
        <meta charset="utf-8">
        <title>asrefonon</title>
        <link type="text/css" rel="stylesheet" href="/css/main.css">
    </head>
     
    <body>
        <h1>آشنایی با نحوه ساخت لی اوت با سی اس اس</h1>
        <p>کدهای اچ تی ام ال به همان ترتیبی که نوشته می شوند نمایش هم داده می شوند</p>
        <p>چنین حالتی اصطلاحاً نرمال فلو گفته می شود</p>
    </body>
</html>

همانطور که در کد فوق می بینیم، ابتدا یک تگ <h1> نوشته سپس از دو تگ <p> استفاده کرده ایم و داخل هر کدام از آن ها عبارتی را نوشته ایم. حال این فایل را داخل مرورگر خود اجرا می کنیم:

1-css_layout

همانطور که در تصویر فوق می بینیم، تگ های اچ تی ام ال (HTML) به همان ترتیبی که نوشته شده اند به نمایش در آمده اند.
برای آنکه بتوانیم روی نحوه نمایش تگ های اچ تی ام ال تسلط بیشتری داشته باشیم، می بایست از دستورات سی اس اس (CSS) استفاده کنیم. Attribute یی تحت عنوان position این امکان را به طراح می دهد تا با استفاده از مقادیر مختلفی که برایش در نظر گفته شده است، جایگاه تگ های اچ تی ام ال (HTML) را روی صفحه مشخص سازد. این Attribute یکی از پنج گزینه static، relative، absolute، fixed و inherit را می تواند داشته باشد.
منظور از مقدار static همان حالت پیش فرض است که تگ های اچ تی ام ال به همان ترتیبی که نوشته می شوند در مرورگر به نمایش در می آیند. برای مشخص شدن تاثیر این Value کد زیر را وارد فایل سی اس اس (CSS) خود می کنیم:

h1, p{
   position:static;
}

همانطور که در کد فوق می بینیم، برای تگ های h1 و p از Attribute یی تحت عنوان position استفاده کرده و Value آن را برابر با static قرار داده ایم. حال مرورگر را به روز رسانی می کنیم:

1-css_layout

می بینیم که عناصر قرار گرفته روی صفحه هیچ تغییری نکردند.
Value دیگری که در ارتباط با position می خواهیم مد نظر قرار دهیم relative به معنی “نسبی” است. زمانیکه از این Value استفاده می کنیم، تگ های اچ تی ام ال (HTML) باز هم به همان ترتیبی که نوشته می شوند در مرورگر به نمایش در می آیند با این تفاوت که می توان فاصله ای برای هر چهار جهت بالا، راست، پایین و چپ تگ خود مد نظر قرار دهیم. برای روشن شدن این موضوع کد اچ تی ام ال (HTML) فوق را به صورت زیر بازنویسی می کنیم:

 <body>
        <p id="square1">مربع شماره یک</p>
        <p id="square2">مربع شماره دو</p>
        <p id="square3">مربع شماره سه</p>
    </body>

همانطور که در کد فوق می بینیم سه پاراگراف ایجاد کرده ایم و برای هر یک از آن ها هم یک id در نظر گرفته ایم. اکنون اقدام به تکمیل فایل سی اس اس (CSS) خود می کنیم:

#square1 {
   width:100px;
   background-color:blue;
   position:relative;
   top:20px;
   left:32px;
}
#square2 {
   width:100px;
   background-color:green;
   position:relative;
   top:40px;
   left:200px;
}
#square3 {
   width:100px;
   background-color:red;
   position:relative;
   top:100px;
   left:10px;
}

همانطور که در کد فوق مشاهده می شود، برای هر یک از پاراگراف ها اندازه ای معادل با ۱۰۰ پیسکل در نظر گرفته سپس رنگی برای پس زمینه آن ها انتخاب کرده ایم. پس از انتخاب relative برای position هر یک از آن ها، حال نوبت به تنظیم فاصله آن ها از سمت بالا و چپ می رسد. برای این منظور از Attribute های top و left استفاده کرده ایم (به خاطر داشته باشیم که برای سمت راست و پایین هم به ترتیب از right و bottom می توان استفاده کرد).
برای مربع اول فاصله از بالا را ۲۰ پیکسل و فاصله از سمت چپ را ۳۲ پیکسل در نظر گرفته ایم. برای مربع دوم فاصله از بالا را ۴۰ پیکسل و فاصله از سمت چپ را ۲۰۰ پیکسل در نظر گرفته ایم. به خاطر داشته باشیم که در ارتباط با مربع اول ۲۰ پیکسل از لبه مرورگر حساب می شود اما این در حالی است که در ارتباط با مربع دوم این ۴۰ پیکسل نسبت به تگ قبلی یا همان مربع اول محاسبه می شود. به عبارت دیگر مربع شماره دو از مربع شما یک ۴۰ پیکسل فاصله دارد. در نهایت مربع شماره سه از بالا ۱۰۰ پیکسل و از سمت چپ ۱۰ پیکسل فاصله دارد. حال فایل خود را مجدد داخل مرورگر به روز رسانی می کنیم:

3-css_layout

می بینیم که مربع ها به همان ترتیبی که در کدهای اچ تی ام ال (HTML) نوشته شده بودند به نمایش در آمده با این تفاوت که از سمت بالا و سمت چپ دارای فواصل مختلفی هستند.

221

اسماعیلی هستم مدیر عصر فنون. فارغ التحصیل مقطع کارشناسی ارشد رشته مهندسی فناوری اطلاعات (IT)