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

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

در بخش قبلی آموزش CSS، با نحوه نوشتن کدهای CSS در کدهای HTML و نیز کارایی CSS آشنا شدید.حالا در ادامه آموزش می خوام تعدادی دیگر از سینتکس های (Syntax) این زبان آشناتون کنم.چون نیاز به توضیحات خاصی نداره پس کدهای نمونه رو براتون میزارم تا ببینید و خودتون امتحان کنید. در آموزش های CSS، از روش داخلی استفاده می شود.

در کدهای زیر با استفاده از HTML و CSS ما ۳ عدد شکل مستطیل با رنگ های متفاوت ایجاد می کنیم و رویداد hover برای آن ها تعریف کرده ایم. رویداد hover‌ زمانی اتفاق می افتد که نشانگر ماوس بر روی آن شکل قرار بگیرد. حال ما با کمک این رویداد تعریف کرده ایم زمانی که نشانگر ماوس بر روی شکل ما قرار گرفت، رنگ مستطیل به سیاه تغییر میکند.

کد های HTML : 

<div class="dr dr-code1"> تغییر رنگ پس زمینه </div>
<div class="dr dr-code2"> تغییر رنگ پس زمینه </div>
<div class="dr dr-code3"> تغییر رنگ پس زمینه </div>

کد های CSS : 

<style>
    body{
        background-color: #F4F4F4;
    }

    /* استفاده از نقطه در اول نام به معنی کلاس بودن آن می باشد */
    .dr{
        width:150px;
        height: 50px;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        color:#fff;
        padding-top: 30px;
        margin: 10px;
        display: inline-block;
        transition: 0.5s;
    }
    .dr:hover{
        background-color: black;
    }
    .dr-code1{
        background-color: Tomato;
    }
    .dr-code2{
        background-color: Orange;
    }
    .dr-code3{
        background-color: DodgerBlue;
    }
</style>

width : طول شکل ما را تعیین می کند.

height : عرض شکل را تعیین می کند.

font-size : اندازه متن نوشته را تعیین می کند.

font-weight : ضخامت متن نوشته شده را تعیین می کند.

text-align : محل قرار گیری نوشته را تعیین می کند که ما در وسط (center) تنظیم کرده ایم.

color : رنگ نوشته را تعیین می کند.

padding-top : فاصله داخلی بین متن و شکل مستطیل را از بالا تعیین می کند که ما بر روی 30 پیکسل تنظیم کرده ایم.این مشخصه دارای ۵ حالت می باشد.

padding : فاصله از تمام جهات

padding-top : فاصله از بالا

padding-left : فاصله از چپ

padding-bottom : فاصله از پایین

padding-right : فاصله از راستی

margin : فاصله خارجی بین متن و دیگر اشیا ایجاد شده را تعیین می کند.این مشخصه نیز دارای 5 حالت فوق می باشد.

display : برای تنظیم نوع چینش شکل های ایجاد شده به کار‌ میرود و اینجا من از inline-block برای قرار دادن اشکال در کنار هم و در یک سطر استفاده شده است.

transition : برای تنظیم زمان تغییر‌ رنگ (انیمیشن اعمال شده) برای شکل ایجاد شده استفاده می شود.

 

امیدوارم آموزش این بخش مورد استفاده شما عزیزان قرار گرفته باشد.


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

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



نظرات کاربران

نظر شما؟