آموزش CSS (قسمت ۳)

آموزش-css-قسمت-۳

ممکنه در طراحی قالب وب سایت نیاز داشته باشید محل قرار گیری متن یا شکل های ایجاد شد رو کنترل کنید.مثلا در یک سطر ۲ متن وجود داشته باشد که یکی سمت راست و دیگری سمت چپ قرار گیرد.برای انجام این کار می توانیم از CSS استفاده کنیم.در CSS مشخصه هایی برای تغییر محل قرار گیری اشیا ایجاد شده وجود دارد که قصد دارم در این آموزش شما را با این مشخصه ها آشنا کنم.

  • Float : برای تنظیم سمت قرار گیری اشیا ایجاد شده به کار می رود. این مشخصه دو مقدار دارد. Right - Left 
  • Text-align : برای تنظیم سمت قرار گیری متن استفاده می شود. این مشخصه سه مقدار دارد. Right - Center - Left
  • Position : این مشخصه برای تنظیم سمت قرار گیری اشیا ایجاد شده به کار می رود با این تفاوت که با استفاده از این مشخصه، می توان تنظیمات دلخواهی را بر روی تمام عناصر ایجاد شده انجام داد یعنی فاصله از تمام جهات را مدیریت کرد. این مشخصه دارای مقادیر زیر می باشد :

Static : این مقدار به صورت پیش فرض می باشد که عنصر ایجاد شده در مکانی که ایجاد شده بدون تغییر خواهد بود.

Relative : با تنظیم این مقدار بر روی عنصر، می توانیم آن را نسبت به محلی که ایجاد شده از جهت های مختلف (Top - Right - Bottom - Left‌) تنظیم کرد.

Fixed : این مقدار عنصر ما را ثابت می کند و با اسکرول کردن صفحه، عنصر بدون جابه جا شدن در جای خود می ماند.

Absolute : با استفاده از این مقدار می توانیم چندین عنصر را بر روی هم قرار بدیم مثلا چندین متن را روی یک تصویر قرار بدیم.

Sticky : در صورت استفاده از این مقدار، زمانی که صفحه را اسکرول می کنیم و عنصر ما به قسمت بالای صفحه می رسد به حالت Fixed در آمده و با اسکرول به پایین صفحه می آید.

در ادامه با توجه به کدهای زیر با مفهوم مشخصه گفته شده بیشتر آشنا خواهید شد.

کدهای HTML : 

<div class="dr float">
    <h5>Float تنظیم جهت قرار گیری عنصر با استفاده از </h5>
    <p class="dr-float-right"> متن سمت راست </p>
    <p class="dr-float-left"> متن سمت چپ </p>
</div>

<br><br>

<div class="dr text-align">
    <h4>Text-align تنظیم جهت قرار گیری متن با استفاده از  </h4>  
    <p class="dr-text-align-left"> چپ </p>
    <p class="dr-text-align-center"> وسط </p>
    <p class="dr-text-align-right"> راست </p>
</div>

<br>

<div class="dr position">
    <h4>Position تنظیم عناصر با  </h4>
    <div class="box dr-static"> Static </div>
    <div class="box dr-fixed"> Fixed </div>
    <div class="box dr-relative "> Relative 
        <div class="box dr-absolute"> Absolute </div>
    </div>
    <div class="box dr-sticky"> Sticky </div>
</div>

کدهای CSS : 

<!-- استایل درونی -->
<style>
    .dr{
        padding: 5px;
        margin: 5px;
    }
    p{
        border:2px solid #CD6133;
    }

    /* Float */
    .float .dr-float-right{
        float:right;
    }
    .float .dr-float-left{
        float:left;
    }

    /* Text Align */
    .text-align .dr-text-align-left{
        text-align: left;
    }
    .text-align .dr-text-align-center{
        text-align: center;
    }
    .text-align .dr-text-align-right{
        text-align: right;
    }

    /* Position */
    .position .box{
        width: 100px;
        height: 100px;
        margin: 5px;
        color: white;
    }
    .position .dr-static{
        position: static;
        background-color: #CD6133;
    }
    .position .dr-fixed{
        position: fixed;
        right: 150px;
        background-color: blueviolet;
    }
    .position .dr-relative{
        position: relative;
        top: 50px;
        left: 150px;
        border: 2px solid darkgreen;
        color: darkgreen;
    }
    .position .dr-absolute{
        position: absolute;
        top: 50px;
        left: 20px;
        border: 2px solid chocolate;
        color: chocolate;
    }
    .position .dr-sticky{
        position: sticky;
        top: 50px;
        left: 500px;
        border: 2px solid dodgerblue;
        color: dodgerblue;
    }
</style>

► قسمت قبلی قسمت بعدی ◄
خودتان امتحان کنید

آموزش های مرتبط :



پرسش و پاسخ

سوالی دارید بپرسید؟